| Page Properties | ||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
- Direction / Mirroring Interface or content elements
- If the interface is RTL, everything will become RTL. Including contents which are in any other languages which are LTR in nature.
- If the interface is LTR but any content piece is Urdu (Eg - Card) then that particular card will become RTL while the interface and other content element will stay in LTR.
- Fonts family
- Noto Sans for English & Hindi
- Noto Tamil for Tamil
Noto Nastaliq for Urdu
- family for all languages.
- 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
...
Core concepts
Adding attribute dir="rtl" or dir="rtl" reverses the directionality provides information of directionality of the language and will help in applying directional CSS to the element.
- Adding attribute lang="**" is useful for the browser, Search engines and Web accessibility tools ( Screen reader to adopt accent of that language ) to understand the language of the content. Also this will help in solving language specific design issues as these can be used as a CSS selector in special cases.
From the performance perspective, all languages fonts should not be downloaded by default. A font file should be downloaded only if it is needed.All fonts to be applied at body tag and all other child element will inherit the fonts from their.
Implementation Details
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">.
- Based on the content an 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">
Why adding language related attributes to the html tag and the component wrapper is important
CSS Side Changes
- All language and directional CSS will be served from the single CSS file. i.e. style.css. No Separation of CSS files 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 so as to isolate them. Eg- [dir="ltr"] .mr-20{margin-right:20px;} and [dir="rtl"] .mr-20{margin-left:20px;}. Reference -
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 rather than assigning it to the body tag. Eg - [lang="ur"] {font-family: "Noto Nastaliq Urdu";}The correct way to assign fonts for multi-lingual. More details on - https://ui-demo.github.io/fonts2.html
Near future challenges -
Some Useful links -
- https://ui-demo.github.com/wooorm/francio/
- https://ui-demo.github.io/common/assamese.html
- dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/
https://developer.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/
- https://github.com/wooorm/franc
- https://w3c.github.io/i18n-tests/results/native-user-interfaces
- https://www.w3.org/International/questions/qa-html-dir#iedir
- https://www.w3.org/TR/html4/struct/dirlang.html
...