月別アーカイブ: 2023年4月

[CSS組版]ページ番号のリセット

今回紹介するのは「表紙を同一のHTMLから生成するとき、
表紙のページ番号はカウントしたくない」という要望の実現についてです。誤りがあれば、ご指摘いただければ幸いです。

組版にはAntenna House CSS Formatter V7.3MR1を利用しています。スクリーンショット画像の、ページ番号以外の本文内容について画像によって差異がありますが、記事を作りながら都度組版をしていたためで、本題には支障ありません。

CSSページ組版でページ番号を参照するには、content: counter(page)と指定します。

リセット未指定でのページ番号カウントを見てみましょう。

@page {
    size: JIS-B5 portrait;
    margin: 2cm;
    @bottom-center {
        content: counter(page);
        font-size: 24pt;
        font-variant: oldstyle-nums;
    }
}

@pageルールで全体のページレイアウトを設定しています。@bottom-centerでページ番号を表示するように指定していますね。

1枚目のページに「1」、2枚目のページに「2」が振られています。

pageカウンタをリセット

1枚目を表紙ページとして、2枚目のページに「1」が振られるようにしてみましょう。

ところでCSSのカウンタはページ組版に限らない汎用的な仕組みです。pageはページ組版のとき、定義済みのカウンタ名として存在している状態です。
つまり、カウンタリセットの仕組みを使うことで、ページ番号についてもリセットが可能です。

... {
      counter-reset: page 1;
     }

できることが分かったところで、次の問題、すなわち「どのセレクタ(要素・ルール)にリセットを記述するか」に移ります。

今回は「表紙ページ」と「それ以外のページ」という分け方ができます。「表紙用のページレイアウト」、
「本文用のページレイアウト」が用意できると嬉しいわけです。@pageルールでは、そういう処理が書けます。

@page {...}
@page mainmatter {
  counter-reset: page 1;     
}
#cover {
    break-after: always;  
}
div#mainmatter {
    page: mainmatter;
}
<div id="cover">
    <h1>[CSS組版]ページ番号のリセット</h1>
    <p>今回紹介するのは...</p>
</div>
<div id="mainmatter">
    <p>CSSページ組版でページ番号を参照するには、...</p>
</div>

上手くいった……と油断するのはまだ早いです。このままでは、@page mainmatterの対象ページが切り換わる度にpageは1にリセットされるのです。

リセット対象のページを追加で条件付けすることで解決できます。@page mainmatter:firstを追加することで、「mainamtterページレイアウトが使用される最初のページでpageを1にリセットする」という処理になります。

 @page mainmatter:first {
    counter-reset: page 1;     
}

期待する出力になりました。

表紙のページレイアウトからページ番号を削除する

ついでに、表紙ページからはページ番号表示を外しておきます。

@page cover {
    @bottom-center {
        /*bottom-centerのコンテンツを上書き*/
        content:"";
    }
}
#cover {
    /*coverページレイアウトを適用*/
    page: cover;
    break-after:always;
}

参考




瞬簡PDF 編集 2024
かんたん操作でPDFを自由自在に編集


瞬簡PDF 変換 2024
PDFをOffice文書へ高精度変換

目次 vs しおり vs アウトラインの微妙な関係

ここでは、「目次」と「しおり」と「アウトライン」という長文文書のパブリッシングに重要な機能について考えてみます。

目次」とは、冊子本などの最初の方にある、あのページです。「目次」といえば、だれでもイメージが湧くのではないかという位ポピュラーな存在。冊子本で目次のないものは少ないのではないでしょうか。

しおり」という言葉で思い浮かべるものは人によって違うかもしれません。ここでは、PDFファイルのしおりのことを示します。しおりとはどんなものかを知らない人は、次の解説文を読んでみてください。

PDF資料室: PDFのしおりってなに? どうやって作るの?

アウトライン」いう言葉では、人によって思い浮かべる内容は、「しおり」よりもさらに多様かもしれません。ここでは、Microsoft Wordのアウトライン機能を指し示します。アウトラインとは何か、は次のWebページをご参照いただくと良いでしょう。

Antenna House Office Servers資料室: Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

「目次」と「しおり」と「アウトライン」はかなり似通った存在ですが、しかし、微妙に違う点もあります。

そこでざっくりとした比較表を作ってみました。3者が微妙に異なるのは、たぶん、素性が異なるためではないかと思うのですがどうでしょう。特に、アウトラインは、アウトライン編集機能から由来することで、編集操作を伴っています。

PDFのしおりはなんとなく、後から取ってつけたような印象もあります。

比較項目 目次 しおり アウトライン
主な対象 冊子本。冊子本のPDF版(デジタル冊子本) PDF Word文書
英語 TOC (Table of Contents) Book Mark(ISO 32000では、document outlineとなっている) Outline Level
場所 冊子の本文の手前(前付け)に配置する しおりのWindow アウトラインWindow内
役割 本の内容構成を章・節レベルで把握できる PDFファイルのナビゲーション Word文書の編集機能の一部。ツリー編集操作が付随する。
指し示す先 本の内部(分冊のとき、例えば上巻に下巻の目次が配置されることもある。 指し示す先はPDFファイルの内部、別のPDFファイルの内部、Webページなど自由度が高い Word文書の内部
行き方 冊子本ではノンブルで行先を示す。デジタル冊子本ではリンクがあると便利。双方向リンクがあると特に便利。 リンク アウトラインは編集用途なので行き方は二の次。
本文との関係 取り外しはできない PDF編集ツールがあれば、脱着可能、本文から参照しない。PDFリーダー依存。 脱着できない。本文に設定する。表示を別ウィンドウ

冊子本のナビゲーションはページ番号(ノンブル)を使用する。一方、デジタル冊子本や、PDFではナビゲーションにはノンブルよりもリンクを使うのは便利である。ノンブルはページ数の増減に弱いが、リンクはページ数の増減があっても問題が生じないという自由さがある。




瞬簡PDF 作成 2024
ドラッグ&ドロップでPDF作成


HTML on Word
WebページをWordで作る!