ネストされた疑似要素、そして縦書き順序付きリストの括弧付き番号を縦中横

Chome 135で::before::markerとか::after::markerのように疑似要素をネストしてスタイルを設定できるようになりました…

…これってどういうことだろう？ひょっとすると「縦書き順序付きリストの括弧付き番号で、番号だけを縦中横にする」のに使えるかもしれない。試してみました。

従来、生成されたテキストには構造がありませんでした。そこで例えば、括弧付き番号を生成するとして、生成した括弧と番号の色を変えたりといったことができませんでした。Chrome 135から、それができるようになりました。

::before::markerの確認

次のようなHTMLで、noteクラスのp要素に"1番目"、"2番目"、…と番号を生成することにします:

<p class="note">疑似要素のネスト</p>
<p class="note">縦書きの箇条書き</p>

次のようなCSSにすると、Chrome 135では、生成した"1"と"番目"の色を変えられます。

.note::before {
  display: list-item inline;
  counter-increment: note 1;
  margin-inline-end: .5em;
  content: "番目";
  color: orange;
}
.note::before::marker {
  content: counter(note);
  color: crimson;
}
:root {
  counter-reset: note 0;
}

次のような表示になると思います:

ポイントは::marker疑似要素の順番だと思いました:

• ::before疑似要素をlist-itemにします(display: list-item;)。::marker疑似要素はlist-itemにしかありません
• ::before疑似要素の中の::marker疑似要素で番号を生成します。生成した番号は::before疑似要素で生成した"番目"の前にあります

縦書き順序付きリストの括弧付き番号を縦中横

さて、

縦書きの論文では文末にまとめた注や文献の番号を縦中横にして、上下を括弧ではさむことがあります。

次のような順序付きリストを縦書きにして括弧付き番号を生成するのですが…

<ol>
    <li>色は匂へど散りぬるを</li>
    <li>我が世誰ぞ常ならむ</li>
    <li>有為の奥山今日越えて</li>
    <li>浅き夢見し酔ひもせず。</li>
</ol>

番号だけを縦中横にして括弧は縦書きのままとします。"(99)"と生成されたテキストのうち、"99"だけを縦中横にするのです。自動生成したテキストに構造があってほしいのです。こういうのが従来はできませんでした。

Chrome 135でサポートされた::before::markerを使うと、かなり苦しいのですが、HTMLはそのままでCSSだけで実現できます。

:root {
    writing-mode: vertical-rl; /* 縦書き */
}
ol {
    padding-inline-start: 2.5em;
}
ol li {
    display: list-item;
    list-style-type: none;
    text-indent: -2em;
}
ol li::marker {
    content: "（      "; /* 苦しい… */
}
ol li::before {
    display: list-item inline;
    content: "）";
}
ol li::before::marker {
    content: counter(list-item);
    text-combine-upright: all;
}

次のような結果になります:

li要素がすでにlist-itemなのに、その疑似要素li::beforeもまたlist-itemだとはややこしい。さらに、liにli::markerがすでにあるのに、li::beforeにもli::before::markerがあるなんて！ひょっとすると、何か勘違いがあるのかもしれません。

次の部分の"（ "の空白" "は何のために付いてるのかというと、リストのインデントのためです。

ol li::marker {
    content: "（      "; /* 苦しい… */
}

::marker疑似要素にはmarginプロパティが効かないので、"（"の位置を調整するために空白を付けてます。苦しい。

次のような大きなリストだと効果が分かりやすいと思います。

See the Pen 縦書き順序付きリストで括弧付き番号が縦中横 by Taku Yamaguchi (@yamahige) on CodePen.

縦書き順序付きリストについては、縦中横を実現するtext-combine-uprightプロパティのdigits 2などの値が実装されることが本筋と思います。ですが、とりあえずHTMLはシンプルなままに、括弧付きの縦中横番号を表示できました。