CSS Logical Properties
If you are a web developer, you might have encountered situations where you need to design a webpage that can adapt to different languages and writing modes. For example, how do you make sure that your layout works well for both left-to-right and right-to-left languages? In this blog post, I will introduce you to CSS logical properties, a powerful feature that allows you to define styles based on the flow of content rather than the physical dimensions of the viewport. You will learn how to use logical properties for margin, padding, sizing, positioning, and borders, and how they can make your webpage more responsive and accessible.
Table of Contents
- Physical vs Logical Properties in CSS
- Block Flow and Inline Flow
- Comparison of Logical and Physical Properties in CSS
- Coming back to our icon issue
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
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!
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.
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:
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.
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.
The same goes for margin as well.
Usually, we use the something like the following to set the width and height to an element:
With logical properties, this can be changed to:
This also works for properties such as min-[property] and max-[property], as shown below:
Logical properties related to the
position property in CSS are as follows:
CSS properties such as
border-radius can also use logical properties:
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.
Now that you have learned about logical properties, solving the icon issue is pretty easy. We simply have to
margin-inline-start instead of
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! 😀