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.
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:
#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.
Example: If you want to display a HTML file
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
#b=⟨URL of the unzipped EPUB folder (relative to the Vivliostyle Viewer)⟩
Example: If you want to display an unzipped EPUB folder
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 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)⟩
&userStyle= you can specify as many style sheets as needed.
You can also use data URL. For example:
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.
You can find other documentation at Vivliostyle Documentation
Fixed page size samples
Japanese novel “Gon, the Little Fox”
Japanese multi-column magazine “Mt. Shirouma”
Web fonts sample “Wood Engraving”
Variable page size samples
“The Malay Archipelago”
Japanese, Horizontal writing mode “Takasebune”
Japanese, Vertical writing mode “Takasebune”
- 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.
You can find other samples at Vivliostyle Samples.