🐥

[CSS組版]固定配置コンテンツのページとフロー配置コンテンツページを本に同居させる

hidaruma

2024/12/07に公開

css組版

tech

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

導入

題のうち、固定配置コンテンツはそのままです。ページ上のどこに、どの大きさで、収めたいという話で、内部にタイポグラフィな話はあるにしても、ページメディアで扱うページまわりの複雑さとはそんなに関係ありません。一方のフロー配置コンテンツは何ぞというと、（HTMLのflow-contentの意味でいい気もするが）組版時まで位置決定が完全には分からないコンテンツです。

CSSでコンテンツを配置する方法は色々ありますが、この用途に馴染むのはCSS Gridです。グリッド列と行を予め規定しておくことで、格子上のポイントで配置箇所を指定できるようになるため、作成者の実感と乖離しない指定を行い易くなります。

CASE1: 表紙とその他のコンテンツ

小説で表紙ページ（本全体の表紙ではない）だけ横組の文庫本とかありますね。

   <body>
        <header>
            <div>
                <div >
                  <h1>サンプルタイトル</h1>
                  <dl>
                    <dt>著</dt>
                    <dd>日溜。</dd>
                </dl>
              </div>
            </div>
        </header>
        <aside>
            <h1>目次</h1>
            <nav>
                <ol>
                    <li>序</li>
                    <li>これまでのあらすじ</li>    
                </ol>
            </nav>
        </aside>
        <main>
        <section>
            <h2>序</h2>
            <p>「それで、私の婚活が失敗し続けている理由が自明だと君は云うが」</p>
            <p>「ええ。だって貴方、基本的に他人を薄ら見下しているから」</p>
            <p></p>
            </section>
        </main>
    </body>

header部分が表紙に表示されるコンテンツ、mainが本文、ついでにasideが目次とします。
実現に関係する箇所のCSSは例えば次のように。

 @page cover{
            margin: 0pt;
            writing-mode: horizontal-tb;
/*本文用の無名ページでヘッダを付けているため、ヘッダコンテンツを消している*/
            @top-right {
                content:'';
            }
            @top-left {
                content:'';
            }
        }
/*headerページの箇所でcoverページ呼び出し*/
  body >  header {
        page:cover;
  }

 body > header > div {
     /*CSSグリッド用の構造を調える*/   
        display: grid;
        grid-template-rows: repeat(12, 1fr);
        grid-template-columns: repeat(12, 1fr);
        width:100%;
        height: 100%;

    }
/*グリッド配置する構造。*/
    body > header > div > div {
        grid-column: 6/11;
        grid-row:3/6;
        border: double 1rem black;
    }

序以降にちゃんと文章を続ければちゃんと続いていきます。

CASE2: 半扉で章開始1ページの途中まで固定配置なコンテンツ

「章の開始ページでは章題がどーんと出ているのでヘッダに章題載せなくてもいいよね」みたいなケースでは@page:firstが活躍します。ここでは章題と章の概要説明を固定コンテンツにするとしますが、この辺りはCSSというより運用の問題な気もする。章の開始は偶奇どちらでもいいとします。

  <main>
        <section>
            <div class="chapstart"><h2 id="chap.intro">はじめに</h2>
              <p class="shortdesc">この章では、本全体の概要を述べます。</p>
            </div>
            <p>…すと答えた。</p>
            <p>親類のものから……</p>
         </section>
</main>

ページレイアウトまわり


        @page:recto {
            @top-right {
                text-align: right;
                content: string(chapter)  counter(page);
            }
        }

        @page:verso {
            @top-left {
                text-align: left;
                content: counter(page)  ;
            }
        }
        /*開始ページでは柱を空にする*/
        @page:first {
            @top-right {
                content: '';
            }

            @top-left {
                content: '';
            }

        }

/*章タイトルと概要文を持つdivをgridにする*/
 main > section > div.chapstart {
            break-before: page;    
            break-inside: avoid;
            display: grid;
            width:100%;
            height:45pvh;
            grid-template-columns: repeat(12,1fr);
            grid-template-rows: repeat(12,1fr);
        }
        
        main > section > div >h2::before {
            content: "第" counter(chapter-no) "章";
            counter-increment:  chapter-no 1;
            text-align: left;;
            font-size: smaller;
           
        }

        main > section >div > h2 {
            string-set: chapter content();
            grid-column: 3/8;
            grid-row: 3/12;
        }

        .shortdesc {
            text-align: right;
            grid-column: 7/12;
            grid-row: 5/12;
        }

章題のフォントを弄ったりグラフィックをGrid位置指定して挿入すると、それっぽくなると思います。

CASE3: 完全固定配置のページと完全フロー配置ページ（時間切れ）

ここまでの例は固定配置の内容を最初のページ（表紙）だったり章始まりで:firstを使うなどしていました。しかし、実のところ最初のページみたいなものに拘らなくてもこの方法は使えます。
「固定配置のときページの上端から下端までの統制をしたい、フロー配置のコンテンツではそうでもない」という要求は、ページ単位で責務を分けると互いの干渉を避けられるため、比較的簡便に実現ができるかもしれません。

終わりに

明日はhidarumaさんです。

組版・ドキュメンテーション勉強会Publication

組版・ドキュメントに関連する記事を投稿するコミュニティ、を予定しています。文章表現よりはマークアップ・文章構造・自動組版に焦点を絞れると他コミュニティと差別化できると思っていますが如何。