[CSS組版]見出しに画像を使いつつヘッダ・フッタには画像のaltを使う例

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

https://adventar.org/calendars/10448

明日はメイユールさんです。

string()は画像を引っ張れない

ごくベーシックなヘッダの置き方を見てみましょう。

ヘッダに名前付き文字列headingを置く指定

@page { size: JIS-B5;

    @top-center {
       ...      
        content: string(heading);
    }
}

main> section> h2 {
    string-set: heading content(); /**/
}

基本的に問題はないのですが、もしh2の中に画像を貼り込まれたら？

   <main>
    <section>
      <h2><img class="label" src="label.jpg" alt="あいこん" width="200"></h2>
      <p>↑h2だよ</p>
     </section>
    </main>

はい。h2で書いたstring-set: heading content()はヘッダ中央で無を映しています。

content()がaltなどをどうすべきかは仕様が見当らないため、処理系によってはaltをよしなにする可能性が無いとはいえませんが、基本そういうことをする機能ではないので期待すべきではないでしょう。SVGのmetadataとか考えるとキリがないし。

対策

「じゃあcontent()じゃなくてaltを引っ張ればいいじゃん」ということになります。方針としてはその通りですが、ちょっとCSSの機能的制約にひっかかります。h2を指すセレクタの中では、その子要素imgのaltを持ってこれないのです。

https://drafts.csswg.org/css-values-5/#attr-notation

attr()は実はinheritする値なら持ってこれるようなのですが、XSLTのようなことはできません。

XSLTだと、たとえば次のように周囲の構造から情報を引っ張れる。

<!-- h2のマッチテンプレート -->
<xsl:template match="h2[exists(child::img)]" priority="3">
<xsl:variable name="heading" select="child::img[1]/@alt" as="xs:string"/>
</xsl:template>

ではどうするかですが、名前付き文字列はCSS変数とは異なり、構造上の、階層位置ではなく登場位置で優先が決まります。つまりh2>imgの方で指定しても問題無く機能します。（ただし初期値から調整は要る）

@page { size: JIS-B5;
    @top-center {
       ...
        content: string(heading, last);/*first（初期値）だとh2への指定が優先されてしまう*/
    }
}
main> section> h2 {
    string-set: heading content(); /**/
}

main > section > h2 >img.label {
    string-set: heading attr(alt); /*h2より構造上後ろに登場する*/
}

対策の制約

• string()でlastを指定しているため、同ページ内で更に別の見出しを使うとそっちに内容が持っていかれる
• 画像とテキストの混在には対応できない

この辺までいくと、素直にsectionかh2にtitleやdata-*で入れたい内容を入れてそっちをstring-setに指定する方が簡単でしょう。