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 dropdown list. This will change the languages of interface components like - header, site navigation, actions buttons, forms, action feedback messages etc.
Content pieces language - Users can see the content pieces ( like - cards of books, lessons & story etc) in any language irrespective of what they have opted from the language switcher drop-down. This content pieces are independent of the interface language selected and depends on the content they contain.
Key Considerations
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 the 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
Space
Text may scale or contract in different languages.
Urdu is the only Indian language which is RTL in direction.
Default language is English and hence default direction is LTR.
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 non-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 non-Urdu then that will be shown with that language-specific characteristics.
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)
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.