Code Monkey home page Code Monkey logo

vivliostyle-tests's Introduction

vivliostyle-tests

A few tests of vivliostyle's css rendering. The comparison pdf is rendered using Paged.js. Which is also buggy but just in different ways. (Fewer CSS bugs.)

Contents

The issue here is that Vivliostyle does not render the contents page with a custom page style. It seems to have a problem giving the first page a custom page style

Cover

Again, background colour is missing on the first page because, under some circumstances, it doesn't seem to apply page styles to the first page.

Custom Page 1

Here we have the opposite problem. The custom page style is applied to the page with the heading but also the following page. The custom page should only be applied to the one page.

Custom Page 2

This is a repeat of the cover and contents bug where the first page, which should be a custom page style, isn't. This time paged.js fails as well.

Italics

All of the Vivliostyle examples in this repository have a bug where it successfully applies the custom font to body text but not to the header. It uses the fallback font with a fake italic slanted style instead of the provided italic font. The font is a free Google font called Literata and is included in this repository.

Not Selector

h2:not(#toc-title) seems to break the stylesheet in a few ways. Not only aren't the styles not applied to the applicaple h2 elements but it also seems to break the #toc-title::before and #toc-title::after selectors that come after it.

vivliostyle-tests's People

Contributors

baldurbjarnason avatar

Watchers

James Cloos avatar  avatar  avatar

vivliostyle-tests's Issues

Vivliostyle.js issues

@baldurbjarnason Thanks for the bug reports! I confirmed the bugs. See below:

Contents, Cover, and custompage2

Thanks, I opened Vivliostyle.js issue:

custompage

I opened Vivliostyle.js issue:

Not Selector

I opened Vivliostyle.js issue:

Italics

This is a known issue of Vivliostyle.js:

Until this bug is fixed, the same style as the root element needs to be specified in @page {โ€ฆ}, e.g.,

      html {
        font-family: Literata, "Iowan Old Style", "Sitka Text", Palatino,
          "Book Antiqua", serif;
      }
      @page {
        font-family: Literata, "Iowan Old Style", "Sitka Text", Palatino,
          "Book Antiqua", serif;
      }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.