Is there a Correct Answer? Flipping Layouts When Google Translate Swaps between a Left-to-Right Language and a Right-to-Left Language
Is there a Correct Answer? Flipping Layouts When Google Translate Swaps between a Left-to-Right Language and a Right-to-Left Language êŽë š
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">
Becomes:
<html lang="ar" class="translated-rtl">
Those changes do not actually change the direction to RTL. It could have, like:
<html
lang="ar"
class="translated-rtl"
dir="rtl"
>
Or it could have injected CSS like:
.translated-rtl {
direction: rtl;
}
/* or */
[lang="ar"] {
direction: rtl;
}
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;
}
}
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.