Vivliostyle CSS組版
目次
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 本体です。
パラメータを指定しないで Vivliostyle Viewer を開くと、文書URLの入力欄（“Input a document URL”）と次のように使い方の説明が表示されます：
サポートされている文書の種類：
- (X)HTML文書＋ページメディア用のCSS
- Web出版物（複数のHTML文書からなるコレクション）：プライマリーエントリーページまたはマニフェストファイルのURLを指定します。
- ZIP解凍済みのEPUB：OPFファイルのURLまたは解凍されたEPUBファイルのトップディレクトリを指定します。
注：
- GitHubとGistのURLを直接指定することができます。そのようなURLが指定された場合、Vivliostyle は github/gist の raw コンテンツをロードします。
- ⚠️Mixedコンテンツ（“http:” のURLが “https:” の Vivliostyle Viewer に指定された場合）は通常ブラウザによってブロックされます。
- ⚠️Cross-Origin（異なるドメインへのリクエスト）は、サーバーが Cross-Origin Resource Sharing (CORS) を許可するように設定されていない限り、通常はブラウザによってブロックされます。
URLパラメータのオプション：
- #b=<文書のURL> または #x=<文書のURL>
- #b= Book閲覧。(X)HTML文書のURLが指定された場合、そのURLはプライマリーエントリーページのものとして扱われ、マニフェストまたは目次（
<nav role="doc-toc">などでマークアップ）からリンクされた一連のHTML文書が自動的に読み込まれます。- #x= (X)HTML文書が単純に読み込まれます。複数の文書を #x=<最初のHTML>&x=<2番目のHTML>... のようにして指定することもできます。
- &spread=[true | false | auto]
- true：見開き表示
- false：単一ページ表示
- auto：自動見開き表示（デフォルト）
- &renderAllPages=[true | false]
- true：印刷向き（すべてのページが印刷可能で、ページ番号は期待されるとおりに機能します）
- false：閲覧向き（おおまかなページ番号を使って、クイックロード）
- &style=<追加の外部スタイルシートのURL>
- &userStyle=<ユーザースタイルシートのURL>
オプションは設定パネル（Settings）でも設定できます。
Vivliostyle Viewer で表示するHTML文書の指定
HTMLファイルを Vivliostyle Viewer で表示するには、Webサーバーが読み込める場所（上記手順にしたがってWebサーバーを起動している場合は、配布パッケージを解凍してできたフォルダ内）にそのファイル（およびそのファイルから読み込まれるCSSや画像ファイル）を置いた上で、次のようにパラメータを付加した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を下に表示します:
Web上に公開されている(X)HTML文書を表示する例：
EPUBを表示するには
ZIP解凍済みのEPUBファイルを表示することができます。その場合、次のパラメータを指定します:
#b=⟨表示する解凍済みEPUBフォルダのURL (Vivliostyle Viewer からの相対)⟩例: samples/niimi/ フォルダに解凍済みのEPUBファイルを表示する場合:
テキストボックスにEPUBフォルダのパス（またはURL）を入力すると、その文書を表示するVivliostyle ViewerのURLを下に表示します:
GitHub上に公開されているZIP解凍済みのEPUBファイルを表示する例：
Web出版物を表示するには
Web出版物（複数のHTML文書からなるコレクション）を表示するには、次のパラメータを指定します:
#b=⟨プライマリーエントリーページのHTML文書またはマニフェストファイルのURL (Vivliostyle Viewer からの相対)⟩Web出版物のマニフェストの形式については、W3Cドラフトの Web Publications および Readium Web Publication Manifest をサポートしています。
Web出版物のマニフェストが存在しなくても、指定したHTML文書内の目次要素内に他のHTML文書へのリンクがある場合は、それらの文書が自動的にロードされます。Vivliostyle はHTML文書内の次のCSSセレクタにマッチする要素を目次要素として扱います: [role=doc-toc], [role=directory], nav li, .toc, #toc
Web上に公開されている複数のHTML文書からなる出版物を表示する例：
- CSS Working Group Editor Drafts の『Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification』
見開きページ表示を指定するには
Vivliostyle Viewer は、表示領域の横幅が大きいとき（高さの1.45倍以上）、自動的に見開きページ表示にします。これを変えるには次の指定をURLに追加します:
&spread=true （常に見開きページ表示）&spread=false （常に単ページ表示）&spread=auto （自動切り替え＝デフォルト）Vivliostyle Viewer の設定パネル（画面右上のアイコン ![[Setting]](../images/vivliostyle-icon.png){kind=icon}
をクリックして開く）でも、ページ表示モードの変更ができます。
スタイルシートを指定するには
HTMLファイルに指定されているスタイルシートに加えて、追加のスタイルシート（CSSファイル）を使うには、次の指定をURLに追加します:
&style=⟨スタイルシートのURL (Vivliostyle Viewer からの相対)⟩この方法で指定したスタイルシートは、HTMLファイルで指定されているスタイルシートと同様（制作者スタイルシート）の扱いで、よりあとに指定されたことになるので、CSSのカスケーディング規則により、HTMLファイルからのスタイルの指定を上書きすることになります。
これに対して、次のようにしてユーザースタイルシート（スタイル指定に !important を付けないかぎり、制作者スタイルシートのスタイル指定を上書きしない）の指定もできます:
&userStyle=⟨ユーザースタイルシートのURL (Vivliostyle Viewer からの相対)⟩複数個の &style= あるいは &userStyle= を使うことで、複数個のスタイルシートを指定できます。
データURLも利用できます。例えば:
&userStyle=data:,html{writing-mode:vertical-rl}ユーザースタイルの設定は、設定パネルの User Style Preferences からも行うことができます。設定内容のCSSは設定パネルの CSS Details で確認することができます。
Web上に公開されている文書に、設定パネルからユーザースタイルの設定を加えた例：
- CSS Working Group Editor Drafts の『Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification』
この例のように、設定パネルからスタイルの設定を行うと、ユーザースタイルのCSS内のコメント /*<viewer>*/ と /*</viewer>*/ で囲んだ部分に、設定パネルの項目から設定したスタイルのCSSコードが生成され、設定パネルの CSS Details に表示されます。ユーザー独自のCSSコードをそれに追加することができます。この例ではページヘッダーとページフッターを追加しています。
Vivliostyle Viewer から印刷・PDF出力を行うには
ブラウザの印刷・PDF出力機能を利用できます。例えば、Google Chrome で PDF に出力するには、メニューから「印刷」を開き、出力先として「PDFに保存」、背景のグラフィック ON と指定して「保存」します。
注意: 文書の全ページを印刷する場合、設定パネルで Render All Pages が On になっていることを確認してください。これが Off の場合、すでに表示されたページしか印刷できず、またページ番号が正しく出力されません。
VivliostyleがサポートするCSSの機能
VivliostyleがサポートするCSSの機能については “Features supported by Vivliostyle”（英語）を参照してください。
その他のドキュメント
その他のドキュメントは Vivliostyle ドキュメント にあります。
サンプル
固定ページサイズ
和文 文庫本フォーマット『ごん狐』
Page/Spread View Raw HTML Source
和文 段組フォーマット『白馬岳』
Page/Spread View Raw HTML Source
欧文 Web Fonts サンプル “Wood Engraving”
- Justification & hyphenation あり
- Page/Spread View Raw HTML Source
- Justification & hyphenation 無し
- Page/Spread View Raw HTML Source
可変ページサイズ
英語 “The Malay Archipelago”
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 サンプル にあります。