withastro
RTL handling on fallback pages
📝 Issue Description
I don't speak Arabic, but while reviewing #12769 I noticed we might have a layout issue because we are mixing English and Arabic and the text doesn't seem to wrap correctly.
📋 On which page(s) it occurs
https://docs.astro.build/ar/guides/deploy/
🤔 Expected Behavior
I assumed this may be due to the use of lang="en" dir="ltr" on main, as this is a fallback page... So, I added dir="rtl" to CardsNav (in the browser, using the PR Preview):
Now, the layout seems correct for an RTL reader, but I don't know if this fixes everything. I would expect "SSR" to be at the end but I don't speak Arabic so maybe this is how it works. I tried to update a CodePen example from RTL Styling 101 using the same string and "SSR" is at the same position. So, this is probably fine!
👀 Current Behavior
Here's a table comparing our Deploy guides overview in Arabic between the live website and the PR preview, using different window sizes:
| Desktop width | Resized | |
|---|---|---|
| Live | ||
| PR Preview |
As reference, the "On demand" tag is translated with SSR التصيير على الخادم in Arabic. The words order seems wrong in the screenshots when the text wraps.
🖥️ Browser
Firefox v145.0.1, Chromium v142.0.7444.175
📄 Additional Information
A solution could be to conditionally add dir="rtl" to CardsNav by checking if this is a fallback page (isFallback()) and if Astro.currentLocale is an RTL language?
I think this issue only occurs in the Deploy Guides overview but maybe a similar issue exists elsewhere? If so, it might be worth checking every components that uses translated UI strings.
I didn't sent a fix because a confirmation from someone speaking Arabic (or at least familiar with RTL styling) could be useful, and this could be a good first issue.
Oof bidi strikes again. I think “SSR” should be at the end of the phrase (i.e. leftmost) based on my rudimentary Arabic, or it could be omitted potentially. “التصيير على الخادم” already means “server rendering”, so I think the intention may have been to include “SSR” as an additional alternative reference to the commonly known English acronym. But we now use “On demand” in English, so it may need entirely updating as a translation ideally.
Yes, this hasn't been updated since we changed the label to "On Demand" (well, I think by checking quickly Lunaria... IIRC, this was updated in v5).
Oh okay, I came across "bidi" while reviewing but, because I'm not used to RTL, I didn't tried to wrap the whole string with <bdi>. This seems to fix the order (in CodePen)! Thanks for confirming there is something wrong with the order!
But, then, this seems a bit hard to implement here... So, yeah I agree, I think the best we can do is to update the translation (and the direction in the component?).
But, then, this seems a bit hard to implement here... So, yeah I agree, I think the best we can do is to update the translation (and the direction in the component?).
That would be best. I guess in the component we can use Starlight’s i18n APIs to decide on direction, i.e. use t.exists() to check if a translation exists, and if so, use t.dir() to get the translation’s direction.