Vivliostyle Viewerユーザーガイド

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

使い方

配布物同梱のREADME.ja.mdオンラインで読む)に記載の「使い方」手順にしたがってwebサーバーを起動してください。

viewerフォルダの下のvivliostyle-viewer.htmlがVivliostyle Viewer本体です。HTML(XML)ファイルをVivliostyle Viewerで表示するには、webサーバーが読み込める場所(上記手順にしたがってwebサーバーを起動している場合は、配布物を展開してできたフォルダの下)にそのファイル(とそのファイルから読み込まれるCSSや画像ファイル)を置いた上で、Vivliostyle ViewerのURLに #x=[表示するファイルの(Vivliostyle Viewerファイルからの相対)URL] を追加したURLをブラウザで開きます。

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

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

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

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

ZIP展開済みのEPUBファイルを表示することもできます。その場合、 #x=... のかわりに #b=[表示する展開済みEPUBフォルダの(Vivliostyle Viewerファイルからの相対)URL]/ を使用します。

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

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

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

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

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

Vivliostyleがサポートする機能

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

サンプル

固定ページサイズ

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

Page View   Spread View   Raw HTML   Source

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

Page View   Spread View   Raw HTML   Source

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

可変ページサイズ

英語 “The Malay Archipelago”

Page View   Spread View   Raw HTML   Source

日本語 横書き “高瀬舟”

Page View   Spread View   Raw HTML   Source

日本語 縦書き “高瀬舟”

Page View   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 View: ページ表示(online Vivliostyle Viewer)
  • Spread View: 見開き表示(online Vivliostyle Viewer)
  • Raw HTML: 通常HTML表示または Vivliostyle Chrome 拡張 でページ表示
  • Source: GitHub上のソースファイル(HTMLやCSS)へ