Background
As more states/tenants are coming on-board, user interfaces may need to be translated as per the requirements.
Terminology used
- Interface language - Users can opt to any language from the language switcher drop-down. This will change the languages of interface components like - header, site navigation, actions buttons, forms, action feedback messages etc.
- Content pieces language - Content pieces such as lessons, stories etc are independent of the interface language. They only depend on the content they contain.
Basic Assumptions
- Default language is English and hence default direction is LTR.
- Urdu is the only Indian language which is RTL in direction.
Expected Results
- Direction / Mirroring Interface or content elements
- If the interface is RTL, everything will become RTL.
- If the interface is LTR but any content piece is Urdu (Eg - Card) then that particular card will become RTL while the interface will stay in LTR.
- Fonts family
- Noto Sans for English & Hindi
- Noto Tamil for Tamil
Noto Nastaliq for Urdu
- Font sizes
Noto Tamil will be 2 points smaller than the English font size.
- Link underline
- Links in Urdu will have the line at the top
Explanation with examples
English Interface
- Since the user has opted to English language, then the entire interface will be LTR and in English.
- If any of the content pieces are not English then that will be shown with that language-specific characteristics.
- English content pieces - content pieces will be shown in LTR direction.
- Tamil content pieces - content pieces will be shown in LTR direction with font size 2 points smaller than English font.
- Urdu content pieces - content pieces will be shown in RTL direction.
Urdu Interface
- Since the user has opted to Urdu language, then the entire interface will be RTL and in Urdu.
- If any of the content pieces are not Urdu then that will be shown with that language-specific characteristic except directions.
- English content pieces - content pieces will be shown in RTL direction (UX - from readability perspective).
- Tamil content pieces - content pieces will be shown in RTL direction with font size 2 points smaller than English font.
- Urdu content pieces - content pieces will be shown in RTL direction.
(Click on image to view it in full screen)
Technicals
Implementation Details
- English is the default language hence the following things will happen -
- style.css will be loaded by default. This file will contain CSS code for the English language.
Body tag will contain language class & direction class. Eg -
<body class=”en-GB ltr”>
HTML tag will contain lang and direction attribute ltr. Eg -
<html lang="en-GB" dir="ltr">
- If the user interface is English, and it contains a content piece which is not in English then the following things will happen -
Content piece element will be adding attribute and classes based on the language it contains.
<div lang="ur" dir="rtl" class="ur rtl">
- Based on the language selected,