Logical CSS: Padding And Margins In Multi-lingual Web-Apps

There are two modules of CSS properties — Logical and Physical. If you are working on a multi-lingual web-app, then logical CSS properties will come real handy.

Physical properties refer to the physical aspects of the viewports — height/width of the viewport.

On the other hand, logical CSS properties works according to the flow of content. The values of such properties change with the change of:

1. writing mode
2. text direction

The Need For Logical CSS

Consider this example of a button with an icon on the left. Sample button with an icon and a margin between the icon and button text is shown below.

All is good till we are dealing with languages that are left-to-right. With languages like Arabic/Hebrew, which are right-to-left, the button will look something like this (Button with language right-to-left):

Here, the icon has the margin on the wrong side. If you want to check, you can use the dir attribute for <p> tag to change the writing direction.

<button dir="rtl">  
    <svg></svg>  
    <span>Sample Button</span>  
</button>

To fix this, in addition to providing automatic support for internationalization, and creating a more robust front-end, we have CSS Logical Properties.

Defination

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.

- MDN Web Docs

The thing to note in the above detailed (also verbose) defination is: Logical properties define direction‐relative equivalents of their corresponding physical properties.

Some of the Logical CSS properties are:

1. margin-block
2. margin-block-start
3. margin-block-end
4. margin-inline
5. margin-inline-start
6. margin-inline-end

The above combination exists for padding too. To go through a complete list of these Logical CSS properties, explore here.

Physical CSS Properties: Rewind

If you are fimiliar with the workings and short-hands for margin and padding , then you know that the values go clockwise. For example:

margin: 1px 2px 3px 4px;

sets position 1, 2, 3 and 4 in clock-wise direction.

Clockswise positions to explain shorthands for margin and padding

Understanding The Basics Of Logical CSS Properties

For this, we’ll consider going over the 4 basic properties:

1. padding-inline and padding-block
2. margin-inline and margin-block

The margin and padding here are “flow relative” and not “direction relative”. This means, historically when we appliedmargin-top to a block, it added margin-top according to the physical aspect of the viewport — irrespective of the language direction/writing-mode. This causes an issue like:

But what should actually happen when the direction or writing-mode changes:

Understanding Block Flow

The block flow is the direction in which the next “block” element will be placed. For example, if there are two <div> tags, so where the adjacent <div> will be placed is determined by the block flow.

Understanding Inline Flow

The inline flow is the direction in which the next “inline” element will be placed. i.e. how the words flow in a sentence. For example, if there are two <span> tags, so where the adjacent <span> will be placed is determined by the inline flow.

With logical properties, margin-top becomes margin-block-start , irrespective of the writing mode or direction. This helps to create a more inclusive front-end and hence the block flow has appropriate margins.

Box Model for Logical CSS Properties

Image Credits: Box-model for logical CSS properties:

Smart readers must have accounted for similarities with inline as well:

text-align: right; becomes text-align:end

This helps us to align the text on the basis of “reading direction” and not to the physical right of the viewport.

For direction: ltr and text-align: end

For direction:rtl and and text-align: end

Support

The properties having a suffix of start and end (margin-block-start and margin-block-end) have strong compatibility and are a good choice for desktop and mobile both. But the properties which lack the suffix like margin-block and margin-inline are good for desktop but not for mobile.

You can explore CANIUSE.COM to check complete support.

Thanks for reading ❤

Want to connect?

Follow me on Twitter and LinkedIn or reach out in the comments below!