Use margin-inline-start CSS property instead of margin-left for better internationalization
Tags: css
Published: 2022-12-12 05:39:38

---
  title: Use margin-inline-start CSS property instead of margin-left for better internationalization
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:09:38 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/use-margin-inline-start-css-instead-of-margin-left-for-better-internationalization-support
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_83030686ca.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/use-margin-inline-start-css-instead-of-margin-left-for-better-internationalization-support)
  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

```html
<!-- 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,

![red color box with hello world text shown on webpage](/uploads/Screenshot_2022_10_29_at_12_37_53_PM_4650f6827a.png)

The HTML code will look like this,

```html
<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
<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,

![red color box where 30px margin is applied to its left side](/uploads/red_color_box_margin_left_applied_1a82d77514.png)

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,

```html
<!-- 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>
```

![red color box with text is shifted from left to right side of the webpage](/uploads/red_color_box_shifted_to_right_ec892309b7.png)

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,

```html
<!-- 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,

![red box with better internationalization support](/uploads/red_box_internatiolized_bafe669a23.png)

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](https://codesandbox.io/s/use-margin-inline-start-instead-margin-left-for-better-internationalization-css-e22ovw?file=/index.html).

That's all 😃!