Interface LTR to RTL alignment

Developer Support CMS Development
1

Hello everybody,

I have some pages with their navigation interface already set-up, and I’m trying to create a copy of it for multiple langauges. The original english pages are (appropriately) aligned Left-to-Right (i.e. logo in top-left corner, navigation bar on the left side, text aligned to the left, pictures to the right, etc). Thing is, my target language is Right-to-Left, and I was wondering if there’s an elegant way to “mirror” the existing interface, other than moving the elements manually, so that the items described in my previous example will be reversed (logo top-right, navigation bar on the right side etc…)

I Would appreciate any ideas or insights regarding this situation.

2

This is just a general idea. If you have the interface styled with flexbox (display: flex), you could use flex-direction: row-reverse to reverse the order. You would need a way of adding this only for non-English pages, so I would suggest adding a class in JS if the language is your target language e.g. the below. (I would add the direction css property to the class you would apply as well)

var language = document.getElementsByTagName('html')[0].getAttribute('lang');
var interface = document.getElementById('interface');

// using 'ar' for Arabic as example
if (language === 'ar') {
 interface.classList.add('rtl');
}

#interface {
 display: flex;
}
#interface.rtl {
 flex-direction: row-reverse;
}
.rtl {
 direction: rtl;
}

I don’t know how your navigation bar is set up, so harder to say what to do with that without a preview link. If it’s absolutely positioned, you could do similar to the above and just change the position to right instead of left based on class, added if the language is your target language e.g.

#nav-bar {
 position: absolute;
 left: 0;
 top: 0;
}
#nav-bar.rtl {
 right: 0;
 left: auto;
}