Tachyons: RTL support

[rolfen]

I am trying to use Tachyons on a site that has RTL (Right-To-Left, such as Arabic, Hebrew, Farsi) content.

My layout is originally designed for LTR content (such as English), but I want it to be flipped when displaying a page in an RTL language.

There are a number of CSS properties which need to be "flipped". For example float:right should become float:left. Left margin should be right margin, etc. More info on stackoverflow.

Would the correct approach be to define a file (module?) to override these properties, for RTL languages? For example:

[dir="rtl"] .fl {
   float:right;
}

[johno]

A file module would be a good approach. Though, IMO, I think an additional build step, possibly using something like postcss-rtl is probably the best way to go about it.

This is definitely something I think Tachyons should support as a configuration option though. I've added it to my todo list to add support in tachyons-build-css.

[rolfen]

Hi,

Yes, I resorted to use a postcss RTL module (not that one in particular, but another one).
However, I could not find a module that is satisfactorily mature, it seems that any option I go with will need some amount of patching and debugging to produce minimal, bug-free CSS that will override directional properties.

Another possible approach would be to rewrite tachyons using "logical properties" such as "padding-inline-start" instead of "padding-left". Browser support is halfway there, so tachyons can be built into browser-compatible CSS using a PostCss modules. This means that we would again run into the same module quality issues, but it still feels like a neat solution - if not a bit work-intensive - it would mean rewriting tachyons and also making sure that the PostCSS module would output quality converted CSS. It also sounds like it would be in line with your planned support.

Thank you.

[rolfen]

Hi, if you're looking for postcss modules for rtl support, maybe have a look at postcss-bidirection. It had some issues with media queries, so I forked it and fixed them and am awaiting for my pull request to be merged back.

[DanielRuf]

Or use https://www.npmjs.com/package/rtlcss

[stas]

Hi there, I actually encountered the same problem. I was just curious what was the main reason this was closed? Is there no interest in providing support for dir/direction?

Thank you!

[DanielRuf]

Hi @stas,

Please read the comments. A PostCSS plugin is used now by @rolfen.

[stas]

Thanks @DanielRuf, I did, I just don't see how's that related to Tachyons. Again, is there any interest in having and supporting dir/direction or we should just figure it all on our own?