My personal website was designed in English, because that’s the only language I speak. English is a left-to-right language (LTR).
Anybody can translate the website though. There are a variety of site translation tools. I don’t have any data on popularity, but I gotta imagine Google Translate is up there, which is a website and Chrome Extension and, to some degree, automatic translation is just built into Chrome (and other browsers).
So let’s say I translate my website from English to Arabic, a right-to-left language (RTL). Here’s what I get:
It’s the exact same layout, it’s just the words are in Arabic now. Which is not terribly surprising, I guess? But even the alignments have stayed the same, so this RTL language is still being show in an LTR way.
Google Translate, aside from the text node translation, makes a few other changes that are notable here. What used to be:
<html lang="en">Code language: HTML, XML (xml)Becomes:
<html lang="ar" class="translated-rtl">Code language: HTML, XML (xml)Those changes do not actually change the direction to RTL. It could have, like:
<html
lang="ar"
class="translated-rtl"
dir="rtl"
>
Code language: HTML, XML (xml)Or it could have injected CSS like:
.translated-rtl {
direction: rtl;
}
/* or */
[lang="ar"] {
direction: rtl;
}Code language: CSS (css)But it doesn’t. I don’t know for sure, but my guess is that it intentionally doesn’t do that, because it jacks up more layouts than it helps.
But let’s say you’re me (perfect, handsome) and you’ve changed your muscle memory for writing a lot of CSS properties to using logical properties. That is, stuff like padding-inline-start instead of padding-left, and the like. That, plus using layout like flexbox and grid, will reflow naturally with direction changes. So if you change the direction to rtl on my site, you get:
So the question is:
Is that “better”?
Meaning: does it read better for native Arabic speakers? Does it generally feel better or more native? Or is it worse, in that it’s unexpected or unnatural somehow?
I have a friend who speaks/reads Arabic, just for one anecdotal bit of data. I showed them a site and translated it, and they were like “it’s fine”. But then I showed them a tweaked one where things like the header and hero text and stuff was actually flipped, and they thought it was better. They were like “I never actually see this done, but it’s better this way.”
It’s likely that this no One True Answer here. Even if you’ve done a good job with a layout that flips and looks sensible. Alda Vigdís told me:
As someone who has worked on bi-lingual content, dir=”rtl” should of course be indicated for textual content, but the layout question depends on a lot more factors.
Arabic and Hebrew speaking power users often prefer to have a ltr-oriented layout, while some other groups prefer rtl-oriented layout.
So it may just be a matter of preference of individuals, which is more evidence for why Google Translate doesn’t go there (for layout). Perhaps they should be trying to find more fine-grained text nodes and flipping the dir there, but they don’t do that either.
If you land on “leave the layout alone, but flip the dir for text”, like Alda suggests, it would be a bring-your-own-CSS situation. You could use Google Translate’s class and flip just the text you need to, like:
.translated-rtl {
p, li, dt, dd, td, th, h1, h2, h3 {
direction: rtl;
}
}Code language: CSS (css)That feels a little 😬 to me, like you’ll miss some and make it worse instead of better or something. (I just picked those selectors randomly quick, to illustrate.) So much testing needed.
A flipped layout can be preferable even here though, as Naman told me:
There are somethings that work both ways. The sidebar can be on either side and it makes sense.
But something like the search bar makes a lot more sense with the layout flipped. [Also: headings in the sidebar are also a lot better with the layout flipped]
On balance, I think yes, flipping has an overall better result.
So if you’re looking for a straight answer, I’m afraid I can’t give you one. Except, ya know, do a good job.
Ahmad Shadeed’s “RTL Styling 101” has some nuances:
https://rtlstyling.com/posts/rtl-styling/
Notably many icons are bidirectional and don’t need flipping, even if they’re asymmetrical.
I’ve always done a full layout flip with
dirattribute/selector and.translated-rtlclass. Anecdotally, feedback has been positive. For SVG icons I’ve selectively usedtransform: scaleX(-1)as a hack, praying I don’t need other transforms.Great advice.