Prepare your designs for an international audience. When we work with we have to adjust our elements as per multilingual sites, writing mode, directionality, and text orientation. text-align — In many languages, texts work from like in English, but in many languages, texts also work from 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. LTR(Left to Right) RTL(Right to Left) suppose we have added then for English Lang, it will work correctly. but for French we have to apply ; for the same Element. because English works as and French works as . text-align: right; text-align: left LTR RTL So using only 1 property that can work for LTR and for RTL. that will overcome the line of code and customization as per lang. text-align: right; text-align: left; So for maintaining this, CSS provides some text-alignment properties which should be used for multilingual sites. Don’t .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 properties. The mapping depends on the element’s writing mode, direction, and text orientation. margin-top, margin-bottom, margin-left, and margin-right - when we change writing mode from to vice versa, then these properties should work another way round. Ex should work as on change of writing mode. Problem vertical-lr vertical-rl or margin-top margin-bottom But to get this behavior 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 automatically start behaving another 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;
} a mapping equal to vertical-lr margin-block-start = margin-left
margin-block-end = margin-right
margin-inline-start = margin-top 
margin-inline-end = margin-bottom a mapping equal to vertical-rl 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 …👏👏👏

The Biggest Features in ES2020/ES2021

Website

Nominated for 2022 - HackerNoon Contributor of the Year - Flutter

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - News

Too Long; Didn't Read

Make resilience your competitive advantage

Internationalization in CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular v14's New Features

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Angular v14's New Features

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps