Vivliostyle Viewer User’s Guide

Vivliostyle Viewer is a web application displaying and typesetting HTML+CSS documents.

How to use

To use the Vivliostyle Viewer in a local environment, start a web server by following the instructions described in the README.md (read online) attached to the distribution package.

You can also use the public online Vivliostyle Viewer, https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html, that has always been updated to the latest development version.

The vivliostyle-viewer.html under the viewer folder is the main file of Vivliostyle Viewer. A URL fragment notation #x=… appended to this URL is used to specify the HTML file to be displayed.

Specifying the HTML file to be displayed in Vivliostyle Viewer

To display the HTML file in the Vivliostyle Viewer, place the file (and CSS or image files read from the file) somewhere which the web server can read (if you start the web server following the above instructions in case of local environment, it is the folder generated by unzipping the distribution package), then open the following URL in your browser:

⟨Vivliostyle Viewer URL⟩#x=⟨URL of the file to be displayed (relative to the Vivliostyle Viewer)⟩

Note: If you want to display a document from a domain which is different from the domain of the Vivliostyle Viewer itself, it is possible that it cannot be displayed, depending on the web server that serves the document file. You need to configure CORS (Cross-Origin Resource Sharing) on the server.

Note: Since Vivliostyle Viewer uses an online JavaScript library (MathJax) to display mathematics (supports MathML and TeX formats), the internet connection is required when the document contains mathematics.

Example: If you want to display a HTML file samples/wood/index.html:

Input the document file path (or URL) in the text box; the Vivliostyle Viewer URL of the document is displayed below:

To display an EPUB

You can display an unzipped EPUB file with the Vivliostyle Viewer. In that case, use the following notation instead of #x=… :

#b=⟨URL of the unzipped EPUB folder (relative to the Vivliostyle Viewer)⟩

Example: If you want to display an unzipped EPUB folder test.epub/:

Input the EPUB folder path (or URL) in the text box; the Vivliostyle Viewer URL of the EPUB document is displayed below:

To specify multiple HTML files

To display multiple HTML files collectively in the Vivliostyle Viewer, make them EPUB format and use the above method, or you can specify multiple HTML files directly as:

#x=⟨URL of the 1st HTML file⟩&x=⟨URL of the 2nd HTML file⟩…&x=⟨URL of the Nth HTML file⟩

To specify page spread view mode

Vivliostyle Viewer displays pages automatically with spread view mode when the width of the view area is wide (1.45 times the height or more). To change the spread view mode, append one of the following to the URL:

&spread=true (always spread view)
&spread=false (always single page view)
&spread=auto (auto spread view = default)

You can also change the page view mode in the Vivliostyle Viewer's setting panel (open by clicking the [Setting] icon in the upper right corner of the viewer).

To specify additional style sheets

To use additional style sheets (CSS files) in addition to the style sheets specified in the HTML file, append the following to the URL:

&style=⟨style sheet URL (relative to the Vivliostyle Viewer)⟩

The style sheets specified in this way are treated as author style sheets, as if they are specified in the HTML file at very last, and can override styles of other style sheets according to the CSS cascading rules.

On the other hand, you can also specify user style sheets (cannot override styles of author style sheets unless specifying !important) as follows:

&userStyle=⟨user style sheet URL (relative to the Vivliostyle Viewer)⟩

Using multiple &style= and/or &userStyle= you can specify as many style sheets as needed.

You can also use data URL. For example:

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

How to Print/Save as PDF from Vivliostyle Viewer

Use your browser’s print/save as PDF feature. For example, to save as PDF with Google Chrome, select Print from menu, set Destination to “Save as PDF”, check “Background graphics”, and “Save” to PDF.

Features supported by Vivliostyle

Supported CSS features are described in Features supported by Vivliostyle.

Other documentation

You can find other documentation at Vivliostyle Documentation

Samples

Fixed page size samples

Japanese novel “Gon, the Little Fox”

Page/Spread View   Raw HTML   Source

Japanese multi-column magazine “Mt. Shirouma”

Page/Spread View   Raw HTML   Source

Web fonts sample “Wood Engraving”

Variable page size samples

“The Malay Archipelago”

Page/Spread View   Raw HTML   Source

Japanese, Horizontal writing mode “Takasebune”

Page/Spread View   Raw HTML   Source

Japanese, Vertical writing mode “Takasebune”

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 for auto spread paginated view with online Vivliostyle Viewer.
  • Page View for single page paginated view with online Vivliostyle Viewer.
  • Spread View for spread paginated view with online Vivliostyle Viewer.
  • Raw HTML for normal HTML view.
  • Source for source files, HTML+CSS etc., on GitHub.

Other samples

You can find other samples at Vivliostyle Samples.