Vivliostyle の用紙サイズを変更する [Vivliostyle]
前回は、Vivliostyle のドキュメントに数式を組み込みました。
今回は Vivliostyle の用紙サイズを変更してみたいと思います。用紙を変更するには、CSS のページ要素 @page を変更します。生成したプロジェクト「mybook」フォルダに基本的なCSSのページ定義が次のファイルにあります。
mybook/themes/packages/@vivliostyle/theme-base/css/partial/page.css
今回は用紙を「A5(148mm 210mm)」に設定します。上記ファイル中に記述されている "--vs-page-size: auto" を変更します。
変更をしたら「mybook」フォルダ直下でビルドをします。相変わらず「A network error occurred.」が出ますが無視します。
出力がどうなったのか見てみましょう。
かなり本らしくなってきました。次は画像を挿入してみたいですね。
今回は 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
コメント 0