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

Vul je zoekopdracht in.