New CSS Logical Properties!

The Next Step of CSS Evolution

Elad Shechter
Dec 11, 2018 · 9 min read

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.

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)
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.

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.

Japanese Website

The New Box Model Properties

(margin, padding and border)
After understanding the inline and block axes, use them according to your needs.

Logical Dimension

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

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.

/* 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*/
}
.popup{
position:fixed;
inset:0 0 0 0; /*top, right, bottom, left - in English*/
}

CSS Floats

Float is very straightforward, there are only two values, inline-start/inline-end, that replace the values of left/right .

Text-align

Even easier than floats, the values left/right are replaced by start/end.

More Stuff

Resize property: used mostly for <textarea>, its values are updated from horizontal/vertical to inline/block;

CSS Grid & CSS Flexbox

The great news for CSS Grid & CSS Flexbox is that these two features are already built with the new methodology of logical properties, and there is no need to update them.

Understanding the Workflow with Logical Properties

At first, It looks very complicated, but it’s very easy to use. While writing the styles, there is no need to worry about cross-language support. You just need to use logical properties, instead of the old physical properties, and match them to your preferred language.

Applying Alignment According to Language

After we learned all the updates of the new logical properties, here are two properties that let us define the block axis alignment (flow of the website), and the inline axis alignment (the direction in which we read the text).

Writing-mode property (block axis)

Defines the flow of the website. In most cases, it will be top to bottom, but as mentioned, certain language can flow from right to left (Japanese), or even left to right (Mongolian). In both cases, we will have a horizontal scroll instead of the vertical scroll we are used to.

  • writing-mode: vertical-rl; = Right to Left Flow, for Japanese.
  • writing-mode: vertical-lr; = Left to Right Flow, for Mongolian.
html{
writing-mode: vertical-rl;
}

Direction property (inline axis)

Defines whether the text should start from left-to-right or right-to-left, but only when the default horizontal writing-mode property is active. If we change the writing-mode to one of the vertical modes, the actual text direction, of left-to-right, will change to top-to-bottom. Or the opposite, with anrtl(right-to-left) value, it will change to bottom-to-top.

html{
direction: rtl;
}

Browsers Support

  • All The Box Model properties margin/padding/border and the new width/height(inline-size, block-size) properties work in all main browsers except for Edge.
  • text-align new values work in all main browsers except for Edge.
  • Floats/Positions/Resize — values/properties work only in Firefox.

Issues With the Logical Properties

With these new refactors, we are facing new issues. For example, what if we want to write all properties of margin in the shorthand way:
margin: 10px 20px 8px 5px; you can’t predict how it would be interpreted.
If the website is using physical properties, the values will be interpreted as:
margin-top/margin-right/margin-bottom/margin-left,
but if the website is using the new logical properties, the values should be:
margin-block-start/margin-inline-end/margin-block-end/margin-inline-start.

html{
flow-mode:physical;
/*or*/
flow-mode:logical;
}
.box{
/*will be interpreted according to the HTML flow-mode value*/
margin:10px 5px 6px 3px;
padding:5px 10px 2px 7px;
}

Issue With Responsive Design

When trying to make a fully working demo, I tried to use the new “max-width” property max-inline-size in a media query, with the understanding that in left-to-right/right-to-left it will be behave like max-width and for languages like Japanese, it will behave like max-height. Unfortunately, the browsers are not interpreting this property currently in media queries.

/*Not Working*/
@media (max-inline-size:1000px){
.main-content{
background:red;
grid-template-columns:auto;
}
}

Changes to be Considered

When I wrote this post, after learning and understanding the concept of logical properties in-depth, there were still some missing adaptions, that I thought should be incorporated in the future:
- line-height can be “line-size”
- border-width can be “border-size”

Final Words

That’s all,
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I would appreciate applause and sharing :-)