The site's CSS has a "ltr" part which is incorrect.
The direction of languages should be determined by the language, so that RTL languages like Arabic, Hebrew and Farsi are supported correctly.
It is better to do this globally rather than with custom CSS, because custom CSS could apply when the language is not RTL (for instance, when some paragraphs are in one langauge and others are in another).
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Hi NimrodYanai,
Thank you for bringing this to our attention, I will pass this info along to the devs!
Hi NimrodYanai!
Just wanted to follow up on this.
OP uses a CSS framework for its base CSS, and “direction” is one of the settings that the framework sets by default. The default value is “ltr”. So, we can override “direction”, but the default is “ltr”.
There are 4 options for “direction”: ltr, rtl, initial, inherit
We tried overriding “direction” with each of the 4 options.
“ltr” obviously didn’t have any issues, since it’s already the default.
The other 3 options caused unexpected issues with the layouts of the pages in the Campaigns.
Since changing “direction” to a different value caused unexpected changes, we’re going to leave it as the current “ltr” value to make sure we don’t mess up any Campaign styling that members have already done.
The direction of the text should be changed based on the text. I'm not sure this is something CSS can do natively, but I'm not an expert in CSS. Might require an actual javascript or some such.
I'll need to do some research, but this shouldn't be this difficult.
Looks like the standard approach would be to add CSS to the site to reverse the font direction, literally changing the ltr to rtl as you mentioned. What I'm not intuitively grasping then is how browsers in other languages know which direction to display the text, to me it seems like it's wholly browser independent and thus relies only on the CSS, which seems like it would be a pain to have to include it on every site that the font reads rtl.
Maybe the browser can do this automatically based on the language that the browser is set to use, but I can't test that since every language I know reads ltr and I'm not confidant that I'll be able to reverse the setting.
I do agree with you that it really should be based on the language itself, but that doesn't appear to be how it actually works. The exception to that is the HTTP Accept-Language header, sent by your browser to the website when it requests that the website contents be delivered to you, though to what extent that influences things I couldn't say.
From the research I just did it sounds like the standard approach, at least in websites with mixed language directions, would be to code the text to go one way and to embed the text that reads the other way in a custom class, then to just add the custom class and corresponding CSS to the main CSS repository for the site. I expect that doing it via javascript may prove more difficult, as that would require some way to allow the JS to recognize the text is supposed to read the other way, which boils down to the CSS approach but with more steps.
I also see evidence that using CSS to do this at all is kinda frowned upon for some reason, with the coding community preferring to do it via just the dir command in html. I have no idea why that's the case though, except maybe just to eliminate a line of CSS that could cause headaches later.GM of Stream of Kairos - 2025 Campaign of the Year
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
Need CSS Help? It may be covered here: Abersade's CSS Hub