CSSで行頭の記号・約物を揃える方法

どうも、こんばんは。IPPEIです。

今日はCSSに関する話です。テキストのカーニング処理はみなさんどうしてるでしょうか？ font-feature-settingsプロパティでの自動カーニングがすべてのモダンブラウザで対応したことだし、これを使わない手はない。

このブログではfont-feature-settings: "pkna" 1;と設定している。paltにしようか悩ましいところだが、paltだと約物まわりが詰まりすぎて不自然になってしまうのだ。

だが、段落の頭にカッコなどの約物があるとき、pknaだと行頭が半角1文字分下がってしまって見栄えが悪い。行頭だけpaltを使いたい。ちょっと調べてみると、1文字目だけを指定する疑似要素::first-letterがあることがわかった。通常は1文字目だけフォントサイズを大きくするドロップキャップに使うためのものだろう。

結局、このサイトでは次のようなCSSを記述することで落ち着いた。

body {
  font-feature-settings: "pkna" 1;
}
:where(p, h1, h2, h3, h4, h5, h6)::first-letter {
  font-feature-settings: "palt";
}

いままで、頭のカッコが下がるのがイヤで、意地でも段落頭にカッコを使わないように記事を書いてきたのだが、実に不毛な努力だった。今後は遠慮なく頭にカッコを使って行こうと思う。次の段落行頭の記号は揃っているだろうか。

（揃っていなかったら、何のブラウザかを添えてコメントいただけると幸いです）