<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@page {
size: a4;
margin: 21mm;
padding: 8mm 0 5mm;
border-bottom: thin solid black;
@bottom-center {
font: 12pt "Georgia", serif;
content: counter(page);
vertical-align: top;
margin: 0.3em 0;
}
@top-center {
font: 12pt "Georgia", serif;
content: "The magic of Prince";
vertical-align: bottom;
margin: 0.3em 0;
}
@footnotes {
border-top: thin solid black;
padding-top: 0.3em;
margin-top: 0.6em;
}
}
@page :first {
@top-center {
content: normal;
}
}
body {
font: 10.5pt/14.5pt Georgia, serif;
counter-reset: issue;
}
h1 {
font-size: 3em;
text-align: center;
font-weight: normal;
margin: 0;
}
h2 {
font-weight: normal;
font-size: 1.4em;
padding: 0;
margin: 1em 0 0.2em;
counter-increment: issue;
clear: both;
page-break-after: avoid;
}
h2:before {
content: "#" counter(issue) ": ";
}
h3 {
font-weight: normal;
font-size: 1.4em;
padding: 0;
margin: 0.4em 0 0.2em;
clear: both;
page-break-after: avoid;
}
p {
margin: 0.3em 0;
}
a { text-decoration: none; color: black }
address {
display: block;
text-align: center;
margin-top: 1em;
font-size: 40pt;
}
.abstract {
font-size: 1.1em;
line-height: 1.4;
text-align: justify;
margin: 1em 0;
}
.multi-column {
column-count: 2;
column-gap: 1.5em;
text-align: justify;
}
#toc ul, #toc li {
list-style: none;
margin: 0;
padding: 0;
}
#toc a::after {
content: leader('.') target-counter(attr(href), page);
font-style: normal;
}
blockquote {
border: thin solid black;
font-style: italic;
margin: 0em;
padding: 0.4em;
background: #EEE;
text-align: left;
page-break-inside: avoid;
}
blockquote.right {
float: right;
width: 9em;
margin-left: 0.8em;
}
#prince-logo {
background: #fff;
width: 6em;
height: 8.5em;
margin: 0 0.7em 0 0;
float: left;
}
#crown {
background: red;
width: 3.5em;
height: 3.5em;
margin: 0.4em 0.7em 0 0;
float: left;
}
.footnote {
display: none;
display: prince-footnote;
position: footnote;
counter-increment: footnote;
footnot-style-position: inside;
margin-left: 1.4em;
font-size: 90%;
line-height: 1.4;
}
.footnote::footnote-call {
vertical-align: super;
font-size: 80%;
}
.footnote::footnote-marker {
vertical-align: super;
color: green;
padding-right: 0.4em;
}
table {
border-collapse: collapse;
}
td.empty {
border: none;
}
td, th {
border: 1px dotted black;
padding: 0.3em;
text-align: left;
}
.hidden {
border-top: hidden;
border-left: hidden;
}
p.change {
border-left: solid dotted;
padding-left: 0.4em;
}
.author {
display: block;
margin: 0.2em 0;
font-style: normal;
text-align: right;
}
table {
margin: 1em 0;
}
div.toptable {
margin: 1em 0 2em;
float: top;
width: 100%;
}
div.toptable table {
width: 100%;
}
div.toptable td {
background: #EEE;
border: 0.15em solid white;
}
div.toptable td.empty {
background: white;
}
p.caption {
font-weight: bold;
}
a.xref:after {
content: " " target-counter(attr(href), page);
}
</style>
<title></title>
</head>
<body>
<h1>The <em>magic</em> of Prince</h1>
<svg
id="prince-logo"
xmlns="http://www.w3.org/2000/svg"
x="0.0000000"
y="0.0000000"
width="88.582672"
height="124.01575">
<path
d="M 38.356041,81.746092 C 35.263041,72.956590 31.566241,61.436190 21.749741,46.464890 C 32.036841,50.506990 38.577141,51.191390 45.314941,51.352290 C 57.369845,50.000890 55.974841,49.870590 71.975345,41.101090 C 62.851945,56.560290 60.546645,66.550690 57.317045,76.347290 C 53.887741,87.080392 50.506441,99.309282 50.633841,117.13628 C 40.478941,116.89408 54.538541,117.30228 44.383741,117.06008 C 43.836041,100.84208 41.534241,89.960492 38.356041,81.746092 z "
style="font-size:12.000000;fill:#000000;fill-opacity:1.0000000;"
id="path590" />
<rect
width="11.694850"
height="8.7500296"
x="7.8187447"
y="37.992584"
style="font-size:12.000000;fill:#ff6d00;fill-opacity:1.0000000;fill-rule:evenodd;"
id="rect591" />
<rect
width="11.253332"
height="9.1588383"
x="-38.811146"
y="-16.734291"
transform="matrix(-0.851293,-0.524690,0.622537,-0.782590,0.000000,0.000000)"
style="font-size:12.000000;fill:#ff6d00;fill-opacity:1.0000000;fill-rule:evenodd;"
id="rect592" />
<rect
width="10.467754"
height="9.8088474"
x="20.924669"
y="-29.642246"
transform="matrix(0.382115,0.924115,-0.952320,0.305101,0.000000,0.000000)"
style="font-size:12.000000;fill:#ff6d00;fill-opacity:1.0000000;fill-rule:evenodd;"
id="rect593" />
<rect
width="10.294170"
height="9.9406109"
x="-19.720404"
y="44.949844"
transform="matrix(6.956171e-17,-1.000000,1.000000,5.389677e-17,0.000000,0.000000)"
style="font-size:12.000000;fill:#ff6d00;fill-opacity:1.0000000;fill-rule:evenodd;"
id="rect594" />
<rect
width="10.894750"
height="9.4668550"
x="18.023911"
y="56.489189"
transform="matrix(0.689993,-0.723816,0.804380,0.594115,0.000000,0.000000)"
style="font-size:12.000000;fill:#ff6d00;fill-opacity:1.0000000;fill-rule:evenodd;"
id="rect595" />
<rect
width="11.360848"
height="9.0623503"
x="42.023403"
y="59.057850"
transform="matrix(0.891483,-0.453053,0.548457,0.836179,0.000000,0.000000)"
style="font-size:12.000000;fill:#ff6d00;fill-opacity:1.0000000;fill-rule:evenodd;"
id="rect596" />
<ellipse
cx="21.523279"
cy="19.545830"
rx="4.6658859"
ry="4.8163991"
d="M 26.189165 19.545830 A 4.6658859 4.8163991 0 1 0 16.857393,19.545830 A 4.6658859 4.8163991 0 1 0 26.189165 19.545830 z"
transform="matrix(1.577548,0.000000,0.000000,1.510976,11.63435,9.738582)"
style="font-size:12.000000;fill:#000000;fill-opacity:1.0000000;fill-rule:evenodd;"
id="ellipse597" />
</svg>
<p class="abstract">Prince is a computer program that converts XML
into PDF documents. It is simple, yet very powerful. The purpose of
this small document is to showcase the formatting magic Prince can
do. We have chosen to highlight ten of our favorite features. This
document is written in XHTML and converted to PDF by (you
guessed it) Prince. The entire document is generated by one
single 13k XHTML file with embedded CSS and SVG.</p>
<div class="multi-column">
<h3>Table of contents</h3>
<div id="toc">
<ul>
<li><a href="#columns">Columns</a></li>
<li><a href="#counters">Counters</a></li>
<li><a href="#xref">Cross-references</a></li>
<li><a href="#leaders">Leaders</a></li>
<li><a href="#footnotes">Footnotes</a></li>
<li><a href="#svg">SVG</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#box">Box model</a></li>
<li><a href="#floats">Page floats</a></li>
<li><a href="#hf">Headers and Footers</a></li>
</ul>
</div>
<h2 id="columns">Columns</h2>
<p>If you are reading the PDF version of this document, the first
thing you may notice is the two-column layout. Columns are
commonly used on paper and Prince supports <a
href="http://www.w3.org/TR/css3-multicol">CSS multi-column</a>
layouts. In this document, the number of columns has been set to 2,
with a 1.5em gap between the columns. You can also specify that
there should be a border between the columns.</p>
<h2 id="counters">Counters</h2>
<p>If you are reading the XHTML source code of this document, look
for the <code>h2</code> elements. You will notice that they contain
the text of the headings, but not their number. The list item
number, including the <q>#</q> and <q>:</q> are
automatically generated by the style sheet. Generated
content and counters are especially useful for complex documents.
They are described in <a href="">CSS level 2.1</a>.</p>
<h2 id="xref">Cross-references</h2>
<p>Prince can read hyperlinks inside a document and generate page
numbers accordingly. For example, it will automatically find out
which page <em>Headers and Footers</em> are discussed on (<a
class="xref" href="#hf">page</a>). Cross-references are used to
generate the <em>Table of contents</em> (<a class="xref"
href="#toc">page</a>).</p>
<h2 id="leaders">Leaders</h2>
<p>Leaders consist of dots or dashes in a row leading the eye
across a page. For example, the <em>Table of contents</em> has
leaders in it. The leaders are not found in the document itself,
but rather in the style sheet.</p>
<h2 id="footnotes">Footnotes</h2>
<p>Footnotes<span class="footnote">A footnote is a note placed at
the bottom of a page of a book or manuscript that comments on or
cites a reference for a designated part of the text.</span> are
essential in printed documents and Prince knows how to generate
them. Unlike what some people think, footnotes are not the place to
put information you don't want to see. More often, footnotes will
actually attract attention. 9 of 10 of readers will read the
footnotes before they read the text from where the footnotes are
anchored<span class="footnote">Often, the most interesting
information is found in the footnotes.</span>.</p>
<h2 id="svg">SVG</h2>
<p>
<svg id="crown" viewBox="50 50 600 600" xmlns="http://www.w3.org/2000/svg">
<path
style="fill:#fdd900"
d="M 171.01182,604.47408 L 89.577621,205.44649 L 252.44602,413.10371 L 411.24271,156.58597 L 525.25059,417.17542 L 610.75651,238.02018 L 594.46967,600.40237 L 171.01182,604.47408 z "/>
</svg>
Scalable Vector Graphics (SVG) is a language for describing two-
dimensional graphics for the web. SVG images scale better than
traditional bitmapped images and are suitable for printing. The
crown is generated by two SVG elements.</p>
<h2 id="tables">Tables</h2>
<p>Tables are commonly used on the web to achieve certain spatial
layouts. Ourselves, we prefer using CSS for layouts and tables for
tabular data. Here is an example of a real table:</p>
<table>
<tr>
<th class="hidden"></th>
<th>Color</th>
<th>Fruit</th>
<th>Computer</th>
</tr>
<tr>
<th>Apple</th>
<td>no</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<th>Orange</th>
<td>yes</td>
<td>yes</td>
<td>no</td>
</tr>
</table>
<p>More complex tables are also possible, including tables within
tables.</p>
<h2 id="floats">Page floats</h2>
<div class="toptable">
<table>
<tr>
<td>H</td>
<td colspan="16" class="empty"></td>
<td>He</td>
</tr>
<tr>
<td>Li</td>
<td>Be</td>
<td colspan="10" class="empty"></td>
<td>B</td>
<td>C</td>
<td>N</td>
<td>O</td>
<td>F</td>
<td>Ne</td>
</tr>
<tr>
<td>Na</td>
<td>Mg</td>
<td colspan="10" class="empty"></td>
<td>Al</td>
<td>Si</td>
<td>P</td>
<td>S</td>
<td>Cl</td>
<td>Ar</td>
</tr>
<tr>
<td>K</td>
<td>Ca</td>
<td>Sc</td>
<td>Ti</td>
<td>V</td>
<td>Cr</td>
<td>Mn</td>
<td>Fe</td>
<td>Co</td>
<td>Ni</td>
<td>Cu</td>
<td>Zn</td>
<td>Ga</td>
<td>Ge</td>
<td>As</td>
<td>Se</td>
<td>Br</td>
<td>Kr</td>
</tr>
<tr>
<td>Rb</td>
<td>Sr</td>
<td>Y</td>
<td>Zr</td>
<td>Nb</td>
<td>Mo</td>
<td>Tc</td>
<td>Ru</td>
<td>Rh</td>
<td>Pd</td>
<td>Ag</td>
<td>Cd</td>
<td>In</td>
<td>Sn</td>
<td>Sb</td>
<td>Te</td>
<td>I</td>
<td>Xe</td>
</tr>
<tr>
<td>Cs</td>
<td>Ba</td>
<td>La</td>
<td>Hf</td>
<td>Ta</td>
<td>W</td>
<td>Re</td>
<td>Os</td>
<td>Ir</td>
<td>Pt</td>
<td>Au</td>
<td>Hg</td>
<td>Tl</td>
<td>Pb</td>
<td>Bi</td>
<td>Po</td>
<td>At</td>
<td>Rn</td>
</tr>
<tr>
<td>Fr</td>
<td>Ra</td>
<td>Ac</td>
</tr>
</table>
<p class="caption"><em>Table 1:</em> This table floats to the top
of the page.</p>
</div>
<p>On paged media, elements can be set float to the top or bottom
of pages. The table at the top of this page is an example.</p>
<h2 id="box">Box model</h2>
<p>CSS offers a powerful box model for styling particular elements.
Each element has three <em>bands</em> around it: the padding, border
and margin. Consider this example:</p>
<blockquote>May God spare you from marriage with one who writes
books!<br />
<span class="author">—Bjørnstjerne
Bjørnson</span></blockquote>
<p>The quote above has a background color which extends into the
padding area. Outside the padding is a thin solid border.</p>
<blockquote class="right">May God spare you from marriage with one
who writes books!<br />
<span class="author">—Bjørnstjerne
Bjørnson</span></blockquote>
<p>Boxes can float to the right or left, allowing other content to
wrap around it. Typically, images are presented this way. However,
we thought the quote was so important that we show it twice.</p>
<h2 id="hf">Headers and footers</h2>
<p>Printed documents often have page headers and footers. For example,
page numbers are often printed at the bottom of the page, and the
document and/or chapter title is shown at the top – except on
title pages. The headers and footers on this document use this style.
Nice, isn't it?</p>
</div>
<address>
<a href="http://www.princexml.com">www.princexml.com</a>
</address>
</body>
</html>