[CSS]括弧の内部文での括弧を区別する

CSS組版アドベントカレンダー2024の5日目の記事です。

https://adventar.org/calendars/10448

小ネタです。副題に『或いはCSS組版に於ける責務の指針』とするとちょっと過大ですが。

括弧の内部の文中で括弧を使う場合に自動で括弧の種類を切り換えたいという要求がありますか？　私は無いです。

「本当に彼は『そうしろ』と言ったんですね？」

これをCSSでやりたいというとき、先ずはこれがマークアップ的要求であることを認めるのが良いでしょう。括弧と、括弧の中の括弧を区別したいということなので。

<p><q>本当に彼は<q>そうしろ</q>と言ったんですね？</q></p>

実現するCSSは、簡易には次のようになるでしょうか。

q:lang("ja") {
    quotes: "「" "」";
}

q:lang("ja")  q:lang("ja") {
    quotes: "『" "』";
}

qに指定したquotesプロパティは、q::beforeのcontent: open-quote;とq::afterのcontent: close-quote;を経由して反映されます。

難点としては、q q qのようなケースで『』が適用されることですが、そんな構造は先ず間違いなく読みにくいので文章を直し、運用で遭遇しないようにするのが第一でしょう。

括弧はコンテンツとして直接記述できる文字ではありますが、どんな位置で、どのように使われているかによって処理を変えたい、という要求はこれをマークアップの側に持っていく十分な理由になります。Markdownでは逆に、強調や見出しといった構造を、浸透した記法によって直接文章に記述可能な約物の側に落とし込んでいるとも言えます。

折角なので、「p qの文が続くときは最初と最後だけに括弧が表示されるようにしよう」というケースを考えてみましょう。話者が一致していればあるかもしれません。話者の一致を見たければclassやその他属性もセレクタで検出することになるでしょう。

<p><q>本当に彼は<q>そうしろ</q>と言ったんですね？</q></p>
<p><q>終わりだ……</q></p> 

p:has(+ p q:lang("ja")) > q:lang("ja")::after {
    content: "";
}
p:has( q:lang("ja")) + p > q:lang("ja")::before {
    content: "";
}
p:has( q:lang("ja")) + p {
margin-inline-start: 0.5em;
}

くっつけた文の方は開始をを0.5emズラしてみました。行同士はpに設定されたマージンが適用されるため、単純に文が2行続くよりも広く空いています。

更に話題が逸れて、この手の調整で、1行目の行頭だけちょっとズラしたいという要望にはよくtext-indentが使われます。しかし、「一字ならともかく、インタビュー記事の話者表示でやろうとすると人によって名前の字数が違って大変です。そこで話者名の終点を均一にするには、widthをbefore::に指定してしまう方法があります^[1]。displayはinline-blockあたりがよいでしょう。まあFlexibleBoxでも良い感じにできると思います。CSS GridはFragmentationを実装した処理系が現在無いのでちょっと厳しいかな。

<blockquote data-sp="hidaruma">
我輩は猫である。名前はまだない。
</blockquote>
                
<blockquote data-sp="not hidaruma">
我輩は猫である。名前はまだない。
</blockquote>            

blockquote::before {
    display:inline-block;
    content: attr(data-sp) leader(" ") "：";
    text-align-last:justify;;
    width: 10em;
}

どこがポイントかといえば、調整対象であるテキストを属性値に移動して本文から外していることです。HTMLあるいはタグ付きPDFとして公開するのであればWAI-ARIAまわりの調整が必要になりますが、純粋な印刷物用途であれば、マークアップ構造を最適化することによってCSSの便利さをフルに活用できます。

終わりに

CSSを何とかする前にマークアップを見直せ！　マークアップの無い原稿で不足したら大人しくマークアップを使おう！　Gruber Markdownだってそうだろ！

明日はhidarumaさんの担当です。

脚注

1. VivlioStyle（Google Chrome）やAntenna House Formatterでは字取りを使ったりもできますね