No internet connection
  1. Home
  2. Ideas

Support RTL languages like Hebrew, Arabic, Persian, Kurdish, Urdu

By KajMagnus @KajMagnus2019-09-10 05:46:06.579Z

To support RTL (right-to-left) languages, need to add CSS direction: rtl, and reorder UI widgets (in addition to adding i18n translation files).

  • 8 replies
  1. Progress
    with doing this idea
  2. @KajMagnus marked this topic as Planned 2019-09-10 05:46:15.485Z.
  3. KajMagnus @KajMagnus2019-09-10 05:47:41.263Z

    I'll spend some hours adding a translation file for Hebrew (with English texts, for now), and experimenting with the RTL CSS direction, and see how far I'll get ...

    1. J
      Jonathan Dortheimer @jonathan2019-09-18 16:32:01.899Z

      So, is RTL working?

      1. KajMagnus @KajMagnus2019-09-19 12:38:53.758Zreplies tojonathan:

        Hi Jonathan, summary: I think I can be done with RTL in 2 weeks.


        I tested a bit with RTL CSS classes, and most things work fine — there's one annoying thing: margin-left: ... and padding-left: ... — those -left and -right won't get flipped, by direction: rtl. So some paddings and margins end up on the wrong side of icons and things. There're new CSS properties that don't have this problem, namely: padding-inline-start and margin-inline-start etc, but they're not yet supported by MS Edge.

        Seems there's another okay solution to this though, namely to define variables $left = 'left' and $right = 'right' in the Stylus files, and then, for RTL, flip them so $left = 'right', and use like so: margin-$left: 123px — which then becomes margin-right when $left = 'right'.

        I'll need to generate two separate stylesheets, then, one for LTR and one for RTL.

        All this might take about ... 2 days work? + a day code review. ... And, I'm travelling elsewhere & need to + have promised to fix some other things first, ... So in about 2 weeks I would think.

        If you want to, what if you start translating to Hebrew, and then, when I'm done, I could then add the Hebrew file right away?

        Sorry for forgetting to post this status update until now.

        1. J
          Jonathan Dortheimer @jonathan2019-09-20 15:43:19.142Z

          Margin and padding is a problematic issue when adaption to RTL. I like to add a CSS with specific overrides. For example:
          body[dir="rtl"] div.someclass {
          margin: 0 2px 0 0;

          How does translation work?
          Where can I find the file to translate?

          1. KajMagnus @KajMagnus2019-09-22 02:31:32.902Zreplies tojonathan:

            How translation works: There's a Typescript file per language, with translation fields.
            Documentation about how to translate: (steps 1 and 2 only — steps 3 is for me).
            Here's the English file:

            There's a Contributor License Agreement:


            I thought about CSS overrides too, then I noticed there'd be fairly many overrides and thus duplicated selectors (e.g. div.someclass is duplicated in the example you posted), so I went looking for other approaches and found a blog post about this $left = 'right' approach. Maybe there'll be a combination of both CSS overrides, and $left = 'right'.

            1. @KajMagnus marked this topic as Started 2019-09-28 06:48:39.055Z.
            2. KajMagnus @KajMagnus2019-09-28 06:53:22.595Z

              @jonathan Seems I got RTL mostly working now. Turns out that thanks to using Stylus, I can redefine margin-left and margin and padding and float: left and left: ... and everything, and flip left and right globally — without changing any of the existing code, making this 99.9% less risky than what I previously thought.

              (I was worried I'd need to make tiny edits at 1000 different places — would have meant high typo risk.)

              Thanks Stylus for this :- )

              // I do this:
                margin-left__RTL_LEFT_IS_RIGHT__: arguments;
              // And then, for this:
                margin-right: 10px;
              // Stylus instead generates:
              .selector {
                margin-left__RTL_LEFT_IS_RIGHT__: 10px;
              // And then in a separate post process step, I remove __RTL_LEFT_IS_RIGHT__, resulting in:
                margin-left: 10px;

              This can actually be a blog post I think :- ). I've never seen this "instant" and "super safe" RTL approach mentioned anywhere. (Also, not many people use Stylus. They use LESS, SASS etc, and then I think this wouldn't have worked — I think those other languages require adding special chars like @ or $ or . or something for mixins.)