Internationalization In CSS

Internationalization In CSS

Prepare your designs for an international audience.

Anil Verma's photo
Anil Verma
·Nov 28, 2021·

Subscribe to my newsletter and never miss my upcoming articles

Play this article

When we work with multilingual sites, we have to adjust our elements as per writing mode, directionality, and text orientation.

text-align —

In many languages, texts work from LTR(Left to Right) like in English, but in many languages, texts also work from RTL(Right to Left) like French. So if your application works in both languages, then you have to adjust your text alignment as per the language in which your application is running on the browser.

suppose we have added text-align: right; then for English Lang it will wotk correctly. but for French we have to apply text-align: left; for same Element. because English works as LTR and French works as RTL.

So using only 1 property which can work text-align: right; for LTR and text-align: left; for RTL. that will overcome line of code and customization as per lang.

So for maintaining this, css provides some text-alignment properties which should be used for multilingual sites.

## Dont

.alignRight{  
  text-align: right;  
}

.alignLeft{  
  text-align: left;  
}

## Do

.alignRight{  
  text-align: end;  
}

.alignLeft{  
  text-align: start;  
}

Margin(based on writing mode)

These properties correspond to the margin-top, margin-bottom, margin-left, and margin-right properties. The mapping depends on the element’s writing mode, direction, and text orientation.

Problem- when we change writing mode from vertical-lr to vertical-rl or vice versa, then these properties should work other way round. Ex margin-top should work as margin-bottom on change of writing mode. But for getting this behaviour we have to write CSS 2 times based on writing mode. But CSS also provides properties by which we have to write CSS only 1 time and on change of writing mode we don’t need any adjustment. it will automaticaly start behaving other way round.

#### Don’t

.`margin-top`{  
  `margin-top`: 10px;  
}

.`margin-bottom`{  
  ` margin-bottom`: 10px;  
}  
.`margin-left`{  
  `margin-left`: 10px;  
}

.`margin-right`{  
  `margin-right`: 10px;  
}

#### Do

.`margin-top`{  
  `margin-block-start`: 10px;  
}

.`margin-bottom`{  
  `margin-block-end`: 10px;  
}  
.`margin-left`{  
 `margin-inline-start`: 10px;  
}

.`margin-right`{  
  `margin-inline-end`: 10px;  
}

**vertical-lr** a mapping equal to

margin-block-start = margin-left  
margin-block-end = margin-right  
margin-inline-start = margin-top   
margin-inline-end = margin-bottom

**vertical-rl** a mapping equal to

margin-block-start = margin-right  
margin-block-end = margin-left  
margin-inline-start = margin-top   
margin-inline-end = margin-bottom

HTML lang attribute-

it is used to identify the language of text content on the web. This information helps search engines return language-specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation

#### Don’t

<html>

#### Do

<html lang="en">

Even more specific

<html lang="en-us">

Identify a linked document’s language

use "hreflang" attribute if linked page is in other langs

<a href="/path/to/german/version" hreflang="de">German version</a>

if the link text is also in other "lang" then define lang attribute too

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

Happy learning …👏👏👏

 
Share this