本記事はCSS組版アドベントカレンダ2024の1日目の記事です。
導入
ライトノベルの挿絵などで、ページサイズのイラストが挿入されることがあります。DTPでは、この作業は自動組版のそれと比べて直感的な指定が可能であると思います。
自動組版、というかCSS組版でどこがハマリドコロかといえば、ページいっぱいに挿絵を表示したいのに、柱（ヘッダ・フッタ）が表示されてしまったり、本文用に指定しているページ余白内に画像が収まってしまったりすることでしょう。この対応に私が思いついた方法として次があります。失敗したものについても、どこが不味いかということで示すことにします：
- 柱の無い名前付きページを用意してページ背景に指定する（成功）
- 柱の無い名前付きページを用意して
pageで呼び出す（失敗） - 柱を画像配置時のみキャンセルする（失敗）
本記事では組版にAntenna House Formatterを使用していますが、CSS組版処理系であれば大体対応している範囲になると思います。
ページ挿絵の要件
本記事で実現するページ挿絵は次の要件とします：
- 見開きでない[1]
- 柱（running header, footer）が表示されないこと
-
本文レイアウトのページ余白部分まで画像が表示されていること
- もっと言えば塗り足し部分まで画像が示されていること
- （拡大縮小も好ましくはないが少なくとも）スケール変更時に画像の縦横比を変更しない
表示タイミングについては次トピックとします。
挿絵のタイミング（本記事では諦め）
ページフロートでいけるやろと雑に思っていたけど、今日実際プロパティ調整やってみたら上手くいかなかったので今回は諦め。フロート配置は処理系（ソフトウェア）によってかなりプロパティが違うしね。次行からは願望的な話です。
グラフィック一般について、学術論文や硬めの実用書では、大抵グラフィック（図版）の表示されるタイミングには余裕があります。これは、相互参照；本文中に対象の図版のラベルやページ位置を示すことで、多少図版の表示が本文での位置と多少ズレようと問題無いからです[2]。それよりも配置最適化によってページ数を抑えることにメリットがあります。
グラフィックの比重が高い（多くは初心者向けの）実用書やライトノベルでは、挿入指定位置と実際の表示位置のズレは殆ど許容されません。ページいっぱいで無ければ端に寄せて本文を回り込み、ページいっぱいなら次のページあたりが概ねの期待表示位置となるでしょう[3]。
柱の無い名前付きページを用意してページ背景に指定する（成功）例
画像コンテンツサイズについては指定が適当すぎるため例の中で揺れていますが、調整する時間がないのでそのまま。
<p>この外いたずらは大分やった。...</p>
<figure id="targetimage"> </figure>
<p>おやじはちっともおれを可愛がってくれなかった。...</p>
/*名前付きページで画像背景を指定*/
@page targetpage {
margin: 0pt;
/*柱内容は空にする*/
@top-left {
content: '';
}
@top-right {
content: '';
}
/*ページ挿絵を背景として指定*/
background-image: url("https://www.ndl.go.jp/portrait/img/portrait/0307_1.jpg");
}
/*idの箇所で名前付きページを呼び出す*/
#targetimage {
page: targetpage;
}
ページへの背景指定なので、柱；ページマージンの位置にもバッチリ画像が配置されています。塗り足し位置にも描画してくれるかは処理系次第かも。
この方法の場合、ネックは次：
- ページを呼び出した時点で今までのページ設定から領域が切り換わるため、フロートにしても配置調整はされない
- 画像ごとに名前付きページを用意することになる
まあ、表示上は上手くいくがシステマチックではないですね。
柱の無い名前付きページを用意してpageで指定する（失敗）例
先程と何が違うかというと、画像をimg側が持つということ。
失敗点は次：
- 塗り足し分広がった領域に対し画像サイズが追従できていない
<p><ruby><rb>親譲</rb><rt>おやゆず</rt></ruby>りの...</p>
<figure class="pageimage">
<img src="https://www.ndl.go.jp/portrait/img/portrait/0307_1.jpg" alt="夏目漱石">
</figure>
<p>親類の...</p>
/*柱のない名前付きページ（使い回し可）*/
@page pageimage {
margin: 0pt;
@top-left {
content: "";
}
@top-right {
content: "";
}
}
/*名前付きページを呼び出し、自身のサイズはページサイズ+塗り足し*/
figure.pageimage {
page: pageimage;
width:calc(105mm + 6mm);
height:calc(148mm + 6mm);
}
.pageimage> img {
line-height: 1;
}
まあ、塗り足しを考慮しないでよい電子版オンリーならこのまま使えなくもありませんね。どうにか回避策を考えられればこれが正道でしょう。
柱を画像配置時のみキャンセルする（失敗）例
ページレイアウトを別に用意しなくても、*ヘッダフッタの内容を変数にしておけばいつでも取り換えられていい感じじゃね？*というアイデアですが、これは機能しません。
ヘッダがそのまま出ていますね。他、ページマージン、ここではヘッダ分画像配置の始点がずれています。まあ、処理系としてはページレイアウト周りは最初に確定させる項目のはずなので、むべなるかな。
一応指定内容。
<figure id="cancell">
<img src="https://www.ndl.go.jp/portrait/img/portrait/0307_1.jpg" alt="夏目漱石">
</figure>
:root {
--left-header: counter(page);
--right-header: counter(page);
--margin-foredge: calc(var(--main-font-size) * 3);
--margin-gutter: calc(105mm - var(--margin-foredge) - var(--main-text-width));
--margin-top: calc(var(--main-font-size) * 3);
}
@page :verso {
@top-right {
content:var(--right-header);
}
}
@page :recto {
@top-left {
content:var(--left-header);
}
}
figure#cancell {
--left-header: '';
--right-header: '';
--margin-foredge: 0pt;
--margin-gutter: 0pt;
--margin-top: 0pt;
}
figure#cancell::after {
--left-header: counter(page);
--right-header: counter(page);
--margin-foredge: calc(var(--main-font-size) * 3);
--margin-gutter: calc(105mm - var(--margin-foredge) - var(--main-text-width));
--margin-top: calc(var(--main-font-size) * 3);
}
まとめ
- 確実性ならページ背景に指定して呼び出し
- 正道としてはページマージンと柱調整した名前付きページ指定で画像はimg側が持つ。（但し印刷用途ではどう調整するのがいいか分からなかった）
- （ページフロートはページマージン調整と合わせるのは現段階では多分厳しい）
2日目はhidarumaさんです。はい。
資料
組版利用画像
利用文章
CSS
組版・ドキュメントに関連する記事を投稿するコミュニティ、を予定しています。 文章表現よりはマークアップ・文章構造・自動組版に焦点を絞れると他コミュニティと差別化できると思っていますが如何。
Discussion