Rtl.css - how to?

(Ben) #1

I always create an rtl.css for my themes. However it’s a bit of a pain to generate. At the moment I use http://www.rtl-er.com/ - however I have to go through the generated styles and tweak things by hand after.

I’ve recently started using gulp (thanks to some prompting from @bfintal) however all the rtl plugins in there convert the entire stylesheet. Which seems wrong. WordPress auto includes rtl.css for rtl languages - so I only want it to include rtl styles - and to ignore everything else.

Is there a better gulp plugin/ process? Or should I do things in a different way?

(Leland Fiegel) #2

I never really got into automated RTL stylesheet generators because they seem like they produce inefficient code. Converting the entire stylesheet, when just a fraction of styles deal with left/right stuff, just seems like a huge waste of space.

Plus, sometimes you can rewrite your main CSS to be “RTL friendly” and don’t even need a specific RTL style to override.

For example, instead of just a value for left padding, you could probably just add an equivalent value of right padding in the main stylesheet (which you might need for balance anyway) instead of adding a specific RTL style.

There are some other things automated RTL plugins don’t seem to check. If you’re using things like directional arrow icons, you’ll have to either use CSS to rotate them to point in the other direction or override the icon itself.

I might be being too much of a purist here, but other things like horizontal skews should also be pointing in the opposite direction. Here’s something for a theme I’m working on:

In RTL.css, I’ll add a line to make those angles point in the opposite direction. I realize the average RTL user would never notice or care about this, but I want to stay true to the design regardless.

Sometimes you need to convert elements to display inline-block instead of inline in the main stylesheet, otherwise text direction has unintended effects. I’d imagine this is something an automated plugin wouldn’t check because there’s no explicit mention of horizontal positioning, but it’s something that would stick out when reviewing later.

These are a few things automated RTL stylesheets don’t seem to account for, although I’m sure they could probably be modified to easily detect things like CSS content values for Font Awesome directional arrows.

I know this probably isn’t the most efficient way of doing things, but I prefer to go line-by-line in the main CSS file, keeping an eye out for any left/right styles, and copying “mirrored” styles over to rtl.css when necessary.

For example, if I have an absolutely positioned element with left: 5%; I’ll put left: auto; right: 5%; in the RTL stylesheet to match. Same with any horizontal padding or margin values, and left or right floats.

It sounds like a huge pain to do it manually, but it honestly doesn’t take me very long. Maybe like 30 minutes to an hour per theme. I usually save RTL for last, after I have all the spacing of the LTR side of things perfected.

You’ll also start writing “normal” CSS a bit differently when you know you’ll have to account for RTL styles later on. Things like icons that prefix things (like a clock icon before a entry date), for example, should always be absolutely positioned so they can be easily overridden in right-to-left stylesheets.

(Ben) #3

Currently I do what you do since I agree. Just swapping the properties and including everything else doesn’t make sense. I use the website I mentioned to make the first version then I go through it and rewrite bits and change others so that it all works as intended. I was just hoping I could automate it as invariably the rtl gets left behind as the theme gets updated.

(Leland Fiegel) #4

It definitely would be nice to be able to reliably automate it. Even though it’s not that big of a pain point for me right now, an hour multiplied by every single RTL stylesheet I make manually will add up over time.

(Ben) #5

Totally agreed. If I can remove an hour or two per theme, for this and another hour or two for other things (for example i18n - image compression etc) then it could add up to quite a lot over the course of all the themes I make in the next few years.

(Leland Fiegel) #6

If anyone is curious about making RTL stylesheets, I just published a RTL stylesheet tutorial along with a free accompanying RTL Demo Theme which provides examples of common right-to-left CSS techniques.

(Ben) #7

I’ve actually started using Gulp for rtl.css now.

The rtl library allows comments that let you set rules for complex conversions (such as changing urls to make arrows point the other way).

Also I don’t actually use rtl.css anymore. I now have a style.css and a style-rtl.css and then I conditionally include them based on is_rtl(). A couple of lines of extra code - but it makes it a lot easier for me to keep my rtl files up to date - and it’s a lot quicker in general

(Leland Fiegel) #8

Hmm, this is good to know. Might have to write a follow-up on how to set it up with Gulp. Does it still produce an entire stylesheet though, like you described in the original post?

You mean instead of a style.css and a rtl.css, everything is in style-rtl.css if a right-to-left language is active?

Okay now the “entire stylesheet” thing is starting to make more sense. One less HTTP request for RTL users, and the maintenance issues of “duplicating code” are mitigated by Gulp automation.

(Ben) #9

yeah - exactly. It still generates an entire file - but you only have to include one, rather than overriding the ltr settings with a second file.

For reference I’m using https://www.npmjs.com/package/gulp-css-flipper - which is based on css-flip by Twitter - https://github.com/twitter/css-flip

The processing directives on the git repo shows how to change things. There’s actually only 2 directives - I’ve seen libraries with more - but this does everything I want.

(Thomas) #10

Hi there,

I had the exact same problem and found your thread on Google :slight_smile:

Since I wanted to use the default method with the overriding rtl.css I spent the weekend to create a small PostCSS plugin to automate it. The plugin is built on top of RTLCSS and just does some extra stuff for WordPress themes. It is not perfect and still requires some manual tweaks by hand but it helped me to save a lot of time.

Might be useful for you two or other theme developers, so I have published it on https://github.com/ThemeZee/postcss-wprtl


(Ben) #11

clever - I ended up writing my own script that tied into gulp as well. I’ll have to check out your plugin too - thanks for the update.