Since Chromium 69 (September 3rd 2018), logical properties and values have helped developers maintain control of their international layouts through logical, rather than physical, direction and dimension styles. In Chromium 87, shorthands and offsets have shipped to make these logical properties and values a bit easier to write. This catches Chromium up to Firefox, which has had support for the shorthands since 66. Safari has them ready in their tech preview.
Document flow #
If you’re already familiar with logical properties, inline and block axes, and don’t want a refresher, you can skip ahead. Otherwise, here’s a short refresher.
In English, letters and words flow left to right while paragraphs are stacked top to bottom. In traditional Chinese, letters and words are top to bottom while paragraphs are stacked right to left. In just these 2 cases, if we write CSS that puts “margin top” on a paragraph, we’re only appropriately spacing 1 language style. If the page is translated into traditional Chinese from English, the margin may well not make sense in the new vertical writing mode.
Therefore the physical side of the box isn’t very useful internationally. Thus begins the process of supporting multiple languages; learning about physical versus logical sides of the box model.
Key Term: A logical property is one that references a side, corner or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s
strong arm, rather than assuming it’s their
right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.
Have you ever inspected the
p element in Chrome DevTools? If so, you might have noticed that the default User Agent styles are not physical, but logical.
CSS from Chromium’s User Agent Stylesheet
The margin is not on the top or bottom like an English reader might believe. It’s
block-end! These logical properties are akin to an English reader’s top and bottom, but also akin to a Japanese reader as right and left. Written once, works everywhere.
Normal flow is when the webpage is part of this multi-directionality intentionally. When page content updates according to document direction changes, the layout and its elements are considered in flow. Read more about “in” and “out” of flow on MDN or in the CSS Display Module spec. While logical properties are not required to be in flow, they do much of the heavy lifting for you as directionality changes. Flow implies direction, which letters, words and content need to travel along. This leads us to block and inline logical directions.
Block direction is the direction that new content blocks follow, like asking yourself, “where to put the next paragraph?”. You might think of it as a “content block”, or “block of text”. Every language arranges their blocks and orders them along their respective
block-start is the side a paragraph is first placed, while
block-end is the side new paragraphs flow towards.
Key Term: The block direction is defined by the
writing-mode property. For example,
horizontal-tb (the initial value) has a vertical block axis that flows top-to-bottom (
tb). Other values have an horizontal block axis, which can flow left-to-right (like in
vertical-lr) or right-to-left (like in
In traditional Japanese handwriting, for example, block direction flows right to left:
Inline direction is the direction that letters and words go. Consider the direction your arm and hand travel when you write; they are traveling along the
inline-start is the side where you start writing, while
inline-end is the side where writing ends or wraps. The above video, the
inline-axis is top to bottom, but in this next video the
inline-axis flows right to left.
Key Term: The inline direction is defined by both
direction. For example, it flows left-to-right with
ltr, right-to-left with
rtl, top-to-bottom with
ltr, and bottom-to-top with
flow-relative means that the styles written for one language will be contextual and appropriately applied into other languages. Content will flow relative to the language it’s being delivered for.
New shorthands #
Some of the following shorthands are not new features for the browser, rather, easier ways to write styles by taking advantage of being able to set values on both block or inline edges at once. The
inset-* logical properties do bring new abilities, as there were no longhand ways to specify absolute positions with logical properties before it. Insets and shorthands flow (hehe) together so well though, I’m going to tell you about all of the new logical properties features landing in Chromium 87 at once.
Margin shorthands #
Caution: If the above items do not have space between them, then
margin-block shorthand is not supported in your browser.
There is no shorthand for “top and bottom” or “left and right”… until now! You probably reference all 4 sides using the shorthand of
margin: 10px;, and now you can easily reference 2 complimentary sides by using the logical property shorthand.
Padding shorthands #
inline complimentary set of shorthands:
Inset and shorthands #
The physical properties
left can all be written as values for the
inset property. Any value of
position can benefit from setting sides with inset.
top: 0; right: 0; bottom: 0; left: 0;
That should look immediately convenient! Inset is shorthand for the physical sides, and it works just like margin and padding.
New features #
As exciting as the physical sides shorthand is, there’s even more from the logical features brought by additional
inset shorthands. These shorthands bring developer authoring convenience (they’re shorter to type) but also increase the potential reach for the layout because they’re flow-relative.
Further reading and a full list of inset shorthand and longhand is available on MDN.
Border shorthands #
Border, plus its nested
width properties have all got new logical shorthands as well.
Further reading and a full list of border shorthand and longhand is available on MDN.
Let’s put it all together in a small example. Logical properties can layout an image with a caption to handle different writing and document directions.
Or try it!
You don’t have to do much to make a card internationally responsive with a