Looking for feedback for people who have worked on projects in both LTR and RTL

Events happening in the community are now at Drupal community events on www.drupal.org.
WHMII's picture

Hi there!

I am part of the maintainer team for Bourbon and Neat. Neat grid has an upcoming 2.0.0 release that is currently in beta. While it wont be in the initial release, I am looking to add some basic ltr/rtl support. However, I have not personally worked on any rtl projects. It would be awesome to get some feedback on what a feature like this might look like and peoples past experiences.

International projects have unique needs, one of which is support for ltr/rtl support. Ideally a user would be able to switch directions with use of a single setting. I have not seen this done successfully in other frameworks but I believe it to be possible with the way neat 2.0 works.

I would love to hear from those who work in multiple languages and text directions and their successes and failures in doing so. This will likely have a significant impact on how this feature manifests.

https://github.com/thoughtbot/neat/issues/469

Comments

how can we help you in this

rami.sedhom's picture

It is good thinking about having RTL into your framework, this gives it more international dimensions as you said.

Conceptually, I believe RTL support is quite easy to be added to grid frameworks, although I don't have much experience in designing any of them.

Anyway, how can we help you in this?

It's done pretty well in

layalk's picture

It's done pretty well in Foundation.
What you need to do in your sass is to have these main variables like $default-direction and $opposite-direction for example and use them instead of your left/right values or property names in all of your sass files.
Check this tutorial for more references: http://rtl-this.com/tutorial/create-bidirectional-drupal-theme-using-fou... (it uses rtl support in foundation to create a bidirectional drupal theme).

Let me know if I can help more.

Layal

I have actually built out a

WHMII's picture

I have actually built out a version very similar to what foundation implemented. My concern is really more focused on the why as apposed to exactly how. I want to understand a users needs so that I can create a useful implementation of the feature.

As a user, is using an RTL float system more intuitive than an LTR and there fore better?

Have you used Foundations version of this RTL/LTR switch and was it helpful in creating the project you wanted?

Alternatively, are you creating RTL websites that you then convert to LTR for other languages, or visa versa?

Do the majority of websites that you create for RTL languages have different layouts than those for LTR?

Oh I misread your first

layalk's picture

Oh I misread your first post..so to answer your question:

Yes RTL float system is more intuitive since everything in terms of usability and ux in general is mirrored..so you'll find main" content blocks on the right and the sidebar on the left..etc

I usually work on either only Arabic(rtl) websites or multilingual websites that include at least Arabic and English(French comes next).
The first case would not differ much in terms of the grid..I know lots of developers in the region here who use Bootstrap; they use grid classes + push/pull helper classes to switch their divs' position..
But when it comes to bidirectional websites..it'll get ugly with Bootstrap, unless you separate your markup too(which is even uglier).
And I'm only here talking about grids; using frameworks' other ui components is a different story.

Foundation on the other hand, their rtl support makes everything easier..my sass is unified..and my output is two mirrored .css files.

Before CSS preprocessors, I would start with LTR version and then work on the RTL one. Because Drupal(and WordPress too) loads both(styles.css and styles-rtl.css), I would override only the horizontal positioning attributes in the -rtl.css file. It was a very time consuming and boring process.

All of the multilingual/bidirectional websites I've worked on share the exact layout but mirrored...what's left becomes on the right and vice versa.
Another non-layout difference is the font-size..Arabic fonts are usually smaller for some reason. A base font of 12px in English becomes 14px in Arabic(Tahoma for example). Sometimes this requires some layout alters(but this is very rare).

By the way, I really like your framework's logic..I personally use other frameworks' grid mixins heavily for the same reasons.

I hope my answers help you with your framework.

Layal

Thank you

WHMII's picture

Thank you for your thoughtful responses. It was super helpful!

I have crossposted to the github issue.

Will

Thank you

WHMII's picture

Thank you for your thoughtful responses. It was super helpful!

I have crossposted to the github issue.

Will

Arabization

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week