vivliostyle / vivliostyle.js

📖 The power of CSS typesetting, right at your fingertips.

Vivliostyle is an open source project for a new typesetting system based on web standard technology.

Vivliostyle.js offers HTML+CSS typesetting and rich paged viewing with EPUB/Web publications support.

🌏 Vivliostyle.org
📖 Documentation
🤝 Join Community
🕶 Awesome Vivliostyle
💅 Vivliostyle Themes

Table of contents

• Packages
  • @vivliostyle/core
  • @vivliostyle/viewer
  • @vivliostyle/cli
  • @vivliostyle/react
  • @vivliostyle/vfm
  • @vivliostyle/print
  • create-book
  • create-vivliostyle-theme
• Contribution
  • Bug Reports & Feature Requests
  • Contributors ✨
• Bronze Sponsor
• License
• Credits

Packages

@vivliostyle/core

A core library for HTML+CSS typesetting with EPUB/Web publications support.

See API Reference for further details.

@vivliostyle/viewer

A web app provides intuitive UI for Vivliostyle.

Use officially-hosted Vivliostyle Viewer or download a distribution package from https://vivliostyle.github.io.

• User Guide
• Samples

@vivliostyle/cli

A command-line interface of Vivliostyle.

@vivliostyle/react

Use React component as a Vivliostyle renderer.

@vivliostyle/vfm

Vivliostyle Flavored Markdown (VFM) is a Markdown syntax optimized for book authoring. It is standardized and published for Vivliostyle and its sibling projects.

@vivliostyle/print

Vivliostyle Print allows page-layouting using Vivliostyle Core for printing within a website without destroying the original layout.

create-book

The fastest way to start writing book with Vivliostyle ecosystem.

create-vivliostyle-theme

Create Vivliostyle theme at ease.

Contribution

• See Contribution Guide for development setup.
• Development Wiki

Bug Reports & Feature Requests

Please report on GitHub Issues.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

sorotokin 💻	KAWAKUBO Toru 💻	Satoru MATSUSHIMA (℠) 💻	Seiya Konno 💻	Johannes Wilm 💻	Florian Rivoal 💻	Satoshi KOJIMA 💻
Masaya Yamauchi 💻	Shinyu Murakami 💻 📖 📢	Shota Kubota 💻	spring-raining 💻 📖 📢	Hiroshi Hatake 💻	takanakahiko 💻	Yasuaki Uechi 💻 📖 🎨 📢
Zachary Waldowski 💻	yamasy1549 💻 🎨	OGATA Katsuhiro 📝 📋	akabeko 🖋 🤔	youchan 💻 📢	Yuku Kotani 💻	Christoph Päper 💻
Ikko Eltociear Ashimine 💻	Takai ayumu 💻 📢	daisuke-tanabe 💻	Hiroaki KAWAI 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Bronze Sponsor

• Hatena Co., Ltd.

License

Licensed under AGPL Version 3.

Vivliostyle Core is implemented based on Peter Sorotokin's EPUB Adaptive Layout implementation, which is licensed under Apache License, Version 2.0.

Credits

vivliostyle.js's Issues

Logfiles

Right now VS uses global log files (for Mac and Linux). It should be possible to configure the logfiles by command-line or at least default to the current directory instead of writing to /tmp.

Insert an empty page if necessary when a left/right page break value is specified

When a page break value like left/right/recto/verso is specified, an empty page need to be inserted so that the next page is formatted as a left/right/recto/verso page.

Spec: CSS Fragmentation - Page Break Values

Initial value of orphans and widows is 2

Spec: CSS Fragmentation - 3.3. Breaks Between Lines: orphans, widows

CSS parsing throws error

Parsing following CSS (used in Wikipedia) throws an error:

.alert-container {
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image:linear-gradient(bottom, rgb(215,215,215) 4%, rgb(230,230,230) 55%, rgb(255,255,255) 100%);
}

Web fonts are not applied to contents of page-margin boxes

CSS text-align property does't work with Chrome extension

Here is a sample. Second line is date with CSS property text-align:right. it's ok with browser view but doesn't work when paginated by the extension.

Do not block entire process when stylesheets cannot be fetched or parsed

Currently the entire layout process is blocked when a stylesheet cannot be fetched or parsed.
This includes, for example,

• Exceptions caused by bugs in the CSS parser (e.g. #140).
• Blocking of the HTTP request by browser when the current (UI) page is served over HTTPS.

These events should be skipped (with warning messages) and the entire layout process should be continued, instead of begin stopped completely.

Table (column) width should not change over page breaks

Currently, when a table spans across a page break, widths of columns are not saved and can vary between before and after the page break.
We should keep the widths over page breaks.
Related: #85

Character-based alignment in a table column

Spec: CSS Text 4 - Alignment and Justification

Table cell with rowspan disappears after page break

When a table cell with rowspan>1 is split by a page break, the latter part of the cell, which is supposed to be on the page after the break, disappears.

Support math input other than MathML

Currently only maths in MathML are fed to MathJax.
Math input other than MathML, e.g. TeX or ASCIIMath, are simply ignored.

Float images in pages

Here is a sample that a image positioned by float: right and width: 50%.

I remember that Johannes Wilm is editing CSS Page Floats. So I'd like to know how will vivliostyle project going to support it?

Add support for font-feature-settings

https://drafts.csswg.org/css-fonts-3/#propdef-font-feature-settings

Should be possible to simply pass through to the browser, making it easy to implement.

Add hyphenation support on browsers not supporting it

Spec: CSS Text 3 - Hyphenation Control: the 'hyphens' property

Currently Google Chrome does not support hyphens: auto.

Units spelled in upper case should be valid as well as those in lower case

Spec: CSS Values and Units - 4.4. Numbers with Units: dimensions

HTML well-formed as XML is displayed incorrectly

When the source HTML happens to be a well-formed XML document, it is not correctly displayed.
Example:

<!DOCTYPE html>
<html>
 <head>
   <title>Test</title>
 </head>
 <body>
   <h1>Test</h1>
   <p>Hello, world!</p>
 </body>
</html>

Current implementation treats the source as an XML document if it can be parsed as a well-formed XML.
However, since the source lacks the XML namespace declaration, it is not treated as (X)HTML and default style sheets for (X)HTML are not applied.

The document type should be judged by Content-Type or file extension.

"Fit inside viewport" zoom mode

Since current implementation stores only a single zoom factor, the following procedure leads to a page not fitting inside viewport:

1. Click "Fit inside viewport" button on a page
2. Navigate to another page whose size is different from the first one

It would be good to have a "Fit inside viewport" zoom mode, in which the zoom factor changes along with page navigation so that pages are always displayed as fitting inside viewport.

selectors should be case insensitive

Add support for font-size-adjust

https://drafts.csswg.org/css-fonts-3/#propdef-font-size-adjust

Should be possible to pass to the browser as is.

--version command line option

It would be nice having a --version command line option for the formatter in order to introspect the installed version.

Honor multiple forced break values at a single break point

CSS Fragmentation Module Level 3 - Forced Breaks

When multiple forced break values apply to a single break point, they combine such that all types of break are honored. When left, right, recto, and/or verso are combined, the value specified on the latest element in the flow wins.

Currently, the value specified on the latest element is always used, regardless of combination of the values.

Remained task from #127.

Ruby causes incorrect pagination

Need test cases.

Page/column break inside table

The current implementation handles page/column breaks as if break-inside: avoid were always specified on display: table elements.
This behavior is not specified in CSS specs, and often leads to unnaturally large spaces before tables.

Hide MathJax status message on print

"Typesetting math: 100%"

box-shadow/text-shadow is ignored

box-shadow and text-shadow are in the supported features as "Support depends on browser capabilities", however it seems ignored.

Test
http://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://rawgit.com/zopyx/css-paged-media-tutorial/master/lesson-box-styling/index.html

Internal links to "name" don't work

<a href="#foo">foo</a> works if the target is <a id="foo"> but not if the target is <a name="foo">

length in 'rem' not interpreted correctly when specified within page context

The length is passed through the browser directly, leading to incorrect size (relative to the browser's root font size, not the root of the document which Vivliostyle is displaying).

Appropriately handle interaction between forced break value and avoid break value

Spec: CSS Fragmentation - 4.3. Forced Breaks

A forced break occurs at a class A break point if, among the break-after properties specified on or propagated to the earlier sibling box and the break-before properties specified on or propagated to the later sibling box there is at least one with a forced break value. (Thus a forced break value effectively overrides any avoid break value that also applies at that break point.)

Add support for CSS Masking Module Level 1

https://drafts.fxtf.org/css-masking-1/

This is a big spec with lots of properties, but as far as I can tell without having reviewed it in detail, it does not affect layout, so we should be able to delegate it to the browser.

Page background does not cover entire page sheet

When printing (to PDF), there appears a thin (~1px) blank area at the bottom of pages, where page background is not painted.
This problem is introduced by PR #111.

Add support for Compositing and Blending Level 1

https://drafts.fxtf.org/compositing-1/

Should be easy to support by simply delegating to the browser. There's no particular interaction with pagination.

Note that 2 properties (isolation and mix-blend-mode) create stacking context when not at their initial value. I'm marking this as quickfix assuming we can simply pass everything through, but if the stacking context story complicates things, we should probably split this bug in 2, one for background-blend-mode, which should stay a quickfix, and one for isolation and mix-blend-mode.

Page-margin box styles are ignored

Example:

@page {
  margin: 1cm;
}
@page:right {
  @top-center { content: "right"; }
}
@page:left {
  @top-center { content: "left"; }
}

In this case, all pages show "right" header and the page at-rule for left pages is ignored.

Page background and document canvas background

Support page background (background-* in page context) and document canvas background (background-* for the root element).

Spec: CSS Paged Media - 3.1. Page Backgrounds and Painting Order

Add support for :last-child selector

Spec: Selectors Level 3 - :last-child pseudo-class

Running elements in page margin boxes

Which syntax?

Implement crop marks

Spec: Crop and Registration Marks: the 'marks' property, Bleed Area: the 'bleed' property in CSS Paged Media

Incorrect root element border after a heading block

Failing test: page-container-005

The orange border just below the h2 heading "Lorem Ipsum Text" is not expected.

JIS B paper size

In Japan, JIS B paper size is used much more often than ISO B paper size.
Should it be included to CSS Paged Media Module?
We can implement a vendor extension to the size value, but having it in the spec is better.

Fails to parse a non-HTML XML file when served with non-XML Content-Type

When a non-HTML XML file (e.g. an OPF file in an OCF container) is served with a non-XML Content-Type (e.g. text/plain), parsing of the XML content fails.
This can lead to failure to load an EPUB document.

Use 'dir' attribute on the root element when determining page progression direction

Spec:

• CSS Paged Media - 3.3. Page Progression
• CSS Writing Modes - 2.1. Specifying Directionality: the direction property

Truncate margins at unforced page/column breaks

Spec: CSS Fragmentation Module Level 3 - Adjoining Margins at Breaks

When an unforced break occurs between block-level boxes, any margins adjoining the break truncate to the remaining fragmentainer extent before the break, and are truncated to zero after the break. When a forced break occurs there, adjoining margins before the break are truncated, but margins after the break are preserved. Cloned margins are always truncated to zero on block-level margins.

Copy 'size' property in page at-rules to the DOM

Google Chrome's "Save As PDF" feature reads page at-rules in stylesheets and automatically set the page size of the output PDF file.
Since current Vivliostyle.js reads page at-rules in stylesheets and determines the page dimensions but does not write the rules in the view DOM, the page size information is lost on print.
The 'size' property in the page at-rules should be copied to the view DOM.

add support for text-indent

This should be easy to support just by letting the browser handle it.

Remove not working custom properties from sample CSS files

CSS files of published samples has some custom properties, but Vivliostyle does not support them now.
They should be removed since they are confusing to users.

Incorrect pagination caused by absolutely positioned element

Current implementation delays application of position: relative after the page layout is done:

• vivliostyle.js/src/adapt/vtree.js

  Line 21 in c30d597

  "position": true // only relative

• vivliostyle.js/src/adapt/vgen.js

  Line 1100 in c30d597

  if (propName != "position" || value === adapt.css.ident.relative) {

An absolutely positioned element can be placed at a wrong position when its containing block is specified by a position: relative element, since the application of the position value is delayed and another wrong element may be chosen as its containing block. This sometimes leads to incorrect pagination where a page break occurs even if there remains room for subsequent contents.

position: relative should not affect layout of subsequent (sibling) elements, but should affect pagination. In this sense, I think the delay should be dropped.

Update acceptable values for break-* properties

Spec: Breaks Between Boxes: the 'break-before' and 'break-after' properties and Breaks Within Boxes: the break-inside property in CSS Fragmentation Module

Values currently accepted for break-before/break-after are: auto | always | avoid | left | right | page | column | region.
Values currently accepted for break-inside are: auto | avoid | avoid-page | avoid-column.

Git pack files > 100MB

The total weight of vivliostyle is around 10MB, but it checks out at 100MB. For some reason the git pack files are huge.

$
git clone https://github.com/vivliostyle/vivliostyle.js.git
Cloning into 'vivliostyle.js'...
remote: Counting objects: 36378, done.
remote: Total 36378 (delta 0), reused 0 (delta 0), pack-reused 36378
Receiving objects: 100% (36378/36378), 110.55 MiB | 4.70 MiB/s, done.
Resolving deltas: 100% (3473/3473), done.
Checking connectivity... done.
$ 

$ pwd
....../vivliostyle/vivliostyle.js/.git/objects/pack
$ 
$ ls -lah
996K Oct 22 11:47 pack-5242ff6347025cabc7c8cd929dc9d192816bd9d2.idx
111M Oct 22 11:47 pack-5242ff6347025cabc7c8cd929dc9d192816bd9d2.pack

Support even/odd arguments for :nth-child selector

Spec: Selectors Level 3 - :nth-child() pseudo-class

Extra white page on print from Google Chrome

An extra white page appears at the end of the document.

• Open http://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=../samples/variable-page-size/ja-vertical/Takasebune/main.xhtml
• Set the page size to A5
• Print to PDF with Google Chrome's print dialog

Unique page number counter for EPUB

When viewing an EPUB with multiple HTML files, a unique (builtin) page number counter should be used for the entire EPUB document.
In other words, page-based counters should not be automatically reset when switching the HTML files.