vivliostyle.js
vivliostyle.js copied to clipboard
Text does not flow around floated elements when rendering Wikipedia pages
While trying to render the Wikipedia article Berlin, floated elements are displayed as if they were plain blocks. Test page (using the vivliostyle.github.io installation with Chrome version 59.0.3071.86 (64-bit official build) on Ubuntu 16.04) - compare with original. Images tend to be floated in the original but take up a full line in vivliostyle's rendering. This seems to be specific to images - for example, the stats table in the Immigration section is floated correctly.
The float
property is ignored due to a problem of Vivliostyle's CSS parser when the stylesheet contains a syntax error.
In this case, the stylesheet contains the following declaration, which has a syntax error (!ie
):
vertical-align:middle !ie
When Vivliostyle's CSS parser encounters such an error, it gives up parsing the rest styles after the error, instead of simply skipping the declaration with the error. This behavior of the CSS parser should be fixed to match CSS Syntax spec.
Related issue: #200
I can't reproduce this old issue (5 years ago) because the original test data is not found now, but I believe this problem has already been resolved. Vivliostyle's CSS parser has been improved and fixed the problem.