vivliostyle

Vivliostyle.js

JavaScript library for web sites with rich paged viewing and EPUB support, shared with Vivliostyle Formatter & Browser. Vivliostyle.js is implemented based on Peter Sorotokin's EPUB Adaptive Layout implementation (licensed under Apache License 2.0).

Try Vivliostyle.js

http://vivliostyle.github.io/vivliostyle.js/

Bug reports & feature requests

Please send them to

• GitHub Issues
• Mailing list (Japanese)

Using Vivliostyle.js viewer

To run the viewer, you need to generate CSS files using Compass:

# Ensure Ruby and Node.js is installed in your system
gem install compass
npm install
npm run build-css

Then you need a web server that can serve the following resources:

• src directory (contains core JavaScript files and resources)
• viewer directory (contains viewer resources like HTML/CSS/web fonts)
• Content files you want to view in the viewer (see below)

The viewer can display HTML files, as well as unpackaged EPUB and FB2 publications. Note that the viewer may not be able to display contents on servers different from one hosting the viewer files due to security restriction on cross-origin resources.

To display the content, a URL should be constructed in the following way: start by creating a URL that references vivliostyle-viewer.html. Then append '#' and one of the following parameters (x for HTML/FB2, b for EPUB's OPF file).

• x=[path-to-html-or-fb2-content]
• b=[path-to-opf-file]

Path could either be absolute in the server context (starting with /) or relative to vivliostyle-viewer.html file.

MathML support

Vivliostyle viewer can utilize MathJax to render MathML content in modern browsers. To use MathJax, ensure that the path to MathJax script is correct in vivliostyle-viewer.html.

Compiling JavaScript using Google Closure compiler

Google Closure compiler can be used to make the code faster and much more compact. Use of the Closure compiler for web apps is optional.

Closure compiler can be installed via npm. To compile JavaScipt, run

npm install
npm run build

Then the compiled JavaScript file appears at lib/vivliostyle.min.js. Modify vivliostyle-viewer.html to reference only vivliostyle-viewer.min.js (goog/base.js is not needed, but MathJax-related files can be kept if desired). You might need to modify uaRoot parameter in vivliostyle-viewer.html to point the location of user agent resources (user-agent-* and validation.txt files).