New CSS Logical Properties!

The Next Step of CSS Evolution

Intro

Most of us developers used to think in terms of left and right, top and bottom. This is because in the early days of the internet, it was meant mostly for uploading documents, and not for the complex website structures we know today.

This is the reason that no one considered the needs of multiple language websites.

Until recently, the best way to support multiple direction websites like RTL/LTR Websites was with SASS and SASS variables.

(if you want to learn more, you can read my article “The Best Way to RTL Websites with SASS!”).

These new logical properties give us a lot more power to control our websites, no matter what type of language we use (English, Arabic, Japanese, etc.), with minimal style changes.

Now let’s get started!

The way of thinking in CSS Logical Properties

When discussing the Box-model, we were all used to this images such as this one to explain it:

Box-Model Physical Properties (Old Method)

It was correct then, and it still is, but these may be the last days of the classic physical properties, such as margin-left , padding-right , border-top and so on.

Before you start using the new logical properties, you need to stop thinking in terms of left/right or top/bottom, and replace them with inline-start/inline-end and block-start/block-end.

Logical Properties (New Method)

Inline axis

Let’s take for example the English language. The reading direction starts on the left side and ends on the right. This is the inline aspect of the properties. It can be very easy to remember when considering a series of elements arranged with display: inline . Every item appears in the same line.

For example, padding-inline-start would be the padding at the side where the current language starts:

In English padding-inline-start = padding-left

In Arabic padding-inline-start = padding-right

In Japanese padding-inline-start = padding-top

Block axis

Replacing the top and bottom related properties, top is the start of our website and bottom is the end. It can be very easy to remember, Just imagine several display: block; elements that stack on top of each other.

And still you may ask yourself, Isn’t that always the case in this situation?!

The answer is a little bit more complicated. Currently, all websites, in all different languages work this way, because up until now, there were no other methods available.

Websites written in Japanese and certain other eastern languages start from right to left and not from top to bottom! To understand this, imagine rotating your screen 90 degrees to the right. The scrolling of the website is no longer vertical, instead It’s now horizontal!

Example(block cases):

In English and Arabic padding-block-start = padding-top

In Japanese padding-block-start = padding-right

Japanese Website

The New Box Model Properties

(margin, padding and border)

After understanding the inline and block axes, use them according to your needs.

Example for English:

margin

margin-block-start = margin-top

margin-block-end = margin-bottom

margin-inline-start = margin-left

margin-inline-end = margin-right

padding

padding-block-start = padding-top

padding-block-end = padding-bottom

padding-inline-start = padding-left

padding-inline-end = padding-right

border

border-block-start = border-top

border-block-end = border-bottom

border-inline-start = border-left

border-inline-end = border-right

Logical Dimension

Width and Height replaced with inline-size and block-size .

The height and width properties also need to adjust to this new methodology. Once we understand the inline/block methodology, it’s easier to understand the dimensions. In English, the width property is replaced by inline-size and the height property is replaced by block-size .

Example(inline/block size):

In English and Arabic (LTR/RTL)

width = inline-size

height = block-size

In a top-to-bottom(reading lines) language, such as Japanese, we see the opposite:

inline-size = height , block-size = width .

For min/max properties, just add min/max at the property start,

example: min-inline-size: 300px; max-block-size: 100px;.

The Box Model Properties — Old vs New Properties

CSS Positions

The previous names of the position properties, top / right / left / bottom evolved into a new set of names, all of them with the prefix inset:

inset-block-start / inset-inline-end / inset-block-end / inset-inline-start .

In English (LTR):

top = inset-block-start

bottom = inset-block-end

left = inset-inline-start

right = inset-inline-end

/* OLD TECHNIQUE */

.popup{

position:fixed;

top:0;

bottom:0;

left:0;

right:0;

} /* NEW TECHNIQUE */ .popup{

position:fixed;

inset-block-start:0; /*top - in English*/

inset-block-end:0; /*bottom - in English*/

inset-inline-start:0; /*left - in English*/

inset-inline-end:0; /*right - in English*/

}

At first look you may ask yourself why the hell we need such complicated names! But there is a good reason. In the new property names, the properties can be combined, in a similar way to padding/margin/border, and this is a new shorthand feature that didn’t exist before for positions.

Example: