Vivliostyle Viewer ユーザーガイド

Vivliostyle Viewer は、HTML+CSS文書を組版・表示するWebアプリケーションです。

使い方

Vivliostyle Viewer をローカル環境で利用する場合は、配布パッケージに同梱の README.ja.md(オンラインで読む)に記載の「使い方」の手順にしたがってWebサーバーを起動してください。

公開されているオンラインの Vivliostyle Viewer (https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html) も利用できます(これは常に開発最新版に更新されてます)。

viewer フォルダの下の vivliostyle-viewer.html が Vivliostyle Viewer 本体です。このURLに、#x=… のようなフラグメントの形式を付加して、表示するHTMLファイルを指定します。

Vivliostyle Viewer で表示するHTMLファイルの指定

HTMLファイルを Vivliostyle Viewer で表示するには、Webサーバーが読み込める場所(上記手順にしたがってWebサーバーを起動している場合は、配布パッケージを展開してできたフォルダの下)にそのファイル(およびそのファイルから読み込まれるCSSや画像ファイル)を置いた上で、次の形式にしたURLをブラウザで開きます:

⟨Vivliostyle Viewer のURL⟩#x=⟨表示するファイルのURL (Vivliostyle Viewer からの相対)⟩

注: Vivliostyle Viewer 本体とは別ドメインの文書を読み込もうとする場合、文書があるWebサーバーの設定によって、文書が読み込めない場合があります。文書を読み込ませるためには、サーバー側で CORS (Cross-Origin Resource Sharing)の設定が必要です。

注: 数式の表示(MathMLおよびTeX形式に対応)にインターネット上のJavaScriptライブラリー(MathJax)を使用するため、文書に数式が含まれる場合はインターネット接続が必要です。

例: HTMLファイル samples/gon/index.html を表示する場合:

テキストボックスに文書ファイルのパス(または URL)を入力すると、その文書を表示する Vivliostyle Viewer のURLを下に表示します:

EPUBを表示するには

ZIP展開済みのEPUBファイルを表示することもできます。その場合、 #x=… のかわりに次の形式を指定します:

#b=⟨表示する展開済みEPUBフォルダのURL (Vivliostyle Viewer からの相対)⟩/

例: test.epub/ フォルダに展開済みのEPUBファイルを表示する場合:

http://localhost:8000/viewer/vivliostyle-viewer.html#b=../test.epub/

テキストボックスにEPUBフォルダのパス(またはURL)を入力すると、その文書を表示するVivliostyle ViewerのURLを下に表示します:

複数のHTMLファイルを指定するには

複数のHTMLファイルを Vivliostyle Viewer でまとめて表示するには、EPUBの形式にして上記の方法で指定するか、または、次のように直接複数のHTMLファイルを指定します:

#x=⟨最初のHTMLファイルのURL⟩&x=⟨2番目のHTMLファイルのURL⟩…&x=⟨n番目のHTMLファイルのURL⟩

見開きページ表示を指定するには

Vivliostyle Viewer は、表示領域の横幅が大きいとき(高さの1.45倍以上)、自動的に見開きページ表示にします。これを変えるには次の指定をURLに追加します:

&spread=true (常に見開きページ表示)
&spread=false (常に単ページ表示)
&spread=auto (自動切り替え=デフォルト)

Vivliostyle Viewer の設定パネル(画面右上のアイコン [Setting] をクリックして開く)でも、ページ表示モードの変更ができます。

スタイルシートを指定するには

HTMLファイルに指定されているスタイルシートに加えて、追加のスタイルシート(CSSファイル)を使うには、次の指定をURLに追加します:

&style=⟨スタイルシートのURL (Vivliostyle Viewer からの相対)⟩

この方法で指定したスタイルシートは、HTMLファイルで指定されているスタイルシートと同様(制作者スタイルシート)の扱いで、よりあとに指定されたことになるので、CSSのカスケーディング規則により、HTMLファイルからのスタイルの指定を上書きすることになります。

これに対して、次のようにしてユーザースタイルシート(スタイル指定に !important を付けないかぎり、制作者スタイルシートのスタイル指定を上書きしない)の指定もできます:

&userStyle=⟨ユーザースタイルシートのURL (Vivliostyle Viewer からの相対)⟩

複数個の &style= あるいは &userStyle= を使うことで、複数個のスタイルシートを指定できます。

データURLも利用できます。例えば:

&style=data:text/css,html{writing-mode:vertical-rl}

Vivliostyle Viewer から印刷・PDF出力を行うには

ブラウザの印刷・PDF出力機能を利用できます。例えば、Google Chrome で PDF に出力するには、メニューから「印刷」を開き、出力先として「PDFに保存」、背景のグラフィック ON と指定して「保存」します。

Vivliostyleがサポートする機能

VivliostyleがサポートするCSSの機能については “Features supported by Vivliostyle”(英語)を参照してください。

その他のドキュメント

その他のドキュメントは Vivliostyle ドキュメント にあります。

サンプル

固定ページサイズ

和文 文庫本フォーマット『ごん狐』

Page/Spread View   Raw HTML   Source

和文 段組フォーマット『白馬岳』

Page/Spread View   Raw HTML   Source

欧文 Web Fonts サンプル “Wood Engraving”

可変ページサイズ

英語 “The Malay Archipelago”

Page/Spread View   Raw HTML   Source

日本語 横書き “高瀬舟”

Page/Spread View   Raw HTML   Source

日本語 縦書き “高瀬舟”

Page/Spread View   Raw HTML   Source

Adaptive Layout

“Apollo 8”

Page View   Spread View   Raw HTML   Source

“Candle”

Page View   Spread View   Raw HTML   Source

“Advanced Adaptive Layout”

Page View   Spread View   Raw HTML   Source

(from Peter Sorotokin's Adaptive Layout)

  • Page/Spread View: 自動見開き表示(online Vivliostyle Viewer)
  • Page View: 単ページ表示(online Vivliostyle Viewer)
  • Spread View: 見開き表示(online Vivliostyle Viewer)
  • Raw HTML: 通常HTML表示
  • Source: GitHub上のソースファイル(HTMLやCSS)へ

その他のサンプル

その他のサンプルは Vivliostyle Samples にあります。