{"id":5890,"date":"2025-05-16T15:24:11","date_gmt":"2025-05-16T20:24:11","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5890"},"modified":"2025-05-16T15:24:12","modified_gmt":"2025-05-16T20:24:12","slug":"to-flip-or-not-to-flip","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/to-flip-or-not-to-flip\/","title":{"rendered":"Is there a Correct Answer? Flipping Layouts When Google Translate Swaps between a Left-to-Right Language and a Right-to-Left Language"},"content":{"rendered":"\n

My personal website<\/a> was designed in English, because that’s the only language I speak. English is a left-to-right language (LTR). <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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<\/a> is up there, which is a website and Chrome Extension and, to some degree, automatic translation is just built into Chrome (and other browsers).<\/p>\n\n\n\n

So let’s say I translate my website from English to Arabic, a right-to-left language (RTL). Here’s what I get: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

Google Translate, aside from the text node translation, makes a few other changes that are notable here. What used to be:<\/p>\n\n\n

<html<\/span> lang<\/span>=\"en\"<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Becomes:<\/p>\n\n\n
<html<\/span> lang<\/span>=\"ar\"<\/span> class<\/span>=\"translated-rtl\"<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Those changes do not actually change the direction to RTL.<\/em> It could<\/em> have, like:<\/p>\n\n\n
<html<\/span> <\/span>\n<\/span><\/span>  lang<\/span>=\"ar\"<\/span> <\/span>\n<\/span><\/span>  class<\/span>=\"translated-rtl\"<\/span> <\/span>\n<\/span><\/span>  dir<\/span>=\"rtl\"<\/span><\/span>\n<\/span><\/mark>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Or it could have injected CSS like:<\/p>\n\n\n
.translated-rtl<\/span> {\n  direction<\/span>: rtl;\n}\n\n\/* or *\/<\/span>\n\n[lang=\"ar\"<\/span>]<\/span> {\n  direction<\/span>: rtl;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
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.<\/p>\n\n\n\n
\"\"
The whole layout flips.<\/figcaption><\/figure>\n\n\n\n
So the question is:<\/p>\n\n\n\n
Is that <\/strong>“better”?<\/strong><\/p>\n\n\n\n
Meaning: does it read better for native Arabic speakers? Does it generally feel<\/em> better or more native? Or is it worse, in that it’s unexpected or unnatural somehow? <\/p>\n\n\n\n
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.”<\/p>\n\n\n\n
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\u00eds told me<\/a>: <\/p>\n\n\n\n
\n
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.<\/p>\n\n\n\n
Arabic and Hebrew speaking power users often prefer to have a ltr-oriented layout, while some other groups prefer rtl-oriented layout.<\/p>\n<\/blockquote>\n\n\n\n
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<\/code> there, but they don’t do that either. <\/p>\n\n\n\n
If you land on “leave the layout alone, but flip the dir<\/code> 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:<\/p>\n\n\n
.translated-rtl<\/span> {\n  p, li, dt, dd, td, th, h1, h2, h3 {\n    direction<\/span>: rtl;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That feels a little \ud83d\ude2c 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.<\/p>\n\n\n\n
\n
There are somethings that work both ways. The sidebar can be on either side and it makes sense.<\/p>\n\n\n\n
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]<\/p>\n\n\n\n
On balance, I think yes, flipping has an overall better result.<\/p>\n<\/blockquote>\n\n\n\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Google Translate doesn’t change the `dir` of a site when translating from LTR to RTL… but you could.<\/p>\n","protected":false},"author":1,"featured_media":5908,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,31,53,347,348],"class_list":["post-5890","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-html","tag-layout","tag-logical-properties","tag-translation"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/ChatGPT-and-the-proliferation-of.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5890"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5890\/revisions"}],"predecessor-version":[{"id":5910,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5890\/revisions\/5910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5908"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A flipped layout can be preferable even here though, as Naman told me<\/a>:<\/p>\n\n\n\n
But let’s say you’re me<\/em> (perfect, handsome) and you’ve changed your muscle memory for writing a lot of CSS properties to using logical properties<\/a>. That is, stuff like padding-inline-start<\/code> instead of padding-left<\/code>, 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<\/code> on my<\/em> site, you get:<\/p>\n\n\n\n