<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Text Sample</title>
<link href="../common.css" rel="stylesheet" type="text/css"/>
<style>
h2 {
margin-top: 2.5em;
}
#ligFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
font-family: ligfont;
font-size: 1.9em;
}
#ligFlex > span {
margin: 0.2em;
}
#ligFlex > span > span {
display: block;
}
#ligFlex > span > span:nth-child(2) {
-ro-glyph-layout-mode: quality;
}
@font-face {
font-family: ligfont;
src: url("fnt/PlayfairDisplay-Regular.ttf");
}
.fontSizeAdjustDemo {
font-family: serif;
white-space: nowrap;
font-size: 1.3em;
line-height: 2;
}
.fontSizeAdjustDemo span {
font-family: sans-serif;
}
.allbreaks {
width: 0.1px
}
@-ro-preferences {
initial-zoom: 125%;
}
</style>
</head>
<body>
<h1>Text Layout Sample</h1>
<p>This document demonstrates various styles that influence the way text is laid out and displayed.</p>
<h2>Advanced Font-based Text Layout</h2>
<p>By default PDFreactor does text layout for simple text, incl. Latin, in a performance optimized way that ignores some advanced font features.
This can be changed for all text via the property <code>-ro-glyph-layout-mode</code>:</p>
<div class="code"><code>:root {
-ro-glyph-layout-mode: quality;
}</code></div>
<p>This enables ligatures for fonts that support them.
The following comparison shows the default glyph layout on top
and quality glyph layout with ligatures on the bottom (the affected letter in all examples is the <b>f</b>):</p>
<p id="ligFlex">
<span><span>prefix</span><span>prefix</span></span>
<span><span>halfjacket</span><span>halfjacket</span></span>
<span><span>reflex</span><span>reflex</span></span>
<span><span>halfback</span><span>halfback</span></span>
<span><span>wolfhound</span><span>wolfhound</span></span>
<span><span>Kafka</span><span>Kafka</span></span>
<span><span>buffer</span><span>buffer</span></span>
<span><span>office</span><span>office</span></span>
<span><span>cliffjumper</span><span>cliffjumper</span></span>
<span><span>waffle</span><span>waffle</span></span>
<span><span>offbeat</span><span>offbeat</span></span>
<span><span>offhand</span><span>offhand</span></span>
<span><span>fifïfìfj</span><span>fifïfìfj</span></span>
</p>
<h2>Consistent Visual Font Size</h2>
<p>When multiple fonts are used in the same line of text, either explicitly or because of font fallback,
different sizes of letters may cause less than pleasing visual results and impact readability.
Applying the style <code>font-size-adjust: -ro-from-font</code> to an element adjusts the fonts sizes of its children,
so that they have the same x-height (lower-case letter size) as the font of the element itself.</p>
<p>Original:</p>
<div class="result fontSizeAdjustDemo">
Mixing fonts
<span>in a line</span>
can introduce an
<span>uneven appearance</span>
and decrease
<span>readability.</span>
<br>
<span>Mixing fonts</span>
in a line
<span>can introduce an</span>
uneven appearance
<span>and decrease</span>
readability.
</div>
<p>With "<code>font-size-adjust: -ro-from-font</code>":</p>
<div class="result fontSizeAdjustDemo" style="font-size-adjust: -ro-from-font">
Mixing fonts
<span>in a line</span>
can introduce an
<span>uneven appearance</span>
and decrease
<span>readability.</span>
<br>
<span>Mixing fonts</span>
in a line
<span>can introduce an</span>
uneven appearance
<span>and decrease</span>
readability.
</div>
<h2>Custom Line Breaking</h2>
<p>By default line breaking is done according to Unicode rules, which cover many languages and writing systems.
However, there are situations where modifying or overriding the breaking behavior will result in more pleasing output.
In addition to common properties like <code>white-space</code> PDFreactor provides <code>-ro-line-break-opportunity</code>,
allowing to adapt the behavior for the document or parts of it. The following examples illustrate different
line breaking behaviors for a long URL (broken at every opportunity for demonstration purposes): <code>http://host.tld/some/path-elements/file.ext?key1=val1&key2=val2</code></p>
<table>
<col style="width: 66%"><col style="width: 33%">
<thead>
<tr><th>Style</th><th>Result</th></tr>
</thead>
<tbody>
<tr><td><code>-ro-line-break-opportunity: normal</code><br>default<br>equal to not specifying anything</td><td><div class="allbreaks">http://host.tld/some/path-elements/file.ext?key1=val1&key2=val2</div></td></tr>
<tr><td><code>-ro-line-break-opportunity: normal '&' / '-'</code><br>tweak breaking<br>break after "&", but not after "-"</td><td><div class="allbreaks" style="-ro-line-break-opportunity: normal '&' / '-';">http://host.tld/some/path-elements/file.ext?key1=val1&key2=val2</div></td></tr>
<tr><td><code>-ro-line-break-opportunity: '' '[/?&]'</code><br>replace breaking<br>break before "/", "?" and "&"</td><td><div class="allbreaks" style="-ro-line-break-opportunity: '' '[/?&]';">http://host.tld/some/path-elements/file.ext?key1=val1&key2=val2</div></td></tr>
<tr><td><code>-ro-line-break-opportunity: '[^/]' '[/?&]'<br>-ro-line-break-opportunity: '' '[/?&]' / '/'</code><br>more advanced replacement<br>also avoid breaking inside "//"</td><td><div class="allbreaks" style="-ro-line-break-opportunity: '' '[/?&]' / '/';">http://host.tld/some/path-elements/file.ext?key1=val1&key2=val2</div></td></tr>
</tbody>
</table>
</body>
</html>