| Page Properties | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
As more states/tenants are coming on-board, user interfaces may need to be translated as per the requirements.
Basic Assumptions
- English is the default language and hence default direction is LTR.
- Urdu is the only language (In Scope) which is RTL in direction.
- A page may contain multiple languages content. Eg - A student may see English and any Indian language as a part of their curriculum.
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, filters 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.
...
- Default language is English and hence default direction is LTR.
- Urdu is the only Indian language which is RTL in direction.
- A page may contain multiple languages content. Eg - A student may see English and any Indian language as a part of their curriculum.
...
Expected Output
- 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
...
Adding attribute dir="rtl" reverses the directionality of the element. ( Some properties which do not have any impact of lang attribute and hence should be avoided Eg - text-align, float, left and right properties. )
A font file is downloaded only if it is used anywhere in the HTML.- Adding attribute lang="**" is useful for the browser, Search engines and Web accessibility tools.
A font file should be downloaded based on the need basis. All fonts should not be downloaded by default from the performance perspective. Better explanation - https://ui-demo.github.io/fonts2.html
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 -
| Code Block | ||
|---|---|---|
| ||
<body class=”en-GB ltr”> |
HTML tag will contain lang and direction attribute ltr. Eg -
...
| language | xml |
|---|
...
HTML Side changes
Based on the user opted language for the interface, HTML tag must contain lang and dir attribute. If the user has not opted any language, English will be the default. 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.
Based on the language selected, Based on the content a content element loads, the content element should have lang and dir attributes. Eg - If a card contains the Urdu content - <app-card lang="ur" dir="rtl">Code Block language xml <div lang="ur" dir="rtl" class="ur rtl">
CSS Side Changes
- All language and directional CSS will be served from the single CSS file. i.e. style.css. No Separation of CSS based on directionality or Language. Performance related concerns/challenges can be handled in effective ways.
- Directional Challenges (Avoiding duplicate codes)
- Some properties which break the inherited directionality of element should be avoided as much as possible such as - text-align, float, left and right properties etc. Eg - an element with CSS property text-align: left will not change directionality to right on changing HTML dir="rtl" hence should be avoided.
- Directionality breaking CSS properties should be replaced with the reusable classes. Eg - mr-20 will add margin-right 20px in ltr but in rtl it will add margin-left 20px. Directional properties will be nested with the directional attribute. Eg- *[dir=ltr] .mr-20{margin-right:20px;} and *[dir=rtl] .mr-20{margin-left:20px;}.
- Multi-font Challenges (Avoid downloading font files if language not used on the page)
- Language special CSS will be written with nesting to language attribute selector *[lang=ur]
- More details on - https://ui-demo.github.io/fonts2.html
Some Useful links -
- https://w3c.github.io/i18n-tests/results/native-user-interfaces
- https://www.w3.org/International/questions/qa-html-dir#ie
https://www.w3.org/TR/html4/struct/dirlang.html
...