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-start and 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 float and clear.

Flow-what, now?

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 property. writing-mode accepts one of three values¹:

• 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.² 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 left and right as values:

• float,
• clear,
• text-align, and
• caption-side.

For each of the above properties, inline-start and inline-end are flow-relative alternatives to the physical directions ofleft and right (see Figure 2).

The specification also defines block-start and block-end flow-relative values. To date, I don't think there are any properties for which block-start and 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.

Here, border-block-start is actually a shorthand property for three longer properties:

1. border-block-start-width;
2. border-block-start-style and
3. border-block-start-color.

Another shorthand property, border-block, sets the border appearance of the starting and ending block edges at once. Both border-block-start and border-block use the same value syntax as border and border-top.

Contrast this with physical properties and values. Physical properties include top, bottom and left, as well as margin-right, padding-top, and border-top-right-radius.

Unlike their flow-relative counterparts, physical properties and values do not change when the value of writing-mode changes; 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.

• margin-block
  • margin-block-start
  • margin-block-end
• margin-inline
  • margin-inline-start
  • margin-inline-end
• padding-block
  • padding-block-start
  • padding-block-end
• padding-inline
  • padding-inline-start
  • padding-inline-end
• border-block
  • border-block-width
  • border-block-style
  • border-block-color
• border-block-start
  • border-block-start-style
  • border-block-start-width
  • border-block-start-color
• border-block-end
  • border-block-end-style
  • border-block-end-width
  • border-block-end-color
• border-inline
  • border-inline-width
  • border-inline-style
  • border-inline-color
• border-inline-start
  • border-inline-start-style
  • border-inline-start-width
  • border-inline-start-color
• border-inline-end
  • border-inline-end-style
  • border-inline-end-width
  • border-inline-end-color
• border-start-start-radius (See a demo)
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

Legacy shorthand properties

Be aware that legacy shorthand properties, such as margin, padding, border, and 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 *-block and *-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 writing-mode is horizontal-tb and to the left and right edges when writing-mode is vertical-rl or vertical-lr.

Flow-relative properties aren't limited to margins, padding, and borders, however. You can also set the dimensions of an element using the inline-size and block-size properties.

Dimension properties: inline-size and block-size

The inline-size and block-size properties are flow-relative ways to set the width and height of an element. Where width and height set the size of an element along the x and y axes, respectively, inline-size and 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 width and height, properties, you can set a minimum or maximum inline or block size using the min- or max- prefix.

Flow-relative positioning

When working with positioned elements, the top, right, bottom, and left properties offset the position of an element relative to its container. The inset family of properties are flow-relative alternatives to top, right, bottom, and left. There are four longhand properties:

• inset-block-start,
• inset-block-end,
• inset-inline-start, and
• inset-inline-end.

Three are also three shorthand properties:

• inset-block, which sets inset-block-start and inset-block-end;
• inset-inline, which sets inset-inline-start and inset-inline-end; and
• 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 bottom and inset-inline-end is the equivalent of right. When the value of writing-mode is vertical-rl, 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 padding-block-start.

When creating HTML emails, use physical properties for now, or include them as a fallback. Gmail, for example, doesn't yet support margin-inline and margin-inline-start. Instead, use the appropriate, physical margin-* property for your script and writing mode or use the margin shorthand.

Additional reading

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

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