| Page Properties | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
- 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 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
...
(Click on image to view it in full screen)
Technicals
Core concepts
Adding
langattribute dir="rtl"
attributereverses
the directionalitythe 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. 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 language xml <body class=”en-GB ltr”>
HTML tag will contain lang and direction attribute ltr. Eg -
Code Block language xml <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.
Code Block language xml <div lang="ur" dir="rtl" class="ur rtl">
- Based on the language selected,
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