Dec 11, 2018
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:
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.
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
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:
marginmargin-block-start = margin-topmargin-block-end = margin-bottommargin-inline-start = margin-leftmargin-inline-end = margin-right
padding padding-block-start = padding-toppadding-block-end = padding-bottompadding-inline-start = padding-leftpadding-inline-end = padding-right
borderborder-block-start = border-topborder-block-end = border-bottomborder-inline-start = border-leftborder-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-sizeheight = 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;.
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-startbottom = inset-block-endleft = inset-inline-startright = 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:
.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 .
In English(LTR):float: left = float: inline-startfloat: right = float: inline-end
Text-align
Even easier than floats, the values left/right are replaced by start/end.
In English(LTR):text-align :left = text-align: start;text-align :right = text-align: end;
More Stuff
Resize property: used mostly for <textarea>, its values are updated from horizontal/vertical to inline/block;
In English (LTR):resize: horizontal = resize: inline;resize: vertical = resize: block;
background-position: There isn’t any implementation yet in any browser, but if you look deeply, you can find some references to background-position-inline & background-position-block in Mozilla’s MDN website. There is no complete documentation yet, but they’re working on it! :-)
Other Stuff: We can assume that properties like transform-origin will be updated as well, much like any property that has to do with directions.
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.
Note: For now there are 3 main values for writing-mode . Their names are a little bit confusing. That’s because in their name there is the block-axis direction, plus what will be the alignment of the text in that case (inline-axis). This is obviously very frustrating, as the text alignment is redundant, and it causes only confusion.
To eliminate this confusion, it’s recommended to ignore the inline-axis part of the value, and only refer to the block-axis part of the value.
Examples:
values:
writing-mode: horizontal-tb;= Top to Bottom flow, like in English (default value)writing-mode: vertical-rl;= Right to Left Flow, for Japanese.writing-mode: vertical-lr;= Left to Right Flow, for Mongolian.
As for my personal opinion, I would have preferred that the values included only: tb/rl/lr (block-axis part), to eliminate this potential confusion.
Example definition for Japanese:
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.
Example definition for Arabic:
html{
direction: rtl;
}It’s Amazing how easily a top-to-bottom website can be transformed into a right-to-left website with a horizontal scroll.
Here is a demo I made, best viewed in Firefox (which currently supports more features).
Live Example (try out the language selection!):
Browsers Support
- All The Box Model properties
margin/padding/borderand the newwidth/height(inline-size,block-size) properties work in all main browsers except for Edge. text-alignnew 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.
In English websites, the physical properties and the logical properties work in the same way. In other languages, when we use shorthand, like margin, the goal is for it to work according to the direction property or the new property writing-mode.
This is still an open issue. I’ve added a suggestion that can solve the issue at github csswg-drafts. If you think you have a better solution, you can comment there!
For now, if you want to use logic properties, you have to use the full property names without any shorthand.
My Optional Solution:
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”
And it does not seem to be the case, at least with the border-width. It just got updated with logical properties and it still has the word ‘width’ in its name.
Example: border-block-start-width.
But who knows, maybe the right people at w3c will read this post :-)
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 :-)
I create lots of content about CSS. Be sure to follow me via Twitter, Linkedin, and Medium.
You can also access all of my content on my website: eladsc.com.
More Recommended posts on typography:
CSS Writing Modes — Very Recommended!
Text Orientations
More of my CSS posts:
Why CSS HSL Colors are Better!
The New Responsive Design Evolution
CSS Position Sticky — How It Really Works!
Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.
My Talk on CSS Logical Properties — New!
This is my full talk on CSS Logical Properties, fill free to share it 🙂
