CSS Logical Properties
While updating a demo for CSS Master last year, I opened my browser's inspector and noticed a set of new-to-me CSS properties:
margin-block-end. I hadn't encountered them before, but the property names suggested they might be related to block and inline formatting contexts. That was a correct hunch.
Seems while I was focusing on other areas of web development, the CSS Working Group introduced the CSS Logical Properties and Values specification. It adds several new flow-relative properties, and flow-relative values for properties such as
Flow-relative. Remember, when it comes to CSS layout, everything is a box. In normal flow, boxes participate in either a block formatting context or an inline formatting context.
In an inline formatting context, boxes are laid out one after the other in the inline base direction or along the inline axis. The inline base direction is either determined by the
direction property or the
dir HTML attribute.
Because browsers and other user agents can strip CSS, you should use the
dir attribute instead of the
direction CSS property. Using
dir will ensure that the direction persists even if the CSS is unavailable.
In a block formatting context, boxes stack one after the other in the block flow direction or along the block axis. The block flow direction can be horizontal or vertical, and it's always perpendicular to the inline base direction. Whether the block flow direction is horizontal or vertical mostly depends on the value of the
writing-mode accepts one of three values1:
horizontal-tb(horizontal lines of text, blocks flow from top-to-bottom);
vertical-rl(vertical lines of text, blocks flow right-to-left); and
vertical-lr(vertical lines of text, blocks flow left-to-right).
Figure 1 illustrates how
writing-mode affects the block flow direction. Note here that the script (Latin) and language (English) are written and read horizontally.2 Because the writing mode is vertical, each character gets rotated by 90 degrees. Glyphs from scripts and languages that can be read and written vertically (e.g. Chinese, Japanese, and Mongolian) do not get rotated.
I cover scripts, languages, glyphs, fonts, and writing modes and
text-orientation in Chapter 6 of CSS Master.
In other words, flow-relative properties and values describe the edges of the containing box relative to the block flow direction of a container.
Logical or flow-relative values
Flow-relative values apply to properties that accept
right as values:
For each of the above properties,
inline-end are flow-relative alternatives to the physical directions of
right (see Figure 2).
The specification also defines
block-end flow-relative values. To date, I don't think there are any properties for which
block-end are valid values.
When a document has a horizontal writing mode, and the text direction is right-to-left,
float: inline-start aligns the object against the right edge of the container; when it's left-to-right,
float: inline-start aligns the object along the left edge.
Logical versus physical properties and values
Figure 3 shows how logical border properties work. When the block flow direction is top-to-bottom,
border-block-start sets the border along the top edge of the container. When the block flow direction is right-to-left,
border-block-start sets the border along the right edge of the container. With a left-to-right block flow direction,
border-block-start sets the style of the container's left edge.
border-block-start is actually a shorthand property for three longer properties:
Another shorthand property,
border-block, sets the border appearance of the starting and ending block edges at once. Both
border-block use the same value syntax as
Contrast this with physical properties and values. Physical properties include
left, as well as
Unlike their flow-relative counterparts, physical properties and values do not change when the value of
border-left always sets the left border style, as shown in Figure 4.
I've included the list of logical properties for margins, padding, borders, and border radii below.
border-start-start-radius(See a demo)
Legacy shorthand properties
Be aware that legacy shorthand properties, such as
border-width, currently map to to physical properties, not logical ones. As Figure 5 shows,
border-width: 50px 0px adds a 50 pixel border to the top and bottom edge of the box, regardless of writing mode.
The CSSWG is still working toward a solution to this. For now, use the
*-inline shorthands. In this case,
border-block: 50px adds a 50 pixel border to the top and bottom edges of the box when the value of
horizontal-tb and to the left and right edges when
Flow-relative properties aren't limited to margins, padding, and borders, however. You can also set the dimensions of an element using the
block-size properties are flow-relative ways to set the width and height of an element. Where
height set the size of an element along the x and y axes, respectively,
block-size set them relative to the writing mode.
In Figure 6, both boxes have an
inline-size value of
20rem and a
block-size value of
40rem. The second box, however, uses a vertical writing mode, which means
block-size sets its horizontal dimension instead of its vertical one.
As with the
height, properties, you can set a minimum or maximum inline or block size using the
When working with positioned elements, the
left properties offset the position of an element relative to its container. The
inset family of properties are flow-relative alternatives to
left. There are four longhand properties:
Three are also three shorthand properties:
inset-block, which sets
inset-inline, which sets
inset, which sets all four properties at once.
Figure 7 shows how flow-relative positioning differs from physical positioning.
In each example, the element is absolutely-positioned inside of its container, with
inset-block-end: 0rem and
inset-inline-end: 2rem rules applied.
When the writing mode is horizontal, right-to-left,
inset-block-end is the equivalent of
inset-inline-end is the equivalent of
right. When the value of
inset-block-end corresponds to the left edge, and so forth.
When to use logical properties and values
Choose logical properties and values when:
- publishing web content in multiple scripts, (e.g. publishing in French, Arabic, and Japanese); or
- building a library, framework, or component for distribution that could be folded into a project that uses a different script (e.g. a React component that's published to npm).
For web sites that publish in a single language or using a single script, it's fine to use either group of properties. Physical properties may be even preferable since they use fewer bytes;
padding-top is shorter than
When creating HTML emails, use physical properties for now, or include them as a fallback. Gmail, for example, doesn't yet support
margin-inline-start. Instead, use the appropriate, physical
margin-* property for your script and writing mode or use the
- CSS Flow Layout from MDN Web Docs
- CSS Writing Modes Level 4 specification (Editor's Draft)
- CSS Overflow Module Level 3
Masthead photo by Susan Holt Simpson on Unsplash.
Firefox supports two additional values,
sideways-lr. To date, they're the only browser to do so. As a result, I did not cover them here. ↩
Scripts are collections of glyphs or characters used to express a language or languages. English, French, and Italian are three different languages that all use Latin script. Arabic script is used to write the Arabic language, however, it's also used to write Farsi. ↩
Get CSS Master
Did you learn something from this blog post? You might like the latest edition of CSS Master. It contains several nuggets of CSS joy like this one. Buy now from SitePoint