Lessons and tests

Note

Please note that Vivliostyle is currently in an early beta phase and does not claim to be a CSS Paged Media processor in the first place (in fact it will implement certain features differently).

INTRO
Lesson PDFreactor PrinceXML Antennahouse Vivliostyle
lesson-basic
This section will show some basic CSS formatting features like bold or italic text and text in different font-sizes.
OK OK OK OK
lesson-chapter-numbering
This example outlines the structure of a HTML document with nested chapters. The counters of the section are being automatically generated using CSS counters.
OK OK OK OK
lesson-cross-references
This example contains for chapters that are linked to the table of contents where the chapter title is automatically inserted into the table of contents together with the related page number.
OK OK OK OK
lesson-css-transformations
This example show CSS 3 transformations. It shows a text box rotated by 90, 180, 270 degree and an image rotated and scaled.
OK OK OK ERROR
lesson-fonts
The example shows the basic usage of arbitrary truetype or opentype fonts using @font-face in CSS.
OK OK OK OK
lesson-footnotes
This example explains how to generate footnotes from HTML markup and how to style the marker and the footnote text itself
OK OK OK ERROR
lesson-hyphenation
This example demonstrates the basic usage of hyphenation. Most converters come with hyphenation tables for the most frequent languages. In this example you see text boxes with german and english text, with and without hyphenation.
OK OK OK OK
lesson-hyphenation-long-words
In this example we evalute the hyphenation of long (German) words for different box sizes. This example is completely artificial but it demonstrates how the converters behave with overlong words
OK OK (OK) OK
lesson-images
This example shows bitmap images and SVG graphics in original size and scaled down together with some CSS transformations. Some converters like PDFreactor and Antennahouse also support PDF as image format.
OK OK OK OK
lesson-multi-columns
This example shows some text renders in a two, three and four column layout. The text uses english hyphenation, text is justified.
OK OK OK OK
lesson-page-areas
This example renders the page regions as defined in the CSS Paged Media specs.
OK OK OK OK
lesson-page-numbers
Basic usage using a page counter and a counter for the total number of pages
OK OK OK ERROR
lesson-pagination
Example showing multiple chapters of a document with a forced page break after each section header.
OK OK OK OK
lesson-pdf-bookmarks
This lesson will generate PDF bookmarks for the given h1 and h2 elements. Please note that PrinceXML can generate the PDF bookmarks directly. PDFreactor and Antennahous require a specific CSS property (see styles.css).
OK OK OK ERROR
lesson-pdf-links
In this lesson we check how internal and external links are treated. Clicking on an external link should open the related URL in the pre-configured default browser. Clicking on an internal link should lead to the chapter 1 or 2 inside the PDF. Two notes: - the anchor must contain some text and can not be empty elements (otherwise some converter may strip/ignore those anchors). In our lesson we place the anchors inside the

elements of each chapter - use the ``id`` attribute for defining an anchor instead of the ``name`` attribute Best practise::

some text

instead of::

some text

OK OK OK OK
lesson-running-elements
This example shows how to inject content pieces from the markup into a slot (e.g. header or footer). The @top-left slot is being filled with the title of the book. The @top-right slot is automatically filled with title of the subsection. Running elements allow you to move content piece into one of the sixteen page area. The running element itself is removed from the page flow.
OK OK OK ERROR
lesson-tables
This lessons renders some more complex tables with running headers (table header and footer to be repeated on each page. The CSS specs do not define whether header and footer should/must be repeated or not and there is not CSS property for controlling the behavior. So support or non-support for repeating headers and footers is both a valid interpretation of the incomplete CSS specs.
OK OK OK OK
ADVANCED
Lesson PDFreactor PrinceXML Antennahouse Vivliostyle
lesson-background-repeated
This example should show a background image stretching over the complete width and height of the printable area.
OK OK OK ERROR
lesson-cmyk
This example shows the usage of CMYK for text and the capability to include images with CMYK colorspace.
OK OK OK ERROR
lesson-css-transformations2
This example show CSS 3 transformations. It shows a text box rotated by 90, 180, 270 degree and an image rotated and scaled.
OK OK OK OK
lesson-css-transformations3
This example show a text box and and an image - both mirrored using the CSS class ``flip``.
OK OK OK OK
lesson-css-zindex
This example renders three overlapping rectangles. The red rectangle should be drawn with 75% opacity. It partly covers the blue and the green rectangle. The stacking order of the rectangles is defined by their z-index.
OK OK OK OK
lesson-css-zindex-2
Stacked DIV element. Demo code taken from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float The all outputs (see positioning of DIV #1) are correct. Vivliostyle supports as only converter opacity and stacks the DIV elements in the same way as browser engines do. PDFreactor, Antennahouse and PrinceXML do not support opacity and stack the DIV elements according to the rules...so the rendering of all converters here is at some point correct and consistent.
(OK) (OK) (OK) OK
lesson-footnotes-multi-columns
This example explains how to generate footnotes from HTML markup and how to style the marker and the footnote text itself
ERROR OK OK OK
lesson-ligatures
Simple text with and without ligatures.
ERROR OK OK OK
lesson-named-pages
This example renders two pages in A5 using so called "named pages". The first named page is "Portait", the second one is "Landscape". Named pages allow you to render a particular content element on a different page with deviant @settings (size, orientation, page boxes). - Page 1: text on A5 (portrait) - Page 2: text on A5 (landscape) - Page 3: text on A4 (landscape, blue background, custom header and footer, custom colors)
OK OK OK ERROR
lesson-positioning
Absolute positioning of text boxes
OK OK OK OK
lesson-right-to-left
Some hebrew text rendered right to left.
OK OK OK OK
lesson-texts-rotated-360-degrees
This examples draws 360 absolute positioned boxes with the same content but each rotated by 1 degress. In the end you will see some circular structure from the texts being overprinted.
OK OK (OK) OK
lesson-typography
This test show the usage of the :first-letter and :first-line pseudo selectors.
ERROR OK OK OK
SPECIAL
Lesson PDFreactor PrinceXML Antennahouse Vivliostyle
lesson-antennahouse-autofit-text
In example you see the options how to fit over long text into a given bounding box using Antennahouse's ``-ah-overflow-condense`` options.
OK
lesson-antennahouse-multicol-with-sidenotes
This example shows a two-column layout with side notes placed in the left margin (on left pages) and right margin (on right pages). In addition this example will demonstrate how to place some text only onto the first and lage page. CSS Paged Media defines the ``:first`` selector but no ``:last`` selector. The side note functionality is implemented the float extension of Antennahouse (``-ah-float: outside``).
OK
lesson-blank-pages
This test is intended to simulate a novel with three chapters. Every chapter should start on a right page with header and footer. The blank (left) pages should remain completely empty (only possible with PrinceXML and Antennahouse by using the @page:blank selector).
OK (OK) OK ERROR
lesson-box-styling
This example shows some text within a box with a rounded borders. The border of the box should be in orange and blue colors. Only Antennahouse implements the ``box-shadow`` property used in this example.
OK ERROR OK ERROR
lesson-chart-js
This example renders a chart using Javascript with help of the chart add-on chart.js (http://chartjs.org).
OK ERROR ERROR ERROR
lesson-complex-css
A complex CSS example with CSS positioning, fonts and some typography. Expected output: .. image:: images/lesson-complex-css-expected.png Source: http://v1.jontangerine.com/silo/css/complex-type-fix/
OK OK OK OK
lesson-css-gradients
This example show the usage of CSS gradients
OK OK OK OK
lesson-flotr2-js
This example creates a chart using HTML5 and the Flotr2 JS chart engine (http://www.humblesoftware.com/flotr2/).
OK ERROR ERROR ERROR
lesson-image-scaling
This example show how images will be scaled into the boxes with a a given width. Setting ``width: 100%`` on the image should auto-scale the image into the parent box. The first two example will place the image in its original size into the parent container. No scaling should happen. The image on the first page should be clipped at the right border due to the ``overflow: hidden`` setting on the parent container.
OK OK OK OK
lesson-mathml-native
Some MathML examples.
with errors with errors (OK) with errors
lesson-mathml-torture-test
Some MathML examples.
with errors with errors (OK) ERROR
lesson-multiple-backgrounds
This example renders two background images for the same element.
OK OK ERROR OK
lesson-pdfreactor-autofit-text
In example you see the options how to fit over long text into a given bounding box using Javascript in PDFreactor.
OK
lesson-pdfreactor-multicol-with-dual-sidenotes
This example shows a two-column layout with side notes place in the left and right margin. The side note functionality is implemented using Javascript.
OK
lesson-pdfreactor-multicol-with-sidenotes
This example shows a two-column layout with side notes placed in the left margin (on left pages) and right margin (on right pages). In addition this example will demonstrate how to place some text only onto the first and lage page. CSS Paged Media defines the ``:first`` selector but no ``:last`` selector. PDFreactor provides the ``-ro-last`` selector as alternative. The side note functionality is implemented using floats and Javascript.
OK
lesson-two-column-with-author-box
This example shows a two-column text (converted from DOCX to XML). The text show a left-floated author box on the first page. The PDFs generated using PDFreactor and Antennahouse use a grid (texts inside both columns are aligned with a baseline grid). Footnotes are placed by Antennahouse within the same column as the footnote appears while all other processors place footnotes below all columns.
ERROR OK OK ERROR
lesson-xml
This test show the usage of the :first-letter and :first-line pseudo selectors.
OK OK OK ERROR