Vivliostyle の用紙サイズを変更する

前回は、Vivliostyle のドキュメントに数式を組み込みました。

今回は Vivliostyle の用紙サイズを変更してみたいと思います。用紙を変更するには、CSS のページ要素　@page を変更します。生成したプロジェクト「mybook」フォルダに基本的なCSSのページ定義が次のファイルにあります。

mybook/themes/packages/@vivliostyle/theme-base/css/partial/page.css

今回は用紙を「A5（148mm 210mm）」に設定します。上記ファイル中に記述されている "--vs-page-size: auto" を変更します。


:root {
  /* --vs-page--size: auto; */
  --vs-page--size: 148mm 210mm;
  --vs-page--width: auto;
  --vs-page--height: auto;
  --vs-page--marks: none;
 ... 省略...
  --vs-page--cover-break-after: page;
  --vs-page--cover-break-before: page;
}

変更をしたら「mybook」フォルダ直下でビルドをします。相変わらず「A network error occurred.」が出ますが無視します。


$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。
[×] A network error occurred.
... 省略  ...
[×] A network error occurred.
? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

出力がどうなったのか見てみましょう。


$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

かなり本らしくなってきました。次は画像を挿入してみたいですね。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

技術同人誌を書こう！　アウトプットのススメ技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

出版社/メーカー: インプレス NextPublishing
発売日: 2018/04/13
メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

作者: 石井葵
出版社/メーカー: インプレス NextPublishing
発売日: 2019/07/12
メディア: Kindle版

Vivliostyle の用紙サイズを変更する

関連する記事