CSS Logical Properties

Table of Contents

1. Introduction
2. Physical vs Logical Properties in CSS
3. Block Flow and Inline Flow
4. Comparison of Logical and Physical Properties in CSS
5. Coming back to our icon issue
6. Conclusion

Introduction

You are working on a webpage and need to show it in two languages: English, which reads from left-to-right, and Urdu, which reads from right-to-left. For simplicity, let’s say you are working on this component:

As you can see, it is a simple component. A paragraph, within which there is some text and an SVG icon next to it. The icon has a margin-left: 0.5em, hence the space between the text and the icon.

Initially, the text-direction on the whole document (our page) is left-to-right. Let’s change the text direction of this component to right-to-left by adding a CSS attribute direction='rtl'. I have added another component just below it with the text in the paragraph translated to Urdu and added the CSS property direction='rtl' to it as well. By the way, when the direction is ltr, the text in Urdu is all messed up. I have also added a couple of radio buttons to make it easier to change the direction. Here is what it looks like:

Do you see the problem? Now, the icon sits just against the text without any spacing between them (because we do not have a margin-right property defined in our CSS!). Our margin-left: 0.5em only works correctly if the text direction is left-to-right.

How can we solve this problem with CSS? Logical properties to the rescue!

Physical vs Logical Properties in CSS

In CSS, the properties such as top, right, bottom, and left are referred as physical properties. These properties refer to the physical dimensions of the viewport. On the other hand, logical properties refer to the flow of content. They allow us to define direction-relative equivalents of their corresponding physical properties. This means that they can change if the text direction or writing mode changes.

Block Flow and Inline Flow

Logical properties and values use the terms “block” and “inline” to tell the direction in which the content flows. As compared to physical properties, the meaning of these terms depends on the writing mode.

Block flow refers to the direction in which block-level elements stack vertically. For example, when you add multiple paragraphs to a document that is written in English, each subsequent paragraph will be placed just under the previous paragraph. For a document in English, the block flow direction is top-to-bottom.

Inline flow refers to the direction in which inline-level elements stack horizontally. For example, when you have a sentence inside a paragraph (written in English), the flow of the text is left-to-right.

The flow of text is affected by using the writing-mode property of CSS. Here is an example:

Comparison of Logical and Physical Properties in CSS

Let’s now have a look how CSS logical properties look like as compared to their physical equivalents. We will look at margin, padding, sizing, positioning, and borders.

Margin and Padding

Let’s take an example of applying a padding-top property on an element. As we discussed earlier, the properties such as top, right, bottom, and left are applied based on the physical dimensions of a viewport. So we need to use a logical equivalents of our padding-top, so that it does not depend on the physical dimensions, but on the flow of content. Hence, we use the padding-block-start property. Here is an example:

Here is a table showing the physical properties and their equivalent logical properties.

Physical Property	Logical Property
padding-top	padding-block-start
padding-right	padding-inline-end
padding-bottom	padding-block-end
padding-left	padding-inline-start

Another interesting thing you can do with logical properties is that you can just set the top and bottom or just the left and right properties.

Physical Property	Logical Property
padding-top and padding-bottom	padding-block
padding-left and padding-right	padding-inline

The same goes for margin as well.

Sizing

Usually, we use the something like the following to set the width and height to an element:

.my-component {
	width: 400px;
	height: 200px;
}

With logical properties, this can be changed to:

.my-component {
	inline-size: 400px;
	block-size: 200px;
}

This also works for properties such as min-[property] and max-[property], as shown below:

Physical Property	Logical Property
min-width	min-inline-size
max-width	max-inline-size
min-height	min-block-size
max-height	max-block-size

Positioning

Logical properties related to the position property in CSS are as follows:

Physical Property	Logical Property
top	inset-block-start
right	inset-inline-end
bottom	inset-block-end
left	inset-inline-start
top and bottom	inset-block
left and right	inset-inline

Borders

CSS properties such as border and border-radius can also use logical properties:

Physical Property	Logical Property
border-top	border-block-start
border-right	border-inline-end
border-bottom	border-block-end
border-left	border-inline-start
border-top and border-bottom	border-block
border-left and border-right	border-inline

And for border-radius:

Physical Property	Logical Property
border-top-left-radius	border-start-start-radius
border-bottom-left-radius	border-end-start-radius
border-top-right-radius	border-start-end-radius
border-bottom-right-radius	border-end-end-radius

Here is an example of using logical properties for borders:

You can see how the border radius adjust itself based on the direction property of CSS.

Coming back to our icon issue

Now that you have learned about logical properties, solving the icon issue is pretty easy. We simply have to margin-inline-start instead of margin-left:

Conclusion

There you have it! We explored the concept of CSS logical properties and how they can help us create webpages that can adapt to different languages and writing modes. We saw how logical properties use the terms “block” and “inline” to refer to the direction of content flow, and how they can replace the physical properties such as top, right, bottom, and left. We also learned how to use logical properties for margin, padding, sizing, positioning, and borders, and how they can make our layout more responsive and accessible. I hope you have enjoyed this introduction to CSS logical properties and that you will give them a try in your next project. Now go and get logical with your CSS! Happy coding! 😀