TRBL Is Trouble: Making CSS Shorthand Logical

In my recent article, Joomla and RTL Languages, I talked about CSS logical properties and why they are important when developing websites that support right-to-left (RTL) languages.

I covered the basics of replacing physical properties such as left, right, margin-left and padding-right with their logical equivalents.

But there is another little trap that is easy to overlook, particularly if you have been writing CSS for years.

It's shorthand.

Remember TRBL?

If you've ever learned CSS, you've probably come across the shorthand notation for margin and padding.

CSS shorthand also allows you to use fewer than four values. For example, one value applies to all four sides, two values apply to the block and inline dimensions respectively, and three values specify the top, inline sides and bottom. These are still physical directions, not logical properties.

For example:

padding: 10px;                /* All four sides */
padding: 10px 20px;           /* Top/bottom, left/right */
padding: 10px 20px 30px;      /* Top, left/right, bottom */
padding: 10px 20px 30px 40px; /* Top, Left, Right, Bottom */

The last example is shorthand for:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

The order is clockwise, starting at the top:

• T – Top
• R– Right
• B– Bottom
• L– Left

I remember it using the mnemonic TRBL (pronounced trouble). An appropriate name, as it turns out!

The problem is that these are physical directions. Top, right, bottom and left describe fixed positions, regardless of the direction in which the content is written.

That means that even if you've replaced all your margin-left and padding-right declarations with logical properties, you could still be introducing physical positioning through shorthand declarations.

For example:

padding: 10px 20px 30px 40px;

This is not a logical CSS declaration. It will always mean top, right, bottom and left.

Changing the text direction to RTL doesn't change the meaning of those four values.

So what do we use instead?

Fortunately, CSS gives us logical shorthand properties too.

Rather than thinking about four physical sides, we think about two dimensions:

Block – The direction in which blocks of content flow. In a conventional horizontal writing mode, this is top and bottom.

Inline – The direction in which text flows within a line. In a conventional horizontal writing mode, this is left and right.

We can therefore use two shorthand properties:

padding-block: 10px 30px;
padding-inline: 40px 20px;

These are equivalent to:

padding-block-start: 10px;
padding-inline-end: 20px;
padding-block-end: 30px;
padding-inline-start: 40px;

Understanding the mapping

So how do these logical properties actually map to the familiar top, right, bottom and left?

In a conventional horizontal, left-to-right (LTR) layout, the mapping is:

But in a conventional horizontal, right-to-left (RTL) layout, the mapping changes:

Notice that block-start and block-end remain at the top and bottom, but inline-start and inline-end swap sides.

This is the important difference: logical properties describe positions relative to the writing mode and direction, rather than fixed physical positions.

These examples assume the normal horizontal writing mode (horizontal-tb). CSS logical properties also adapt to vertical writing modes, where the block and inline directions change.

Understanding the shorthand order

Notice that the order is different from TRBL.

For the block dimension, the order is:

1. Block-start
2. Block-end

For the inline dimension, the order is:

1. Inline-start
2. Inline-end

In other words:

padding-block: start end;
padding-inline: start end;

The first value is always the start edge and the second is always the end edge.

The same properties are available for margin:

margin-block: 10px 30px;
margin-inline: 40px 20px;

What if I want to specify all four sides individually?

You can, of course, use the individual logical properties:

padding-block-start: 10px;
padding-inline-end: 20px;
padding-block-end: 30px;
padding-inline-start: 40px;

There isn't currently a single four-value logical shorthand equivalent to padding: top right bottom left.

Instead, use the two shorthand declarations:

padding-block: 10px 30px;
padding-inline: 40px 20px;

Personally, I find this easier to read anyway.

A practical example

Let's take a fairly ordinary CSS declaration:

padding: .25rem 0 .75rem 1rem;

Using the traditional TRBL shorthand, this means:

• Top: .25rem
• Right: 0
• Bottom: .75rem
• Left: 1rem

The logical equivalent is:

padding-block: .25rem .75rem;
padding-inline: 1rem 0;

Now the padding follows the writing direction automatically.

In a left-to-right layout, the inline-start padding is on the left.

In a right-to-left layout, the inline-start padding is on the right.

No additional RTL CSS, no conditional rules and no swapping left and right values.

One final example

Here's another example that illustrates why it matters when converting existing CSS.

Original:

padding: .3rem .5rem .3rem calc(var(--sidemenu-toggle) + .25rem);

A tempting solution might be to retain the physical shorthand and override one side with a logical property. But that still leaves physical positioning in your CSS.

Instead, write:

padding-block: .3rem;
padding-inline: calc(var(--sidemenu-toggle) + .25rem) .5rem;

Now every part of the declaration uses logical properties.

Stop getting into TRBL

The next time you write margin or padding, take a moment to think about whether you really mean top, right, bottom and left, or whether you mean block-start, inline-end, block-end and inline-start.

If you're building websites that support multiple languages and writing directions, that small change can save you a surprising amount of work later.

And remember: TRBL might be easy to remember, but it really can get you into trouble!