Lessons

INTRO

Lesson PDFreactor PrinceXML Antennahouse

basic

This section will show some basic CSS formatting features like bold or italic text and text in different font-sizes.

OK OK OK

fonts

The example shows the basic usage of arbitrary truetype or opentype fonts using @font-face in CSS.

OK OK OK

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

border-model

This section show a simple content DIV element with different border sizes and paddings.

OK OK OK

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

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

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)

page-areas

This example renders the page regions as defined in the CSS Paged Media specs.

OK OK OK

page-numbers

Basic usage using a page counter and a counter for the total number of pages

OK OK OK

pagination

Example showing multiple chapters of a document with a forced page break after each section header.

OK OK OK

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.

Note: PrinceXML has different view on how to treat a page-break-before on the first page (which is an error in my opinion).

OK OK OK

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

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

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

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

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

multiple-backgrounds

This example renders two background images for the same element.

OK OK OK

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

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 <h1> elements of each chapter
  • use the id attribute for defining an anchor instead of the name attribute

Best practise:

<h1 id="my-anchor">some text</h1>

instead of:

<a name="my-anchor"></a>
<h1>some text</h1>
OK OK OK

center-vertical

This lesson demonstrate how to center an inline(-block) element with a given container - horizontally and vertically.

OK OK OK

ADVANCED

Lesson PDFreactor PrinceXML Antennahouse

footnotes-multi-columns

ERROR OK OK

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

positioning

Absolute positioning of text boxes

OK OK OK

right-to-left

Some hebrew text rendered right to left.

OK OK OK

typography

This test show the usage of the :first-letter and :first-line pseudo selectors.

with errors OK OK

background-repeated

This example should show a background image stretching over the complete width and height of the printable area.

OK OK OK

cmyk

This example shows the usage of CMYK for text and the capability to include images with CMYK colorspace.

OK OK OK

css-transformations2

OK OK OK

css-transformations3

This example show a text box and and an image - both mirrored using the CSS class flip.

OK OK OK

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

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)

ligatures

Simple text with and without ligatures.

ERROR OK OK

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)

SPECIAL

Lesson PDFreactor PrinceXML Antennahouse

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

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

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

chart-js

This example renders a chart using Javascript with help of the chart add-on chart.js (http://chartjs.org).

OK ERROR ERROR

complex-css

A complex CSS example with CSS positioning, fonts and some typography. Expected output:

images/lesson-complex-css-expected.png

Source: http://v1.jontangerine.com/silo/css/complex-type-fix/

OK OK OK

css-gradients

This example show the usage of CSS gradients

OK OK OK

flotr2-js

This example creates a chart using HTML5 and the Flotr2 JS chart engine (http://www.humblesoftware.com/flotr2/).

OK ERROR ERROR

mathml-native

Some MathML examples.

UNSUPPORTED with errors OK

mathml-torture-test

UNSUPPORTED with errors (OK)

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.

OK OK OK

xml

OK OK OK

xml-images

This lesson shows how to render an image from an arbitrary xml element with the image url given through an arbitrary attribute.

OK OK OK

PDFREACTOR

Lesson PDFreactor PrinceXML Antennahouse

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

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

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

pdfreactor-mathjax

Usage of MathJAX inside PDFreactor rendering MathML samples

OK

ANTENNAHOUSE

Lesson PDFreactor PrinceXML Antennahouse

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

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