<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flying Saucer: CSS Font Sizing Support</title>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
<style>
body {
font-family: tahoma, verdana, arial;
}
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
}
.label {
text-align: left;
background-color: silver;
font-weight: bold;
}
</style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">
<span style="font-size: xx-large">CSS</span>
<span style="font-size: large">Font</span>
<span style="font-size: medium">Sizing</span>
<span style="font-size: xx-small">Support</span>
</span>
<br />
<p><b>Font sizing support includes</b>: Apart from the standard XHTML h1-h6 elements, you can also size
fonts using the <b>xx-small</b> through <b>xx-large</b> styling attributes, as well as proportionately-sized elements
using em, %, and ex.</p>
<br />
<h3>Table of Absolute versus HX Sizes</h3>
<table border="1" style="width: 100%">
<tr>
<th class="label" style="width: 10%; ">CSS abs-size</th>
<td style="width: 8%; font-size: xx-small;">xx-small</td>
<td style="width: 5%; font-size: x-small;">x-small</td>
<td style="width: 5%; font-size: small;">small</td>
<td style="width: 8%; font-size: medium;">medium</td>
<td style="width: 8%; font-size: large;">large</td>
<td style="width: 12%; font-size: x-large;">x-large</td>
<td style="width: 15%; font-size: xx-large;">xx-large</td>
</tr>
<tr>
<th class="label" style="width: 10%; ">HTML Headings</th>
<td style="width: 8%;"><h6>h6</h6></td>
<td style="width: 5%;">{n/a}</td>
<td style="width: 5%;"><h5>h5</h5></td>
<td style="width: 8%;"><h4>h4</h4></td>
<td style="width: 8%;"><h3>h3</h3></td>
<td style="width: 12%;"><h2>h2</h2></td>
<td style="width: 15%;"><h1>h1</h1></td>
</tr>
<tr>
<th class="label" style="width: 10%; ">HTML Font</th>
<td style="width: 8%;">1</td>
<td style="width: 5%;">{n/a}</td>
<td style="width: 5%;">2</td>
<td style="width: 8%;">3</td>
<td style="width: 8%;">4</td>
<td style="width: 12%;">5</td>
<td style="width: 15%;">6</td>
</tr>
</table>
<h3>Proportional Sizing using EM Square, EX, and %</h3>
<table border="1" style="width: 100%">
<tr>
<td width="33%">
<table border="0" width="100%">
<tr>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 0.6em">0.6em</span></p>
<p><span style="font-size: 0.7em">0.7em</span></p>
<p><span style="font-size: 0.8em">0.8em</span></p>
<p><span style="font-size: 0.9em">0.9em</span></p>
<p><span style="font-size: 1.0em">1.0em</span></p>
<p><span style="font-size: 1.1em">1.1em</span></p>
</td>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 1.2em">1.2em</span></p>
<p><span style="font-size: 1.3em">1.3em</span></p>
<p><span style="font-size: 1.4em">1.4em</span></p>
<p><span style="font-size: 1.5em">1.5em</span></p>
<p><span style="font-size: 1.6em">1.6em</span></p>
<p><span style="font-size: 1.7em">1.7em</span></p>
</td>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 1.8em">1.8em</span></p>
<p><span style="font-size: 1.9em">1.9em</span></p>
<p><span style="font-size: 2.0em">2.0em</span></p>
<p><span style="font-size: 3.0em">3.0em</span></p>
</td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 3ex">0.6ex</span></p>
<p><span style="font-size: 4ex">0.6ex</span></p>
<p><span style="font-size: 5ex">0.7ex</span></p>
<p><span style="font-size: 6ex">0.8ex</span></p>
<p><span style="font-size: 7ex">0.9ex</span></p>
<p><span style="font-size: 8ex">1.0ex</span></p>
<p><span style="font-size: 9ex">1.1ex</span></p>
</td>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 10ex">1.2ex</span></p>
<p><span style="font-size: 11ex">1.3ex</span></p>
<p><span style="font-size: 12ex">1.4ex</span></p>
</td>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 13ex">1.5ex</span></p>
<p><span style="font-size: 14ex">1.6ex</span></p>
</td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 60%">60%</span></p>
<p><span style="font-size: 70%">70%</span></p>
<p><span style="font-size: 80%">80%</span></p>
<p><span style="font-size: 90%">90%</span></p>
<p><span style="font-size: 100%">100%</span></p>
<p><span style="font-size: 110%">110%</span></p>
</td>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 120%">120%</span></p>
<p><span style="font-size: 130%">130%</span></p>
<p><span style="font-size: 140%">140%</span></p>
<p><span style="font-size: 150%">150%</span></p>
<p><span style="font-size: 160%">160%</span></p>
<p><span style="font-size: 170%">170%</span></p>
</td>
<td style="width: 33%; vertical-align: top">
<p><span style="font-size: 180%">180%</span></p>
<p><span style="font-size: 190%">190%</span></p>
<p><span style="font-size: 200%">200%</span></p>
<p><span style="font-size: 300%">300%</span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>