Go back to home page of Unsolicited Advice from Tiffany B. Brown

CSS Logical Properties

Numbered Blocks by Susan Holt Simpson on Unsplash.

Photo by Susan Holt Simpson on Unsplash

Photo of numbered wooden blocks by Susan Holt Simpson on Unsplash

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

Figure 1: How the `writing-mode` property affects the block flow direction. View this demo in a new tab.

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.

Figure 2: Physical versus logical or flow-relative values for float. View flow-relative float values in a separate tab.

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.

Figure 3: Logical or flow-relative properties depend on an element's writing mode. You can also view this demo as a standalone demo.

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.

Figure 4: With physical properties, the writing-mode property has no effect on which edge has a styled border. View the physical borders demo in a separate tab.

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.

Figure 5: For now, legacy shorthand properties such as border-width expand to physical properties. The writing mode has no effect. View the legacy shorthand properties demo in a separate tab.

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.

Figure 6: The inline-size and block-size properties set the width or height of an element based on the block flow direction. View the logical dimensions demo in a new tab.

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.

Figure 7: Flow-relative insets versus physical insets with different writing modes. View the flow-relative insets in a separate tab.

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

Masthead photo by Susan Holt Simpson on Unsplash.

  1. Firefox supports two additional values, sideways-rl and sideways-lr. To date, they're the only browser to do so. As a result, I did not cover them here. 

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