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

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 ...

So, is RTL working?

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

Details:

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.

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?

How translation works: There's a Typescript file per language, with translation fields.
Documentation about how to translate: https://github.com/debiki/talkyard/blob/master/translations/i18n-README.md (steps 1 and 2 only — steps 3 is for me).
Here's the English file: https://github.com/debiki/talkyard/blob/master/translations/en_US/i18n.ts

There's a Contributor License Agreement: https://github.com/debiki/talkyard/blob/master/docs/CLA-v2.txt.

***

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'.

@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-right()
  margin-left__RTL_LEFT_IS_RIGHT__: arguments;

// And then, for this:

.selector
  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.)