Vivliostyle 最新版(2019.1以降)への更新

[MurakamiShinyu]

review-and-css-typesetting で現在使用されているVivliostyleは

review-and-css-typesetting/args.mk

Line 3 in 69899c6

VIVLIOSTYLE_VERSION := 2018.12.103

で 2018.12.103 と設定されてます。
これを最新版 （現時点で 2019.1.105）にできたらと思い、少し試してみました。
（2018.12.xxx から 2019.1.xxx になって新しくなったところについては次を参照してください: https://vivliostyle.org/ja/blog/2019/02/27/vivliostyle-2019.1.101-released/ ）

まず review-and-css-typesetting を git clone して、そのまま make setup、make browser を実行すると、「Re:VIEW+CSS組版 環境構築」が Vivliostyle Viewer 2018.12.103 で表示されますが、その文書URL（ローカル）を、常に最新版に更新されている公開オンライン Vivliostyle Viewer に次のように指定したところ、最新版での結果を確認して、旧版での結果と比較することができました:

http://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#b=http://0.0.0.0:8989/book.html&renderAllPages=true

このスクリーンショットのように、#b= パラメータでHTML文書をしていした場合、目次パネルが出るようになりました。

以下、いくつか気がついた点です：

vw/vh 単位が正式サポートされた影響

旧版での結果では「Re:VIEW+CSS組版 環境構築」が１行になっていたのが、途中で改行されるようになりました。
これは、articles/style.css で

review-and-css-typesetting/articles/style.css

Lines 15 to 17 in 69899c6

	section#s_book {
	width: 100vw;
	height: 100vh;

のように vw/vh 単位が使われていて、Vivliostyleで CSS Paged Media でのvw/vh単位のサポート vivliostyle/vivliostyle.js#507 は 2019.1.101 からで、それまでとは結果が異なるためです。（vw/vh は @page の margin/border/padding を含まない内容領域の大きさを基準とします。これが旧版では、ページ全体の大きさ基準になってました）

この 100vw がページ余白を除いたものになる上に、そのあとのタイトルブロックをセンタリングしているところ

review-and-css-typesetting/articles/style.css

Lines 31 to 32 in 69899c6

	left: 50%;
	transform: translateY(-50%) translateX(-50%);

の left: 50% によって、ブロックの有効な幅がかなり狭くなってしまうので、タイトルの途中での行の折り返しが発生しています。

Vivliostyle Viewer の目次パネル展開／折りたたみ機能を活かすには

nav 要素内の目次項目のリスト（ol または ul 要素）をネストさせて目次の階層を作ると目次パネルで、展開／折りたたみが可能な目次になります。

参考：Vivliostyle CSS組版ちょっと入門サンプル
https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/
の index.html など。
（この入門サンプルについては、「Vivliostyle で本を作ろう Vol.1」 に掲載の記事「Vivliostyle Viewer で CSS 組版ちょっと入門」で解説してます）

章タイトルを柱にするには

「柱に章・節を表示したい」 #5 の完全な解決ではないですが、章ごとなど複数のHTMLファイルに分けた場合に、個別HTMLの title 要素の内容を env(doc-title) という形式で参照することができるようになりました:
vivliostyle/vivliostyle.js#512

前述「Vivliostyle CSS組版ちょっと入門サンプル」に使用例があります。

より完全な解決は、文書内の見出しなどから柱に表示するタイトルをもってくるCSSの機能（https://drafts.csswg.org/css-gcpm-3/#running-headers-and-footers など） が実装されることですので、みなさま、開発へのご支援よろしくお願いします。