This document is designed to showcase new features in Prince 8.1. Prince creates a beautiful PDF document from the humble HTML elements found in this document.

Prince 8


The biggest news in Prince 8 is the introduction of JavaScript. JavaScript is the programming language of choice on the web. In Prince 8, JavaScript is put to good use. For example, this document has a small script that automatically generates a table of contents:

More JavaScript

This document lists 8 numbered features. Notice that the first three features are numbered with spelled-out numbers, while the rest use digits. This is achieved with a small script that exchanges digits for letters when the number is three or smaller.

CSS3 columns

This document is laid out in two columns (on the first page, that is — the next page is upright and therefore uses only one column). The multi-column layout can be escaped with the 'column-span' property, used on the text below.

the trinity of the web:  HTML, CSS and JavaScript

Styling pages

The second page of this document is different from the first: it's upright and it has no background image. This is achieved by styling pages instead of elements.

CSS3 transforms

CSS3 introduces transforms, which can be used to scale and rotate elements. «Prince 8» is rotated 90 degerees on the right. Also, it has been moved to a margin box so that it appears outside the normal text flow.

Background images

The image on the right is used as the background image on the first page. There, only part of the image is visible. This is achieved by carefully setting the position and pixel-density of the image. Also, notice how the background image is «bleeding»; it extends slightly outside the page to avoid white edges when the paper is cut.

CSS3 selectors

Notice how every other item in our list of eight is in italics. This is achieved by selecting and styling even-numbered items.

More transforms

Transforms can be applied to images as well as text. Below is the blue-sky background image rotated at various angles.