This document is designed to showcase features in Prince. Prince creates a beautiful PDF documents from humble HTML elements by way of CSS.



Prince supports JavaScript so that programmers can achieve effects not possible in HTML and CSS along. 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. The next pages are more narrow and therefore only has room for one column. The number of columns is automatically adjusted based on the available width.

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