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!
The post How we made a portal for both left-to-right and right-to-left languages appeared first on Mavention.