Lessons

INTRO

Lesson PDFreactor Prince Antenna­house Weasy­print PagedJS Typeset.sh

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 OK OK

fonts

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

OK OK OK OK OK OK

fonts-emoji

This examples uses the TwitterEmoji OpenType font.

OK OK OK 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 OK OK OK

border-model

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

OK OK OK OK ERROR OK

footnotes

This example explains how to generate footnotes from HTML markup and how to style the marker and the footnote text itself.

Further reading:

OK OK OK ERROR ERROR ERROR

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 ERROR ERROR

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 ERROR ERROR

page-areas

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

Further reading:

OK OK OK OK OK OK

page-numbers

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

OK OK OK OK ERROR OK

pagination

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

OK OK OK 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).

Further reading:

OK OK OK OK ERROR 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 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.

Further reading:

OK OK OK 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.

Further reading:

OK OK OK OK ERROR 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 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 ERROR OK ERROR

multiple-backgrounds

This example renders two background images for the same element.

OK OK OK 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 OK ERROR 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 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 ERROR OK OK

image-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 OK OK

ADVANCED

Lesson PDFreactor Prince Antenna­house Weasy­print PagedJS Typeset.sh

footnotes-multi-columns

Display footnotes within a multi column setup. Footnotes are being rendered either across all columns or within the column of their occurrence (depending on the converter).

(OK) OK OK ERROR ERROR ERROR

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 OK ERROR OK

positioning

Absolute positioning of text boxes

OK OK OK OK ERROR OK

right-to-left

Some hebrew text rendered right to left.

OK OK OK ERROR OK OK

typography

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

with errors OK OK ERROR) OK ERROR

background-repeated

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

OK OK OK OK ERROR OK

cmyk

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

OK OK OK OK OK OK

grid

This example show a form/report implemented using CSS grid.

OK ERROR ERROR ERROR OK OK

flex

This example shows a nested grid.

OK OK ERROR OK OK OK

flex2

This example shows a nested grid.

OK OK ERROR OK OK OK

css-transformations2

OK OK OK 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 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 OK OK OK

css-zindex-2

ERROR OK OK OK OK OK

ligatures

Simple text with and without ligatures.

ERROR OK OK (OK) (OK) (OK)

metadata-pdfua

This example shows two things. First, it demonstrates how to generate PDF metadata directly from HTML <meta> elements. This works out-of-the-box with all converters. Some converters all you to specify the metadata through their API or through commandline parameters. Second, the example demonstrates how to generate a PDF with UA (universal accesiblity) profile (support for screen readers). Only Antennahouse, PDFreactor and PrinceXML support the PDF/UA profile as an optional conversion option. This is usually combined with the inclusion of tagged content which is usually named a tagged PDF.

Check the Makefile in the Github repository (link above) for investigating the related commandline parameters for PDF/UA and tagged PDF.

We used the PAC Checker (https://www.access-for-all.ch/ch/pdf-werkstatt/pdf-accessibility-checker-pac.html) for checking PDF/UA compliance.

OK OK OK OK OK OK

archive-pdf

Support for "archive PDF" aka PDF/A profile is available for Prince, Antennahouse and PDFreactor.

Check the Makefile in the Github repository (link above) for investigating the related commandline parameters for PDF/A. Note that Antennahouse requires a dedicated config.xml file with a reference to an existing ICC profile file (here default_rgb.icc).

We used the VeraPDF Checker (https://verapdf.org) for checking PDF/A compliance.

OK 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) OK OK ERROR

SPECIAL

Lesson PDFreactor Prince Antenna­house Weasy­print PagedJS Typeset.sh

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 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) ERROR ERROR ERROR ERROR

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 OK OK ERROR OK ERROR

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 ERROR ERROR

complex-css

A complex CSS example with CSS positioning, fonts and some typography. Expected output: http://v1.jontangerine.com/silo/css/complex-type-fix/

OK OK (OK) OK OK ERROR

css-gradients

This example show the usage of CSS gradients

OK OK (OK) OK OK ERROR

flotr2-js

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

OK ERROR UNSUPPORTED UNSUPPORTED UNSUPPORTED UNSUPPORTED

mathml-native

Some MathML examples.

UNSUPPORTED with errors OK UNSUPPORTED UNSUPPORTED UNSUPPORTED

mathml-torture-test

UNSUPPORTED with errors (OK) UNSUPPORTED UNSUPPORTED UNSUPPORTED

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 UNSUPPORTED UNSUPPORTED UNSUPPORTED

xml

OK OK OK UNSUPPORTED UNSUPPORTED UNSUPPORTED

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 UNSUPPORTED UNSUPPORTED UNSUPPORTED

PDFREACTOR

Lesson PDFreactor Prince Antenna­house Weasy­print PagedJS Typeset.sh

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 Prince Antenna­house Weasy­print PagedJS Typeset.sh

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

PRINCEXML

Lesson PDFreactor Prince Antenna­house Weasy­print PagedJS Typeset.sh

prince-table-tricks

This lesson shows to table tricks with PrinceXML. First, you can specify an alternative table caption in case of a table split over two or more pages (see prince-caption-page property in the HTML code). Second, you can rotate the content of a page while maintaining headers and footers (see the prince-rotate-property). In addition, you can rotate content depending on being on a left or right page.

OK