Vivliostyleが拓くCSS組版の可能性

Vivliostyleで市販書籍とそっくりに組んでみよう

上達のコツはやはり反復練習!ということで、第4回では、InDesignで作られた書籍のPDF(なければプリントアウト)をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。

CSS組版を覚える早道は……?

筆者は2023年にWeb技術で「本」が作れるCSS組版 Vivliostyle入門を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。

では、どうやってCSS組版を勉強すればいいのでしょうか?

ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰り返していくうちに、似せて作るコツがつかめてきて、だいたいのものは作れるようになりました。

結局のところ、反復練習に勝るものはないということかもしれません。

そこで今回は、市販書籍のPDFをまねて、CSS組版で再現する流れやコツを、私たち(リブロワークス部)が日常的に行っているフローを参考にご説明します。

ものさしツールで紙面を測る

まず、まねをするための書籍のPDFを用意します。PDFがなければ、紙面を印刷したものかスキャン画像でも大丈夫です(その場合は、この先出てくる「ものさしツール」「本物のものさし」に読み替えて進めてください⁠⁠。

当然ですが、市販の書籍のデザインをまねて他の書籍で使うと問題になるので、そこは避けてください。以下の例は、リブロワークス部のデザイナーが作ってボツった紙面デザインです。

図1 サンプルのPDF
図1

Acrobat Readerの「ものさしツール」を使って、次の情報を取得します。

  • 判型(はんがた、はんけい⁠⁠:本全体のサイズ
  • 版面(はんづら⁠⁠:余白を除いた本文領域
  • 本文の文字サイズ:1文字の大きさ
  • 本文の行送り:1行の高さ
図2 紙面設計
図2

文字サイズ、行送り、版面の幅と高さには、次の関係があります。

  • 本文の文字サイズ × 1行文字数 = 版面の幅
  • 本文の行送り × 1ページ行数 = 版面の高さ

ものさしツールではどうしても誤差が出るので、測定値を上の式に当てはめて、デザイナーが本来意図している設定値を予測しないといけません

まずは、本文の文字サイズを調べてみましょう。ものさしツールは、Acrobat Readerの「すべてのツール⁠⁠→⁠オブジェクトを測定⁠⁠→⁠ものさしツール」をクリックして表示します。

図3 「ものさしツール」を表示する
図3

日本の市販書籍の多くは、文字サイズと行送りに級数(Q数)という単位を使っています。1級は4分の1ミリで、ミリ単位との相性がいいというメリットがあります。

ものさしツールで文字の級数を調べたいときは、4文字分の長さを測ります(大昔から使われている伝統のワザです⁠⁠。4文字の長さが13ミリであれば、1文字のサイズは13級です。

図4 4文字分を測る
図4

版面の幅も測ってみましょう。

図5 版面の幅
図5

測定値が微妙に割り切れないので、計算してデザイナーの設定値を推測しましょう。13級は3.25ミリなので、それに何文字掛けると、測定した版面の幅に近くなるか計算します。

  • 3.25ミリ × 1行文字数 ≒ 139.84ミリ

Excelで計算した感じでは、43文字が一番近いようです。

  • 3.25ミリ × 43文字 = 139.75ミリ

同じように行送りも調べます。行送りも級数(正確には歯数と呼ぶのですが、級数と同じ4分の1ミリです)なので、4行分の高さを測ります。

行送りを測るときは、最終行の余白まで含める必要があるので、1行目の先頭から5行目の先頭までを測るようにしてください。次の図では21.80ミリと出ていますが、デザイナーは端数を避けることが多いので、おそらく22級でしょう。

図6 4行の高さを測る
図6

版面の高さも測っておきます。例によって端数が出るので、式に当てはめてキリがいい高さを割り出します。

図7 版面の高さ
図7
  • 5.5ミリ × 40行 = 220ミリ

忘れずに判型も測っておきましょう。シンプルに片ページの幅と高さを測ります。

図8 判型を測る
図8

トンボ付きのPDFの場合は、トンボの内側を測るようにしてください。

図9 トンボ
図9

印刷で使われる用紙サイズにはA5やB5といった規格があるので、それに合うよう補正します。今回の場合はB5正寸(182×257ミリ)でした。ちなみにIT書では、幅が182ミリで高さだけ257ミリより短くしたB5変形という判型もよく使われるので、そこだけ注意が必要です。

ここまで読んで、カンのいい方は「この方法で調べられないデザインもあるのでは?」と気づいたかもしれません。今説明した方法は、「デザイナーが端数を設定しない」ことを前提としています。しかし、デザイナーの設定値が実際に13.1級の場合も、絶対にないわけではないのです。

筆者の経験では、多くのデザイナーは計算しやすい割り切れる数を好みますが、例外もあります。その場合は、印刷して見比べながらがんばって補正するか、設定値をデザイナーに聞くしかありません。

測定値に合わせてCSSを設定する

本文領域の情報が取れたので、CSS組版に反映していきましょう。Vivliostyleでも作業環境はいろいろあって何を使うべきか迷うところです。

何を使ってもいいのですが、CSSそのものの編集を目的とする場合、その挙動がわかっていないとコントロールしにくいので、自分でフルスクラッチすることをおすすめします。今回はリブロワークスで普段業務に使っている、自家製のVSCode拡張機能と、同じく自家製のフォーマットCSSを利用します。

VSCode拡張機能はVScodeのMarketplaceで公開しています。

図10 vfm_mdbp_vscode
図10

フォーマットCSSはGitHubで公開しています。

図11 CSSkumihan_freeformats
図11

以降は次の準備が終わっているものとして解説します。

  • パソコンにNode.js v16以上と最新のVivliostyleをインストール
  • VSCodeにvfm_mdbp_vscodeをインストール
  • formatE_editors1.x.zipをダウンロードして展開

formatE_editors1.x.zipを展開し、VSCodeの「ファイル⁠⁠→⁠フォルダーを開く」機能で開いてください(⁠⁠フォルダーを開いておく」ことが重要なので忘れずにお願いします⁠⁠。sample.mdを開き、エディタ上を右クリックして「これプレビュー」を選択すると、Vivliostyleによるプレビューが表示されます。

図12 プレビューを表示
図12
図13 プレビューを表示
図13

これを先に測定しておいたPDFに近づけていきます。自家製フォーマットは、基本体裁をpage_settings.cssに、それ以外の主要なスタイルをmain.cssにまとめています。まずpage_settings.cssを開いてください。

図14 page_settingsを開く
図14

基本の設定値はCSS変数で指定できるようにしています。それらに本文の文字サイズと行送り、判型サイズ、文字数と行数を指定します。

:root {
  /* 基本体裁 */
  --base-font-size: 13Q;    /*文字サイズ13Q*/
  --base-line-height: 22Q;  /*行送り22Q*/
  --page-width: 182mm;      /*判型幅182mm*/
  --page-height: 257mm;     /*判型高さ257mm*/
  --letters-per-line: 43;   /*1行文字数43字*/
  --lines-per-page: 40;     /*1ページ行数40行*/
  --page-margin-top: 18mm;  /*上マージン18ミリ*/
  --page-margin-xshift: 0mm; 
  --column-font-size: 12Q; 

page_settings.cssを上書き保存すると、プレビューが更新されます。これで基本体裁はPDFとほぼ同じになったはずです。

図15

節見出しでイメージを整える

多くのIT系書籍の場合、デザインの大まかなイメージは節見出しのパーツが左右します。そのため、ここをちょっと力を入れて設定するだけで、実際の書籍とそっくりに見えます。

Acrobat Readerで節見出しの部分を可能な限り大きく表示し、画面キャプチャーを撮ります。このキャプチャーを節見出しの背景画像として使用します。

図16 節見出しをキャプチャーする
図16

今回は雰囲気を似せるだけでよしとしますが、この背景画像を最終成果物として利用する場合は、300dpi以上の解像度が必要です。幅が182ミリの場合、300dpiなら幅2150ピクセル、350dpiなら幅2508ピクセルとなります。

画面ショットを適当なグラフィックスソフトで切り抜きます。文字を残したものと消したものの2種類を作りましょう。画像はcssフォルダ内のimgフォルダに格納します。

図17 画像を加工
図17
図18 保存した画像
図18

節見出しはh2要素なので、main.css内のh2要素に関するスタイルを探して編集します。節見出しの文字アリ画像をh2::before疑似要素に対して設定します。今回の画像はページ幅いっぱいに広げるので、CSS変数の--page-widthを使うか182mmを指定してください。高さはものさしツールで調べます。

/* 節番号 */
h2::before {
  content: counter(section-counter, decimal-leading-zero);
  color: #585656;
  counter-increment: section-counter;
  font-size: 48Q;
  line-height: 14mm;
  text-align: center;
  /* padding-block-start: 8mm; */
  /* padding-inline: 5% 80%; */

  /* 背景画像 */
  background-color: #88ddff;
  background-image: url("img/section-header_tmp.png"); /*画像ファイルを参照*/
  background-size: var(--page-width);   /*背景画像の幅を設定*/
  background-repeat: no-repeat;
  inline-size: var(--page-width);       /*h2::before疑似要素の幅を設定*/
  block-size: 79mm;                     /*h2::before疑似要素の高さを設定*/
  position: absolute;
  inset-inline-start: -20mm;
  inset-block-start: 0mm;
  z-index: -1;
}

単純に背景画像を貼ると次のようになります。

図19 背景画像を貼ったところ
図19

背景画像の位置をずらします。formatE_editorsの初期状態では、疑似要素の基準位置がh2要素になっているので、position: relative;を探してコメントアウトします。そうすると、版面の左上が疑似要素の基準になります。

h2 {
  break-before: page;
  font-size: 36Q;
  line-height: 42Q;
  inline-size: 10em;
  block-size: 2lh;
  margin-block: 4mm 11mm;
  margin-inline-start: 20mm;
  display: grid;
  align-content: center;
  /* position: relative; ★ここをコメントアウト*/
  /* string-set: section-title content(), section-number content(before); */
}

さらにh2::before疑似要素側で、inset-inline-startinset-block-startを調整して画像がページ幅に合うよう調整します。

h2::before {
……中略……
  /* 背景画像 */
  background-color: #88ddff;
  background-image: url("img/section-header_tmp.png");
  background-size: var(--page-width);
  background-repeat: no-repeat;
  inline-size: var(--page-width);
  block-size: 79mm;
  position: absolute;
  inset-inline-start: -21mm;   /*調整*/
  inset-block-start: -18mm;    /*調整*/
  z-index: -1;
}
図20 背景画像の位置を調整
図20

h2h2::beforeの設定値をいじって、節タイトルと節番号の位置を合わせます。文字色を一時的に赤にすると合わせやすくなります。

h2 {
  break-before: page;
  font-size: 40Q;    /*文字サイズ変更*/
  line-height: 50Q;  /*行送り変更*/
  inline-size: 10em;
  block-size: 2lh;
  margin-block: 4.5mm 20mm;   /*上下マージンで節タイトルの位置を調整*/
  margin-inline-start: 22mm;  /*左マージンで位置を調整*/
  display: grid;
  align-content: center;
  color: #f00;  /*文字を赤に*/
  /* position: relative; */
  /* string-set: section-title content(), section-number content(before); */
}
/* 節番号 */
h2::before {
  content: counter(chapter-counter) "-" counter(section-counter); /*章番号-節番号の形に変更*/
  color: #585656;
  counter-increment: section-counter;
  font-size: 44Q; /*大きさ調整*/
  line-height: 14mm;
  text-align: center;
  color: #f00; /*文字を赤に*/
  padding-block-start: 27mm;  /*上パディング調整*/
  padding-inline: 0% 96%;     /*左右のパディング調整で位置を合わせる*/
  ……後略……
}

この調整作業は、あちこちの値をいじるので少し面倒ですが、筆者はこの作業が好きです。ピタリと合うと気持ちいいですし。

図21 文字の位置調整
図21

最後に節リード文を設定します。節リード文はdiv要素で囲んで、絶対配置で画像と同じ位置に来るよう調整します。

ここではVFM第2回記事参照)に将来追加される「かもしれない」といわれるフェンス記法で指定します。フェンス記法は未実装なので、vfm_mdbp_vscode側の単純な正規表現置換で実現しています。

## 論理回路から加算器は飛躍しすぎ?

:::{.section-lead}
ここでは、〇〇〇のプログラムを作成して、実行するまでの流れを解説します。最初にエディターでプログラムを書いて、コマンドプロンプトを実行するだけで、すぐに結果を確認できます。
:::

main.cssに節リード用のスタイルを追加します。

.section-lead {
  position: absolute;
  color: red;
  inset-inline-start: 9mm;
  inset-block-start: 41mm;
  inline-size: 35.5em;
  line-height: 20Q;
  text-align: justify;
}
図22 節リードのスタイルを追加
図22

節リード文を絶対配置にすると、本文がせりあがるので、h2の下マージンを広げて調整します。

h2 {
  break-before: page;
  font-size: 40Q;
  line-height: 50Q;
  inline-size: 10em;
  block-size: 2lh;
  margin-block: 4.5mm 40mm;   /*下マージンを40ミリに*/
  margin-inline-start: 22mm;
  display: grid;
  align-content: center;
  color: #f00;
}

これでおおむね完成です。

図23 おおむね完成
図23

最後の確認を忘れずに

これで画面上ではおおむね完成したように見えます。しかし出版業界には、⁠印刷していないものは信用してはいけない」という鉄則があります。プリンタがあれば印刷して確認しましょう。

vfm_mdbp_vscodeではMarkdownファイルを右クリックして「これビルド」を選択すると、PDFを書き出せます。PDFを書き出し、原寸の見開きで印刷します。Vivliostyleは単ページPDFしか書き出せないので、Acrobatで並べて印刷します。

図24 PDF書き出し
図24
図25 見開き印刷
図25

元のPDFも印刷して並べて見比べたり、重ねて明りに透かして比較したりしてみましょう。原稿編集用の仮組では、1ページの文字数・行数さえ合っていればいいので、見た目を完璧に合わせる必要はありません。お好みのコダワリで納得するまで調整してみてください。

図26 印刷したものを見比べよう
図26

2024年5月に技術評論社から刊行される次の2冊は、どちらも本文をVivliostyleで制作し、入稿まで進めています。

デザイン検討はInDesignで行いましたが、そのあとのフローはこの記事とほとんど同じです。 formatE_editors1.xをもとに、それぞれの書籍デザインに合わせてリブロワークスのデザイナーがカスタマイズしました。

編集用の仮組に比べたときの大きな違いは、⁠背景画像などの作り込みの精度」と、⁠うまくいかないときに、何としてでも解決しようという姿勢」だけです。場数を踏んでいけば、自然と Vivilostyleで「できること」⁠できないこと」⁠できるけど手間がかかって見合わないこと」 が見えてきて、編集用仮組でも技術同人誌でも、商業出版物でも思い通りに作れるようになる……と思います。

ちなみに、上記2冊はどちらも4Cオフセット印刷だったのですが、Vivliostyleで書き出したPDF(RGB)をそのまま入稿し、印刷会社にてRIP処理でCMYK変換してもらっています。入稿で悩む人も多いという噂を聞いたので、ここに付記しておきます。

おすすめ記事

記事・ニュース一覧