Originally posted here!
On the world wide web (www) or the internet, we have our website visited by people from different countries and languages. Some of the languages are read from left to right (like English), and some from right to left (like Arabic). So when the direction of the language gets changed it is good for the website layout to change accordingly as well as a good user experience so that the website doesn't look bad.
To accommodate for the language intricacies, we have to make the website layout responsive in every language and its reading direction.
TL;DR
<!-- Changing language direction to `rtl` -->
<html lang="en" dir="rtl">
<body>
<div class="box">Hello World</div>
</body>
<!-- Style for the red color box -->
<!--
Adding a 30px margin to the start of the box
using an internationalization property
-->
<style>
.box {
width: 300px;
height: 300px;
background-color: red;
color: white;
margin-inline-start: 30px;
}
</style>
</html>
For example, suppose we have a layout with a red background color box that has a text called Hello World like this,
The HTML code will look like this,
<html lang="en" dir="ltr">
<body>
<div class="box">Hello World</div>
</body>
<!-- Style for the red color box -->
<style>
.box {
width: 300px;
height: 300px;
background-color: red;
color: white;
}
</style>
</html>
Now let's add a left margin of 30px like this,
<html lang="en" dir="ltr">
<body>
<div class="box">Hello World</div>
</body>
<!-- Style for the red color box -->
<!-- Adding a 30px left margin to the box -->
<style>
.box {
width: 300px;
height: 300px;
background-color: red;
color: white;
margin-left: 30px;
}
</style>
</html>
Now the webpage looks like this,
Have you noticed the dir="ltr" attribute on the main html tag in our HTML code? This refers to the language direction of the content on the webpage. the dir refers to the direction and the value ltr refers that the direction of the language from left to right (ltr). This is the default for languages like English. Now let's change the dir attribute's value to rtl which refers that the direction of the language from right to left.
It can be done like this,
<!-- Changing language direction to `rtl` -->
<html lang="en" dir="rtl">
<body>
<div class="box">Hello World</div>
</body>
<!-- Style for the red color box -->
<!-- Adding a 30px left margin to the box -->
<style>
.box {
width: 300px;
height: 300px;
background-color: red;
color: white;
margin-left: 30px;
}
</style>
</html>
As you can see that after changing the dir attribute's value from ltr to rtl, the whole box with the text is now shifted to the right side since the language direction is now changed.
Have you noticed something weird here?
You may have guessed that the margin-left of 30px is applied but is not taking effect to its right side after we changed the dir attribute. Well, we can't blame the browser since we have defined it specifically to be applied to the left side of the box. We now have a weird-looking website. This is huge and will break the website layout if our layout is more complex and large.
To accommodate for this problem of not switching the left margin when we change the language direction, we now have an internationalized version of the margin-left property which is the margin-inline-start.
Let's change replace the margin-left property with the new property of margin-inline-start in our HTML code like this,
<!-- Changing language direction to `rtl` -->
<html lang="en" dir="rtl">
<body>
<div class="box">Hello World</div>
</body>
<!-- Style for the red color box -->
<!--
Adding a 30px margin to the start of the box
using an internationalization property
-->
<style>
.box {
width: 300px;
height: 300px;
background-color: red;
color: white;
margin-inline-start: 30px;
}
</style>
</html>
The webpage now looks like this,
As you can see that the 30px margin is now applied to its right side and the layout is now correct automatically by changing the direction of the language.
We have successfully made our webpage layout look good using internationalization standards.
See the above code live in codesandbox.
That's all 😃!
Top comments (0)