Vivliostyle Viewer User’s Guide

Vivliostyle Viewer is a web application displaying and typesetting HTML(XML)/CSS documents.

How to use

Start a web server by following a procedure in README.md (read online) attached to the distribution package.

vivliostyle-viewer.html under viewer folder is the main file of Vivliostyle Viewer. To display HTML(XML) file with 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 procedure, it is the folder generated by unzipping the distribution package.), then open a URL [Vivliostyle Viewer URL]#x=[path of the file to be displayed (relative to the Vivliostyle Viewer file)] with a browser.

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 only MathML format), 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:

You can display an unzipped EPUB file with the Vivliostyle Viewer. In that case, use #b=[path of the unzipped EPUB folder (relative to the Vivliostyle Viewer file)]/ instead of #x=....

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:

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”, set Margins to “None”, check “Background graphics”, and “Save” to PDF.

Features supported by Vivliostyle

Features supported by Vivliostyle is described here.

Samples

Fixed page size samples

Japanese novel “Gon, the Little Fox”

Page View   Spread View   Raw HTML   Source

Japanese multi-column magazine “Mt. Shirouma”

Page View   Spread View   Raw HTML   Source

Web fonts sample “Wood Engraving”

Variable page size samples

“The Malay Archipelago”

Page View   Spread View   Raw HTML   Source

Japanese, Horizontal writing mode “Takasebune”

Page View   Spread View   Raw HTML   Source

Japanese, Vertical writing mode “Takasebune”

Page View   Spread View   Raw HTML   Source

Adaptive Layout samples

“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 for paginated view with online Vivliostyle Viewer.
  • Spread View for two page spread view with online Vivliostyle Viewer.
  • Raw HTML for normal HTML view, or paginated view using Vivliostyle Chrome Extension.
  • Source for source files, HTML/CSS etc., on GitHub.