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.