Get the 2024 Yearly Goals and Progress Tracker Notion Template for FREE!

Guide to CSS logical properties

SERIES: The Deep Dives

Posted on: Aug 9, 2023

14 mins read

Originally published at blog.logrocket.com

Guide to CSS logical properties

CSS logical properties provide a powerful solution for web developers to create flexible and maintainable layouts that cater to different languages and writing directions. The early days of the internet focused heavily on document uploading and sharing, and so developers used to think only in terms of left and right, top and bottom.

Logical properties offer an alternative approach. By using logical, instead of physical, values, developers can build webpage layouts that adapt to the direction of the content, which is especially important for multi-directional websites. The use of CSS logical properties results in a better user experience, making them an essential tool for modern web development.

This article will delve into the world of CSS logical properties, discuss their unique characteristics compared to physical properties, and explore how they can be seamlessly integrated into existing projects.

What are CSS physical properties?

CSS physical properties are the traditional way of defining styles in CSS. These properties are based on the element's physical properties, such as width, height, and position. Some examples of CSS physical properties are: padding-top, margin-left, and border-right.

Physical properties are often referred to as "directional” properties because they are defined based on the element's default writing direction. CSS physical properties work well for languages read from left-to-right, such as most Western languages, but they can be challenging for those that read from right-to-left or other use another directional model.

This challenge is particularly true for multi-directional languages such as Arabic, Hebrew, and Mongolian, which require different layout rules. For instance, text is read from right-to-left in Arabic, meaning the padding, margin, and border properties must be adjusted accordingly. Similarly, text is written vertically in Mongolian, meaning the physical properties must be modified to accommodate this layout.

In the past, developers relied on cumbersome workarounds and hacks to ensure their web designs were displayed correctly in multi-directional languages. However, with the advent of CSS logical properties, it's now possible to design more flexible and responsive layouts, regardless of the direction in which the language is read.

What are CSS logical properties?

CSS logical properties specify the layout and styling of webpage elements using their directional, or logical, values instead of physical ones. This enables web developers to create layouts in relation to the writing mode of the document that are more flexible and easier to maintain, especially for websites that support multiple languages and writing directions.

For example, instead of using physical properties like margin-left and margin-right to position elements on a page, developers can use logical properties like margin-inline-start and margin-inline-end to position elements based on the direction of the text.

Understanding CSS physical properties is relatively straightforward since that is what we are used to. CSS logical properties can be a little harder to grasp at first. Allow me to break it down further for you.

Creating a web layout in relation to writing mode

CSS logical properties specify the layout and styling of webpage elements using their directional or logical values instead of physical ones. Directional values refer to the start and endpoints of a block of text's direction, while logical values refer to the content's natural progression.

In left-to-right writing modes, like English, the start point is the left side and the end point is the right side. In right-to-left writing modes, like Arabic, the start point is the right side and the end point is the left side.

Writing modes refer to the orientation of the text on the webpage. This includes horizontal writing modes like left-to-right (used for languages like English, French, and Spanish), right-to-left (used for languages like Arabic, Hebrew, and Persian), and vertical writing modes like top-to-bottom (used for languages like Chinese, Japanese, and Korean) and bottom-to-top (used for languages like Mongolian).

Websites that support multiple languages and writing directions often need to adjust their layouts based on the writing mode of the content. By using logical properties instead of physical ones, web developers can create layouts that accommodate the document's writing mode but are more flexible and easier to maintain.

Instead of using physical properties like padding-top and padding-bottom to position elements on a page, developers can use logical properties like padding-block-start and padding-block-end to position elements based on the direction of the text. This approach improves user experience, regardless of language or writing direction.

CSS logical properties and corresponding physical properties

Each of the four CSS logical properties has a corresponding physical property, which is used interchangeably depending on the writing mode of the document:

  • block-start: top or bottom
  • block-end: bottom or top
  • inline-start: left or right
  • inline-end: right or left

CSS logical properties and corresponding physical properties

CSS logical properties and corresponding physical properties

CSS logical properties have two main axes: the block axis (representing the vertical direction) and the inline axis (representing the horizontal direction). The writing mode of the document determines these axes.

The logical properties of languages with a left-to-right writing mode follow the same pattern as the physical properties. The inline axis is horizontal, starting from the left and moving toward the right. The block axis is vertical, starting from the top and moving toward the bottom. In this case, the logical properties work the same way as their physical counterparts, and there is no need for any special consideration.

For languages written from right-to-left, such as Arabic and Hebrew, the inline axis is reversed, meaning that elements are laid out from right-to-left. This affects the positioning of elements such as text, images, and other content. For example, a left-aligned block of text in an English document would be right-aligned in an Arabic document. But, the inline axis remains horizontal, and the block axis remains vertical.

Similarly, for languages written from top-to-bottom, such as Chinese, Japanese, and Korean, the block axis is rotated 90deg clockwise, with the top of the elements right-aligned. This means that the layout of elements differs from that of left-to-right languages, with text and other content arranged vertically rather than horizontally.

Here is some further explanation to help further clarify which logical property corresponds to which axis:

block: refers to the direction in which text flows in a block of content (e.g., English flows top-to-bottom) — this can also be associated with the content's height. Logical properties that affect an element's top and bottom edges are related to the block axis

inline: refers to the direction in which text flows in a line of content (e.g., English flows left-to-right) — this can also be associated with the content's width. Logical properties that affect an element's left and right edges are related to the inline axis

Here are a few examples of the block and inline axes:

Examples of block and inline axes in css logic properties

Examples of the block and inline axes

For example, block-start specifies the starting edge of an element in the block axis (i.e., vertical for horizontal writing modes, horizontal for vertical writing modes), which is usually the top edge in horizontal writing modes and the leading edge in vertical writing modes.

On the other hand, block-end specifies an element's ending edge in the block axis, which is usually the bottom edge in horizontal writing modes and the trailing edge in vertical writing modes.

Similarly, inline-start specifies the starting edge of an element in the inline axis (i.e., horizontal for horizontal writing modes and vertical for vertical writing modes), which is usually the left edge in horizontal writing modes and the leading edge in vertical writing modes.

inline-end specifies the ending edge of an element in the inline axis, which is usually the right edge in horizontal writing modes and the trailing edge in vertical writing modes.

To further explain this example, let's say you have a website that supports both left-to-right and right-to-left languages. In left-to-right languages, like English, the text flows from left-to-right, so the inline axis is horizontal, and the logical property for the left edge is inline-start.

In contrast, the logical property for the right edge is inline-end. In right-to-left languages, like Arabic, the text flows from right-to-left, so the inline axis is still horizontal. However, the CSS logical property for the left edge is inline-end, and the logical property for the right edge is inline-start.

Similarly, the block axis in horizontal writing modes corresponds to the logical properties block-start for the top edge and block-end for the bottom edge. In contrast, in vertical writing modes, the block axis corresponds to block-start for the leading edge and block-end for the trailing edge.

Understanding the relationship between the axes and the logical properties allows you to position and style elements on a web page more efficiently, regardless of the writing mode or language direction.

Mapping CSS physical properties to logical properties

Mapping physical properties to logical properties is essential when developing websites or applications that support different writing modes. The following table shows how to map some common CSS physical properties to their corresponding CSS logical properties:

CSS physical propertyCSS logical property
margin-topmargin-block-start
margin-rightmargin-inline-end
margin-bottommargin-block-end
margin-leftmargin-inline-start
padding-toppadding-block-start
padding-rightpadding-inline-end
padding-bottompadding-block-end
padding-leftpadding-inline-start
border-topborder-block-start
border-rightborder-inline-end
border-bottomborder-block-end
border-leftborder-inline-start

Here is an example of two text blocks using logical properties:

html
<p class="border-block">border-block</p>
<p class="border-inline">border-inline</p>
css
p {
padding-inline: 20px;
padding-block: 30px;
}
.border-block {
border-block: 10px solid tomato;
}
.border-inline {
border-inline: 10px solid tomato;
}

Example of two text blocks using logical properties

Example of two text blocks using logical properties

As you can see from the table, the pattern is to replace the directional keyword in the physical property with its logical equivalent. For example, margin-top becomes margin-block-start, and margin-left becomes margin-inline-start. View all CSS logical properties here.

Mapping physical properties to logical properties allows for easier code maintenance and consistency across different writing modes. Developers can use logical properties to create more flexible and adaptable layouts that work well in left-to-right and right-to-left languages.

Why use CSS logical properties?

Developers can leverage logical properties to create layouts that are independent of text direction and can be adapted to different devices and screen sizes. This results in a more responsive and user-friendly website or application.

Logical properties offer several advantages, making them a valuable tool for web developers. Let's explore some of those benefits in more detail and look at examples demonstrating how logical properties can be used to improve the design and functionality of a website or application.

Flexibility

Logical properties can be used to create flexible layouts that work well in left-to-right and right-to-left languages. For example, to design a website that supports both English (left-to-right) and Arabic (right-to-left), we can use logical properties like margin-inline-start and margin-inline-end, instead of physical properties like margin-left and margin-right, to position elements on the page. This approach improves maintainability and helps ensure a consistent layout across different languages.

Readability

CSS logical properties can be used to make code more readable and easier to understand. For example, instead of using physical properties like width and height to set the size of elements, we can use logical properties like inline-size and block-size based on the direction of the content. This makes it easier for developers to understand the code and make changes when necessary.

Adaptability

Logical properties can be used to create responsive designs that adapt to different screen sizes and devices. For example, we can use logical properties like min-inline-size and max-block-size to adjust the size of elements based on available space. This ensures that the website or application is user-friendly on different devices and screen sizes.

Consistency

Logical properties can be used to ensure consistency across different languages and writing directions. For example, we can use logical properties like border-start and border-end, instead of physical properties like border-left and border-right, to create consistent borders on different sides of an element. This ensures the website or application has a consistent design across different languages and writing directions.

Many popular websites use logical properties to make their designs more flexible and adaptable across different languages and writing directions. Here are a few examples:

  • Wikipedia: This crowdsourced encyclopedia is available in several languages. The site uses CSS logical properties to ensure that its layout adapts to the writing direction of each language. For example, the Arabic version of Wikipedia is written from right-to-left, while the Chinese version is written from top-to-bottom
  • United Nations: This international organization's website supports multiple languages, including Arabic and Hebrew, which are written from right-to-left. The website uses CSS logical properties to ensure the layout and design are consistent across all languages and writing directions
  • BBC: This news website is available in multiple languages and writing directions. The website uses CSS logical properties to ensure consistency in layout for users, regardless of language or writing direction
  • Al Jazeera: This news website that supports Arabic and English. It uses CSS logical properties to switch between the two writing modes, depending on the language of the content
  • Amazon: This digital marketplace is available in many countries, each with its own language and writing direction. The website uses CSS logical properties to ensure that the layout adapts to the writing direction of each language. For example, the Japanese version of Amazon is written from top-to-bottom, while the English version is written from left-to-right
  • Facebook: This social media platform is also available in many languages, each with its writing direction. To ensure that the platform's layout adapts seamlessly to each language's writing direction, Facebook employs CSS logical properties

Browser support

Browser support for CSS logical properties is steadily improving. As of this writing, all major modern browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, and Opera, support logical properties to varying degrees. View detailed browser support of CSS logical properties here.

It's important to note that older browsers, particularly Internet Explorer 11 and below, do not support CSS logical properties. Developers may need to use fallbacks for these browsers to ensure that their websites and applications are still functional. Overall, it's best to check for browser support before using logical properties and to provide fallbacks for unsupported browsers to ensure a consistent user experience.

Wrapping up

CSS logical properties provide a powerful solution for creating flexible and maintainable layouts that cater to different languages and writing directions. By using logical values instead of physical ones, developers can ensure that their layouts adapt to the direction of the content, resulting in a better user experience for all users, regardless of language or writing direction.

Understanding and using CSS logical properties is an essential skill for modern web development, especially for websites that support multiple languages and writing directions. I hope this article provided you with a comprehensive understanding of how to leverage these properties to enhance the flexibility and responsiveness of your web design and create websites that are accessible and easy-to-use for everyone.

Connect With Me

Follow me on X(Twitter), and LinkedIn to stay updated with my latest content.

If you like my notes and want to support me, you can sponsor me on GitHub Sponsor, or you can buy me a virtual ice cream on ByMeACoffee or Selar. I would really appreciate it. 🙏

For other ways to support me, visit my Sponsorship page or Affiliate Links page.

Frequently Asked Questions

1. What are CSS Logical Properties?

CSS Logical Properties are a set of properties in Cascading Style Sheets (CSS) that allow you to control layout and styling in a way that is independent of the user's language or writing mode. They provide a way to design web content that is more flexible and adaptable for different languages and text directions.

2. Why are Logical Properties important in CSS?

Logical Properties are important because they enable web designers and developers to create layouts and designs that work well for both left-to-right (LTR) and right-to-left (RTL) languages. This is crucial for building globally accessible and responsive websites.

3. What are some examples of CSS Logical Properties?

Some examples of CSS Logical Properties include margin-inline-start, padding-block-end, border-block-start-color, and text-align-last. These properties replace their traditional directional counterparts like margin-left, padding-top, border-top-color, and text-align.

4. How do Logical Properties differ from Physical Properties in CSS?

Logical Properties refer to the flow of content, which can change depending on the language and writing mode. In contrast, Physical Properties are based on the physical layout of the page. Logical Properties are more adaptable to different contexts, while Physical Properties are fixed to the page's physical dimensions.

5. Can I use Logical Properties in all modern web browsers?

Most modern web browsers support CSS Logical Properties. However, the level of support may vary slightly between browsers and might require appropriate CSS prefixes or flags for some properties. It's essential to check compatibility and use appropriate fallbacks for older browsers.

6. Are Logical Properties only useful for multilingual websites?

While Logical Properties are particularly valuable for multilingual websites, they can also benefit any website that aims to provide more flexible and adaptable layouts. They help ensure that designs work well for various text directions and orientations.

7. How do I transition from using Physical Properties to Logical Properties in my CSS code?

Transitioning to Logical Properties typically involves replacing physical property names (e.g., margin-left) with their logical counterparts (e.g., margin-inline-start) in your CSS code. You may also need to update your CSS architecture and consider the implications for responsive design.

Subscribe to my newsletter 💌

Never miss a beat! Stay updated with my latest tech tutorials, code snippets, how-to guides, productivity tips, personal projects and experiences, and more! 💻📚✨