In Blogs

Based on SharePoint Online and Mavention Hub we created a global portal for a customer.
After a while it became clear that the portal should not only be suitable for Left to Right (LTR) languages but for Right to Left (RTL) languages as well.

Our approach

  • Adjust the graphical designs to RTL based on common sense.
  • Send these designs to the RTL customer and let them judge and make changes.
  • After agreement on the graphical designs the coding can start.
  • We use a language file which contains all the available languages. We added an element “rtl” to it which can be true or false:
    { "englishname": "Hebrew (Israel)", "name": "עברית (ישראל)", "code": "he-IL", "rtl": true }
  • Based on this element we put a dir=”rtl” on the html tag (<html dir=”rtl”>) which does a lot of magic, it sets the default base direction of your page to right-to-left. So input fields and search boxes are aligned in the right to left way.
  • We use the following code for this:
    // Update the html tag of the page if RTL is needed
    var currentLang = languageService.getCurrentLanguage();
    document.documentElement.setAttribute('dir', languageService.isLanguageRtl(currentLang) ? 'rtl' : 'ltr');
  • What we miss now is all the custom styling made by CSS. The trick is to create a duplicate of your css-file(s) and name it something like css-rtl.css. Then simply walk through all the lines of CSS and adjust properties like float, margin-right, padding-left, etc. just the other way around.

Some examples:

html[dir="rtl"] body {
text-align: right !important;
font-family: Arial, Helvetica, sans-serif;
}

changes the overall alignment of the text. Best practice is to use a standard font-family instead of you customer custom font because it definitely is better readable.

@media (min-width: 768px) {
html[dir="rtl"] .col-sm-1,
…
html[dir="rtl"] .col-xs-10 {
float: right;
}
}

changes all the default Bootstrap columns to float right instead of left

html[dir="rtl"] .client-block {
margin-left: 0px;
margin-right: 10px;
}

swaps the margin from the left side to the right side of an element

It’s important to look at the results with your RTL-customer regularly because there are some exceptions which we left-to-righties simply do not know.
Happy right to left reading!

Laat uw reactie achter

Neem contact op

Stuur ons een mail en we nemen zsm contact op.

Vul je zoekopdracht in.