Vivliostyle CSS組版
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”
- Justification & hyphenation あり
- Page View Spread View Raw HTML Source
- Justification & hyphenation 無し(Chrome向け)
- Page View Spread View Raw HTML Source
可変ページサイズ
英語 “The Malay Archipelago”
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)へ