CSS Directional Properties vs Logical Properties

For a lot of people, responsive web design means "make this website look good regardless of the device it's being displayed on". It's true, but responsiveness means much more than just the fact that our content can fit to the user's screen size.

One subject to keep in mind is Internalization. Let's take a look at that definition from w3.org :

"If you internationalize, you design or develop your content, application, specification, and so on, in a way that ensures it will work well for, or can be easily adapted for, users from any culture, region, or language."
source: Internationalization - W3C

So, when we want to internationalize a web app, besides translations, we also need to ask: "what will happen in the day that the direction of the text will be the opposite of the current direction?"

You might develop your web app for the LTR languages, but then the business decides to enter a market which it's language direction is RTL. In those cases, it's really important to know the difference between CSS Directional Properties, and CSS Logical Properties.

CSS Directional Properties

As the name suggests - CSS Directional properties are based on direction. We all use them daily: top, right, bottom, left. If we want our div to have a margin on its right side, we will use margin-right, and yay, problem solved.

The problem with that approach is that if we change the direction of the page, let's say from LTR to RTL, the page direction changes from one side to the other, but the margin on the div did not move to the other side.

CSS Logical Properties

In simple terms, logical properties are properties that are linked to the flow of text, or the document, and not to a static direction. We don't use top, bottom, left, and right, but instead - we use more fluent terms, like start and end, which allows us to have more flexibility with our layouts.

Let's look at an example:

// HMTL
<body>
  <div class="content">
    <h1>This is the title</h1>
    <p>This is the content</p>
  </div>
</body>
// CSS
body{
  direction: ltr;
}
.content{
  border: 1px solid black;
  width: 400px;
}
h1, p{
  margin-left: 1.5rem;
}

Now let's see how we do the same thing with logical properties.

h1, p{
  margin-inline-start: 1.5rem;
}

The difference is that now our content will know to have margin from the start of the natural direction flow of the page, and not statically choose left or right.

You can see this difference in the next pen. Check what happens when you change the direction of the body from ltr to rtl(click on edit in the top-right corner):

The next steps

Moving to CSS logical properties can be a bit tricky for those who are used to directional properties. For all of you that want to dig deeper into this subject, I would suggest checking out the MDN guide about CSS logical properties

Blog

CSS Directional Properties vs Logical Properties

Yair Mishnayot

CSS Directional Properties

CSS Logical Properties

The next steps

Join Our Newsletter. No Spam, Only the good stuff.

Related