Use margin-inline-end CSS property instead of margin-right for better internationalization support
Tags: css
Published: 2022-12-12 05:39:08

---
  title: Use margin-inline-end CSS property instead of margin-right for better internationalization support
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:09:08 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/use-margin-inline-end-css-property-instead-of-margin-right-for-better-internationalization-support
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_86169c570b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/use-margin-inline-end-css-property-instead-of-margin-right-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-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!--
    Using `margin-inline-end` instead of `margin-right` 
    for better internationalization
  -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-inline-end: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>
```

For example, suppose we have a layout with two `red` background color boxes side by side that has the text called `Hello World 1` on the first box and `Hello World 2` on the second box like this,

![red color boxes with hello world 1 text shown on the first box and hello world 2 on the second box on the webpage](/uploads/Screenshot_2022_11_06_at_12_05_36_AM_89993c004e.png)

The HTML code will look like this,

```html
<html lang="en" dir="ltr">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>
```

Now let's add a right margin of `30px` to the first box like this,

```html
<html lang="en" dir="ltr">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!-- Adding 30px right margin to the first box -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-right: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>
```

Now the webpage looks like this,

![red color boxes where 30px margin is applied to the first box's left side](/uploads/Screenshot_2022_11_06_at_12_10_20_AM_e1b671c248.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-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!-- Adding 30px right margin to the first box -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-right: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>
```

![red color boxes with text is now shifted from left to right side of the webpage](/uploads/Screenshot_2022_11_06_at_12_14_41_AM_fcbdb62a18.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-right` of `30px` is applied but is not taking effect between the boxes like we needed after we changed the `dir` attribute.

Well, we can't blame the browser since we have defined it specifically to be applied to the right side of the box, and it is getting applied to the right side of the last box. (Since the direction is now from right to left, the first box on the end of the screen) Because of this, 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 right margin when we change the language direction, we now have an internationalized version of the `margin-right` property which is the `margin-inline-end`.

Let's replace the `margin-right` property in the `box-1` box class name with the new property of `margin-inline-end` in our HTML code like this,

```html
<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!--
    Using `margin-inline-end` instead of `margin-right` 
    for better internationalization
  -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-inline-end: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>
```

The webpage now looks like this,

![red boxes with better internationalization support](/uploads/Screenshot_2022_11_06_at_12_33_23_AM_1574fad80c.png)

As you can see that the `30px` margin is now applied to its left side and the layout is now automatically corrected by changing the direction of the language. This will make our website more responsive and internationalized when the `dir` changes from `ltr` or `rtl`.

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-end-css-property-instead-of-margin-right-for-better-internationalization-support-g7hbq3?file=/index.html).

That's all 😃!