rlh単位

11月リリースのFirefox 120でCSSのrlh単位がサポートされ、すべての主要なブラウザーで使えるようになった。

rlhはルート要素のline-heightに対する相対単位である。html要素で本文の文字サイズとともに行送りを定義しておけば、たとえば「引用ブロックは前後に1行分のアキをとり、全体の行頭を2文字分下げる」といった指定を以下のように書ける。

html {
  font-size: 120%;
  line-height: 1.875;
}

blockquote {
  margin-block: 1rlh;
  margin-inline: 2rem 0;
}

このように水平方向は文字サイズ基準のrem、垂直方向は行送り基準のrlhという単位の使い分けができ、タイポグラフィを中心に据えたレイアウトをよりシンプルに記述できるようになった。このサイトにもさっそく導入している。