カスタムCSSを使ってみる

先日公開したnovel-writer 2.1.0のカスタムCSSを使って、冊子の本文部分を作成してみましょう。

まず原稿を用意します（もちろん、書き終わっていますよね！）。novel-writerはVisual Studio Codeで開いたフォルダー（ワークスペースと呼びます）内のテキストファイル（.txtまたは.md）を原稿として扱います。特に、「📁Draft」または「📁原稿」という名前のフォルダーがあるときは、その中にあるテキストファイルだけを、本文の原稿として扱います。原稿はファイル名の順番ごとに読み込まれます。シーンごとに分割してフォルダーの中に収めてしまっても構いません。

スクリーンショットの例では、縦書きプレビューの行あたり文字数は16に設定しています。画面が小さなノートPCを使っているときや、新聞のような短い行の媒体で発表する時には申し分のない設定です。このままPDFを書き出すと以下のように二段組したA5版のPDFを生成します。ページ下部に生成される柱（ハシラ）には、ページの行数と一行あたりの文字数が書き込まれます。

いつか行番号をつけられるといいなあ、と思っているのですが……それはともかく、入稿するテキストに添付する組版の見本としては申し分のないPDFです。ルビも傍点も、字下げも確認できます。でも、会議で配布する冊子や台本、同人誌、個人出版用の版下としては物足りないところがあります。判型は自由に決めたいし、文庫本や単行本のように39文字、42文字で組みたいですね。柱ももう少し見栄えの良いものにしたいところです。

そこでカスタムCSSの出番です。ワークスペースに「📁css」を作成し、その中にprint.cssというファイルを作ってください。このファイルがあると、novel-writerはPDFを作成するときに、このCSSを使うようになります。

print.cssが空の状態でPDFを生成すると、下のように、横書きで、ページサイズも決まっていないPDFが生成されます。VS Code内の縦書きプレビューと、PDF作成で使うCSSが分離されたことがわかります。

それでは、適切なCSSを書き込んでプレビューを行ってみましょう。雛形になるprint.cssは、GitHubからダウンロードできます。

• GitHubのnovel-writerプロジェクト内にあるprint.css

リンクを開くと、novel-writerの内部で使用しているものから生成したprint.cssのページが開きます。cssの内容をコピーして、先ほど作ったprint.cssにペーストしてください。

HTMLやCSSに詳しい方でもあまり目にしない @pageというメディアが指定されています。これが、PDFを作成するために必要なページメディアの指定です。この雛形を配置して、本文のPDFを作成すると以下のようにA5版の縦書きPDFが作成されます。

雛形のprint.cssは、本文文字サイズ16Q（日本語DTPで使う単位です。1Q=0.25mm）、一行42文字、一ページ18行のベタ組（文字と文字が固定ピッチで並びます）、版面（本文が組版されるエリア）の上アキが15mm、小口（ページの外端）アキが10mmでレイアウトされたA5版のPDFを生成します。ハシラは「p – 1」のようにフォーマットされます。

このチュートリアルでは、文庫の組版を作ってみましょう。

文庫本のサイズは幅105mm、高さ156mmです（違う？　と思った人は本棚の文庫本を測ってみてください。150mmぐらいの文庫本もありますが、156mmの文庫本を強く強くお勧めします）。版面の上アキは14mm。print.cssの@pageを編集します。

@page {
  /* PDFサイズ指定 */
  size: 105mm 156mm;
  /* 版面（本文が組版される領域）の幅（文字数×行幅×行数＋約物用のアキ） */
  block-size: calc(16Q * 1.75 * 16 + (16Q * 0.4));
  /* ページ端から版面までの上アキ　左右は@page :left/rightで指定します */
  margin-top: 14mm;
  margin-left: auto;
  margin-right: auto;

  /* 以下、マージンボックスに継承される */
  font-size: 16Q;
  font-family: "游明朝", "YuMincho", serif;
  vertical-align: top;
}

判型はよく見かける文庫本になりましたが、文字のサイズがA5用なので、アフレてしまっています。文字サイズと行送りを修正しましょう。文庫本の文字サイズは12Q、行送りは1.6です。CSSで、16Q、1.75となっているところを12Q、1.6に変更しましょう。

CSSを修正してPDFを作成（プレビュー）すると、とても見慣れたレイアウトが現れます。このまま印刷しても大丈夫な感じですね。もう少し詰めていきましょう。ハシラをページの上に配置して、タイトルをつけましょう。ページメディアでハシラは修正できます。

@page :left {
  /* ページの小口アキ。ノド側でも指定できます */
  margin-left: 10mm;
  /* ページの柱。下部に */
  @top-left {
    content: "p" counter(page) "　　モラトリアム";;
    margin-left: 12Q;
    margin-top: 0mm;
    width: calc(12Q * 1.6 * 16);
    writing-mode: horizontal-tb;
    font-size: 10Q;
  }
}

本文の組版が出来上がりました。立派なものです。それでは、すべての原稿を連結して全文のPDFを作ってみましょう。VS CodeでCommand+Shift+P（WindowsやLinuxではCtrl+Shift+P）でコマンドパレットを表示して、novelと入力し、原稿のコンパイルを実行してください。ワークスペース内のすべての原稿が連結されて「📁publish」の中に保存されます。ファイル名は、ワークスペースのフォルダー名が使用されます。

連結されたテキストをエディターに表示してPDFを生成すると、すべての原稿が組み上げられたPDFが生成されます。

最後に、タイトルをつけるとしましょう。novel-writerは見出しのレイアウト機能が物足りないので、HTMLのタグを書き込むことになります。原稿の中に書き込んでも良いのですが、原稿を汚したくはないので、00_前付け.txtというファイルを作って、そこにタイトルを書くことにしましょう。

<h1>モラトリアム</h1>
<div class="author">藤井太洋</div>

書き込むのはお馴染みのHTMLです。右揃えにしたい著者名はdiv要素に入れて、class名をつけておきます。このままPDFを作ると、デフォルトのスタイルシートが働いてしまうので、少し修正します。print.cssのh1と.authorを探して以下のように変更しましょう。

h1 {
  /* フォント */
  font-weight: Extrabold;
  /* フォントサイズ */
  font-size: 24Q;
  /* 字下げ */
  text-indent: 0;
  /* 直後の改ページ・改段禁止 */
  page-break-before: avoid;
  page-break-after: avoid;
  line-height: 42Q;
  letter-spacing: 0.25em;
}

...

/*著作者*/
.author {
  font-size: 16Q;
  text-align: right;
  height:calc(12Q * 42);
  margin-block-end: 1.6em;
}

タイトルの文字は4分アキ、著者名は下揃えになりました。このように、本文中に書き込むHTMLの要素をCSSでコントロールすることも可能になりました。フォントも、自分のコンピューターに入っているフォントを指定できますし、色を扱うことも可能です。

ついでに画像も入れてみましょう。ワークスペースに「📁images」を作り、中にこのサイトのファビコン（favicon.png）を入れます。00_前付け.txtに画像を挿入して、原稿をコンパイルし、PDFを作成してみましょう。

00_前付け.txt

<div class="pop-icon"><img src="./images/favicon.png"></div>
<h1>モラトリアム</h1>
<div class="author">藤井太洋</div>

--
print.cssに以下を追加

.pop-icon{
  height:calc(12Q * 42);
  text-align:center;
}

.pop-icon img{
  height: 15mm;
}

画像を挿入することもできますね。一気に書籍らしくなってきました。

今後発表するnovel-writerにはPDF-Xの出力やグレースケール化なども対応していきたいなと思っていますが、現在のバージョンのnovel-writerで作成したPDFでも、多くの印刷屋さんは受け取って印刷してくれるかと思います。

これが今回搭載したカスタムCSSの使い方です。皆さんの執筆活動が充実したものになりますように。