Blue-sky printing
There are many reasons for using Prince. We will show you 8.
| one: | JavaScript |     |     |     |     | three: | CSS3 columns |     |     |     |
| ---- | ---------- | --- | --- | --- | --- | ------ | ------------ | --- | --- | --- |
Prince supports JavaScript so that programmers can This document is laid out in two columns on the
achieve effects not possible in HTML and CSS along. first page. The next pages are more narrow and
For example, this document has a small script that au- therefore only has room for one column. The
tomatically generates a table of contents: numberofcolumnsisautomaticallyadjustedbased
on the available width.
|     | JavaScript.....................1 |     | CSS3 transforms..........1    |     |     |                  |     |     |     |     |
| --- | -------------------------------- | --- | ----------------------------- | --- | --- | ---------------- | --- | --- | --- | --- |
|     | More JavaScript..........1       |     | Background images.....2       |     |     |                  |     |     |     |     |
|     | CSS3 columns.............1       |     | CSS3 selectors..............2 |     |     | 4: Styling pages |     |     |     |     |
|     | Styling pages................1   |     | More transforms.........2     |     |     |                  |     |     |     |     |
Thesecondpageofthisdocumentisdifferentfromthefirst:it’sup-
|      |                 |     |     |     |     | right and | it has no background | image. This | is achieved | by styling |
| ---- | --------------- | --- | --- | --- | --- | --------- | -------------------- | ----------- | ----------- | ---------- |
| two: | More JavaScript |     |     |     |     |           |                      |             |             |            |
pages instead of elements.
|     | This document | lists 8 numbered      | features. | Notice      | that the |     |     |     |     |     |
| --- | ------------- | --------------------- | --------- | ----------- | -------- | --- | --- | --- | --- | --- |
|     | first three   | features are numbered | with      | spelled-out | numbers, |     |     |     |     |     |
5: CSS3 transforms
|     | while therest | use digits. This | is achieved | withasmall | script |     |     |     |     |     |
| --- | ------------- | ---------------- | ----------- | ---------- | ------ | --- | --- | --- | --- | --- |
thatexchangesdigitsforletterswhenthenumberisthreeor
smaller. CSS3 introduces transforms, which can be used to scale and

Prince
| 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.
6: 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,noticehowthebackgroundimageis
«bleeding»;itextendsslightlyoutsidethe
pagetoavoidwhiteedgeswhenthepaper
is cut.
7: 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.
8: More transforms
Transformscanbeappliedtoimagesaswellastext.Belowistheblue-skybackground im-
age rotated at various angles.