Bidirectional Horizontal Rules in CSS

Say you have a <blockquote> and the design calls for a thick border along the left side. Well, you might not necessarily mean left side, but actually mean on the side of the start of the text.

That’s exactly what CSS logical properties are meant to address, and Hussein Al Hammad has a nice article laying out some use cases, including the blockquote thing I mentioned above.

By using logical properties, you don’t have to mess around with manually writing selectors including [dir="rtl"] or needing to be aware of writing modes and such. The box model stuff (borders, padding, margin…) will adjust where it needs to be.

Hussein’s blockquote is a good baby step example for understanding of all this:

blockquote {
  /* Rather than... */
  border-left: 4px solid #aaa;
  padding-left: 1.75rem;

  /* You'd do... */
  border-inline-start: 4px solid #aaa;
  padding-inline-start: 1.75rem;
}

See the Pen
Logical properties demo: blockquote by Hussein Al Hammad (@hus_hmd)
on CodePen.

Support is pretty good.

One thing that threw me off in the article is the term “Horizontal Rules.” First I imagined the <hr> element. Then I imagined wanting to reverse the direction of the design with logical properties. Usually an <hr> is just a line so horizontal direction doesn’t matter, but let’s say it’s like a shorter line along the edge where new lines start after wrapping.

We could draw the shorter line with backgrounds that cover different parts of the box model, then use logical properties where the padding applies. This is a pretty unique edge case, but it’s fun to fiddle with:

See the Pen
<hr>s that are direction aware kinda by Chris Coyier (@chriscoyier)
on CodePen.

It would be even easier if we had logical gradients.

Direct Link →