Vivliostyle CSS Typesetting
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”
- with justification and hyphenation
- Page View Spread View Raw HTML Source
- without justification and hyphenation (for Chrome)
- Page View Spread View Raw HTML Source
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”
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.