Versions Compared

Old Version 43

changes.mady.by.user Lakhan Mandloi

Saved on

compared with

New Version Current

changes.mady.by.user Lakhan Mandloi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Page Properties


Document status
Status
colourRedGreen
titleIn ProgressCompleted
Document ownerLakhan Mandloi
DevelopersLakhan Mandloi & Raghavendra VAman Kumar Sharma
Related JIRA cards
  • Jira Legacy
    serverSystem JIRA
    serverId2207a759-5bc8-39c5-9cd2-aa9ccc1f65dd
    keySB-7368
     
  • Jira Legacy
    serverSystem JIRA
    serverId2207a759-5bc8-39c5-9cd2-aa9ccc1f65dd
    keySB-6159
  • Jira Legacy
    serverSystem JIRA
    serverId2207a759-5bc8-39c5-9cd2-aa9ccc1f65dd
    keySB-8498


Background

As more states/tenants are coming on-board, user interfaces may need needs to be translated as per the requirements.

Basic Assumptions

  • English is the default language and hence default direction is reading direction is left-to-right ( LTR ).
  • Urdu is the only language (in Scope) which is right-to-left ( RTL ) in direction.
  • A page may contain multiple languages content. Eg - A student may see English and any Indian language learning content as a part of their curriculum. 
  • Each language has 2 technical attributes - Font-family and directionality.
  • A term in one language could vary in length in any other language translation.
  • Current scope only Indian languages, timezone, measurements and currency etc

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.

Basic Assumptions

  • Default language is English and hence default direction is LTR.
  • Urdu is the only Indian language which is RTL in direction.

Expected

...

Output

  • 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

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

Core concepts

  • Adding

    lang

    attribute dir="rtl" or dir="rtl"

    attribute 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. 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
    languagexml
    <body class=”en-GB ltr”>

    HTML tag will contain lang and direction attribute ltr. Eg -

    Code Block
    languagexml
    <html

  •  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">

  • . 

    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
    languagexml
     <div lang="ur" dir="rtl" class="ur rtl">
    Based on the language selected, 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)
  • 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 -

Brainstroming font issues

Some Useful links -