font-display : The Font Display Property
Summary
The font-display property controls how font files are displayed based on whether and when they are downloaded and ready to use. This property is currently recognized by Scryber.Core but not applied during PDF rendering. It is included for CSS compatibility with web standards.
Usage
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
/* Typically used in @font-face rules */
@font-face {
font-family: 'CustomFont';
src: url('custom.woff2');
font-display: swap;
}
Values
Keyword Values
- auto - Browser/system determines font display strategy (default)
- block - Block text rendering until font loads (short block period, infinite swap)
- swap - Show fallback immediately, swap to custom font when available
- fallback - Very short block period, short swap period
- optional - Very short block period, no swap period
Notes
- This property is currently not implemented in Scryber.Core
- The CSS parser recognizes the property but skips to the next attribute without applying changes
- No behavioral effect will be seen when this property is applied in PDF generation
- In web contexts,
font-displaycontrols the Font Loading API behavior - PDF generation typically loads all fonts before rendering, making this property less relevant
- Included for CSS compatibility when using shared stylesheets between web and PDF
- The property is primarily relevant for
@font-facedeclarations in web development - Future versions may implement font loading strategies if asynchronous font loading is added
Data Binding
CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. While font-display is not currently implemented in Scryber.Core (as it’s primarily a web-focused property), the data binding syntax is supported for shared web/PDF stylesheets.
Binding Syntax
Data binding expressions are enclosed in double curly braces `` and can reference:
- Model properties: ``
- Nested data: ``
- Conditional expressions: ``
Data Binding Examples
<!-- Dynamic font-display from configuration (no effect in PDF) -->
<style>
@font-face {
font-family: 'DynamicFont';
src: url('');
font-display: ;
}
</style>
<!-- Conditional display strategy (no effect in PDF) -->
<div style="font-display: ">
Configuration-aware font display
</div>
<!-- Shared web/PDF stylesheet with binding -->
<body>
<style>
/* Binding in @font-face for web use */
@font-face {
font-family: '';
src: url('');
font-display: ;
}
body {
font-family: '', Arial, sans-serif;
}
</style>
<p style="font-display: ">
Content with bound font-display property
</p>
<!-- Environment-specific configuration -->
<div style="font-display: ">
<h1 id="float--float-property">float : Float Property</h1>
<p>The <code class="language-plaintext highlighter-rouge">float</code> property specifies whether an element should float to the left or right side of its container, allowing text and inline elements to wrap around it. This is essential for creating magazine-style layouts, image captions, sidebars, and multi-column designs in PDF documents.</p>
<h2 id="usage">Usage</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">selector</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="n">value</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The float property accepts three values that control how elements are positioned within the document flow.</p>
<hr />
<h2 id="supported-values">Supported Values</h2>
<h3 id="none-default">none (default)</h3>
<p>The element does not float and will be displayed where it appears in the normal document flow. This is the default behavior.</p>
<h3 id="left">left</h3>
<p>The element floats to the left side of its containing block. Content flows around the right side of the floated element.</p>
<h3 id="right">right</h3>
<p>The element floats to the right side of its containing block. Content flows around the left side of the floated element.</p>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">float</code> property can be applied to:</p>
<ul>
<li>Block elements (<code class="language-plaintext highlighter-rouge"><div></code>, <code class="language-plaintext highlighter-rouge"><section></code>, <code class="language-plaintext highlighter-rouge"><article></code>)</li>
<li>Images (<code class="language-plaintext highlighter-rouge"><img></code>)</li>
<li>Figures (<code class="language-plaintext highlighter-rouge"><figure></code>)</li>
<li>Tables (<code class="language-plaintext highlighter-rouge"><table></code>)</li>
<li>Paragraphs (<code class="language-plaintext highlighter-rouge"><p></code>)</li>
<li>All container elements</li>
</ul>
<hr />
<h2 id="notes">Notes</h2>
<ul>
<li>Floated elements are taken out of the normal document flow</li>
<li>Text and inline elements wrap around floated elements</li>
<li>Multiple floated elements will stack horizontally if space permits</li>
<li>Use <code class="language-plaintext highlighter-rouge">clear</code> property to control element behavior after floats</li>
<li>Floated elements should typically have a defined width</li>
<li>Floats are ideal for text wrapping around images</li>
<li>Parent containers may need <code class="language-plaintext highlighter-rouge">overflow: auto</code> or clearfix to properly contain floats</li>
<li>Margins on floated elements create space between the float and surrounding content</li>
<li>Floats work within their containing block and don’t extend beyond it</li>
</ul>
<hr />
<h2 id="data-binding">Data Binding</h2>
<p>The <code class="language-plaintext highlighter-rouge">float</code> property supports data binding, allowing dynamic control of element floating behavior based on your data model. This enables configurable layouts where image positions, sidebar alignments, and content flow can be controlled through data.</p>
<h3 id="example-1-dynamic-image-float-direction-based-on-layout-preferences">Example 1: Dynamic image float direction based on layout preferences</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.article-image</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="n">pt</span> <span class="n">pt</span> <span class="n">pt</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="n">pt</span> <span class="nb">solid</span> <span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-text</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"article-image"</span> <span class="na">src=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"article-text"</span><span class="nt">></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<p>Data model:</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"floatDirection"</span><span class="p">:</span><span class="w"> </span><span class="s2">"left"</span><span class="p">,</span><span class="w">
</span><span class="nl">"width"</span><span class="p">:</span><span class="w"> </span><span class="mi">150</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginTop"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginRight"</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginBottom"</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginLeft"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderWidth"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#d1d5db"</span><span class="p">,</span><span class="w">
</span><span class="nl">"padding"</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="p">,</span><span class="w">
</span><span class="nl">"backgroundColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"white"</span><span class="p">,</span><span class="w">
</span><span class="nl">"source"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image.jpg"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"alignment"</span><span class="p">:</span><span class="w"> </span><span class="s2">"justify"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"article"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="s2">"This is the article text that wraps around the floated image..."</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<h3 id="example-2-configurable-sidebar-float-position">Example 2: Configurable sidebar float position</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="n">pt</span> <span class="nb">solid</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="nt">h3</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><h3></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li></li></span>
<span class="nt"><li></li></span>
<span class="nt"><li></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></h1></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<p>Data model:</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"sidebar"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"floatDirection"</span><span class="p">:</span><span class="w"> </span><span class="s2">"left"</span><span class="p">,</span><span class="w">
</span><span class="nl">"width"</span><span class="p">:</span><span class="w"> </span><span class="mi">150</span><span class="p">,</span><span class="w">
</span><span class="nl">"backgroundColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#f3f4f6"</span><span class="p">,</span><span class="w">
</span><span class="nl">"padding"</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginRight"</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginLeft"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderWidth"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#d1d5db"</span><span class="p">,</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Navigation"</span><span class="p">,</span><span class="w">
</span><span class="nl">"titleFontSize"</span><span class="p">:</span><span class="w"> </span><span class="mi">12</span><span class="p">,</span><span class="w">
</span><span class="nl">"titleColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#1e3a8a"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"nav"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"item1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Home"</span><span class="p">,</span><span class="w">
</span><span class="nl">"item2"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Products"</span><span class="p">,</span><span class="w">
</span><span class="nl">"item3"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Services"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"leftMargin"</span><span class="p">:</span><span class="w"> </span><span class="mi">190</span><span class="p">,</span><span class="w">
</span><span class="nl">"rightMargin"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Main Content Area"</span><span class="p">,</span><span class="w">
</span><span class="nl">"body"</span><span class="p">:</span><span class="w"> </span><span class="s2">"The main content appears next to the floated sidebar..."</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<h3 id="example-3-data-driven-callout-box-positioning">Example 3: Data-driven callout box positioning</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.callout</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="n">pt</span> <span class="n">pt</span> <span class="n">pt</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="n">pt</span> <span class="nb">solid</span> <span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.callout</span> <span class="nt">h4</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.callout</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="n">pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><h1></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"callout"</span><span class="nt">></span>
<span class="nt"><h4></h4></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<p>Data model:</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"document"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"User Guide"</span><span class="p">,</span><span class="w">
</span><span class="nl">"mainContent"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Main instructional text flows around the floating callout box..."</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"callout"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"float"</span><span class="p">:</span><span class="w"> </span><span class="s2">"right"</span><span class="p">,</span><span class="w">
</span><span class="nl">"width"</span><span class="p">:</span><span class="w"> </span><span class="mi">160</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginTop"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginRight"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginBottom"</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="p">,</span><span class="w">
</span><span class="nl">"marginLeft"</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="p">,</span><span class="w">
</span><span class="nl">"padding"</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="p">,</span><span class="w">
</span><span class="nl">"backgroundColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#dcfce7"</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderWidth"</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#16a34a"</span><span class="p">,</span><span class="w">
</span><span class="nl">"borderRadius"</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="p">,</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Tip"</span><span class="p">,</span><span class="w">
</span><span class="nl">"titleFontSize"</span><span class="p">:</span><span class="w"> </span><span class="mi">11</span><span class="p">,</span><span class="w">
</span><span class="nl">"titleColor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#166534"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Helpful advice for users..."</span><span class="p">,</span><span class="w">
</span><span class="nl">"textFontSize"</span><span class="p">:</span><span class="w"> </span><span class="mi">9</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-image-floating-left-with-text-wrap">Example 1: Image floating left with text wrap</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.article-image</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">15pt</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-text</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"article-image"</span> <span class="na">src=</span><span class="s">"image.jpg"</span> <span class="nt">/></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"article-text"</span><span class="nt">></span>
This is the article text that wraps around the floated image.
The image appears on the left side while text flows naturally
around its right edge. This creates a professional magazine-style
layout that is perfect for reports, newsletters, and documents.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-2-image-floating-right-with-text-wrap">Example 2: Image floating right with text wrap</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.photo</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">180pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.caption</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"photo"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"photo.jpg"</span> <span class="na">width=</span><span class="s">"100%"</span> <span class="nt">/></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">></span>Figure 1: Product image<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><h2></span>Product Description<span class="nt"></h2></span>
<span class="nt"><p></span>
Our innovative product brings cutting-edge technology to your
fingertips. The image shown floats to the right, allowing the
text to flow naturally around it, creating an engaging and
professional layout for your documents.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-3-sidebar-layout-with-float">Example 3: Sidebar layout with float</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="nt">h3</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="nt">ul</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">190pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><h3></span>Navigation<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Home<span class="nt"></li></span>
<span class="nt"><li></span>Products<span class="nt"></li></span>
<span class="nt"><li></span>Services<span class="nt"></li></span>
<span class="nt"><li></span>Contact<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Main Content Area<span class="nt"></h1></span>
<span class="nt"><p></span>The main content appears next to the floated sidebar...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-4-two-column-layout-with-floats">Example 4: Two-column layout with floats</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.column</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">48%</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">4%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.column</span><span class="nd">:last-child</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.column</span> <span class="nt">h2</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.column</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"text-align: center;"</span><span class="nt">></span>Newsletter<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>
<span class="nt"><h2></span>Column One<span class="nt"></h2></span>
<span class="nt"><p></span>First column content goes here. This creates a professional
two-column layout perfect for newsletters and reports.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>
<span class="nt"><h2></span>Column Two<span class="nt"></h2></span>
<span class="nt"><p></span>Second column content goes here. Both columns appear side
by side using the float property.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-5-pull-quote-floating-right">Example 5: Pull quote floating right</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.pull-quote</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f5f5f5</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article"</span><span class="nt">></span>
<span class="nt"><h1></span>Article Title<span class="nt"></h1></span>
<span class="nt"><p></span>First paragraph of the article text...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"pull-quote"</span><span class="nt">></span>
"This important quote stands out and draws the reader's attention."
<span class="nt"></div></span>
<span class="nt"><p></span>The article continues with more paragraphs that wrap around
the floated pull quote, creating visual interest...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-6-info-box-floating-left">Example 6: Info box floating left</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.info-box</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">180pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">20pt</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-box</span> <span class="nt">h4</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">8pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.info-box</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.4</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"info-box"</span><span class="nt">></span>
<span class="nt"><h4></span>Did You Know?<span class="nt"></h4></span>
<span class="nt"><p></span>Interesting fact or additional information that complements
the main text.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><h1></span>Main Article<span class="nt"></h1></span>
<span class="nt"><p></span>The main article text flows around the floated info box,
creating an engaging layout that draws attention to key facts...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-7-multiple-images-floating">Example 7: Multiple images floating</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.thumbnail</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.gallery-text</span> <span class="p">{</span>
<span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h2></span>Image Gallery<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"thumbnail"</span><span class="nt">></span>Image 1<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"thumbnail"</span><span class="nt">></span>Image 2<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"thumbnail"</span><span class="nt">></span>Image 3<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"thumbnail"</span><span class="nt">></span>Image 4<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"gallery-text"</span><span class="nt">></span>
<span class="nt"><p></span>Gallery description appears after all floated images...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-8-product-listing-with-floats">Example 8: Product listing with floats</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.product</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-image</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">120pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">120pt</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-details</span> <span class="nt">h3</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">8pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-price</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#16a34a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-image"</span><span class="nt">></span>Product Image<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-details"</span><span class="nt">></span>
<span class="nt"><h3></span>Product Name<span class="nt"></h3></span>
<span class="nt"><p></span>Product description and features...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-price"</span><span class="nt">></span>$99.99<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-9-document-header-with-floating-logo">Example 9: Document header with floating logo</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.document-header</span> <span class="p">{</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.logo</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">60pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header-text</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header-text</span> <span class="nt">h1</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header-text</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5pt</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"document-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"logo"</span><span class="nt">></span>LOGO<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"header-text"</span><span class="nt">></span>
<span class="nt"><h1></span>Company Report<span class="nt"></h1></span>
<span class="nt"><p></span>Annual Financial Statement 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-10-floating-callout-boxes">Example 10: Floating callout boxes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.callout</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">160pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">15pt</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.callout-tip</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#dcfce7</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#16a34a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.callout-warning</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fef3c7</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#f59e0b</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.callout</span> <span class="nt">h4</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>User Guide<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"callout callout-tip"</span><span class="nt">></span>
<span class="nt"><h4></span>Tip<span class="nt"></h4></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 9pt; margin: 0;"</span><span class="nt">></span>Helpful advice for users...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Main instructional text flows around the floating callout box...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"callout callout-warning"</span><span class="nt">></span>
<span class="nt"><h4></span>Warning<span class="nt"></h4></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 9pt; margin: 0;"</span><span class="nt">></span>Important warning message...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Additional instructions continue here...<span class="nt"></p></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-11-three-column-layout">Example 11: Three-column layout</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.three-col</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">31%</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">3.5%</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.three-col</span><span class="nd">:last-child</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.three-col</span> <span class="nt">h3</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"text-align: center;"</span><span class="nt">></span>Three Column Layout<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"three-col"</span><span class="nt">></span>
<span class="nt"><h3></span>Column One<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 10pt;"</span><span class="nt">></span>First column content...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"three-col"</span><span class="nt">></span>
<span class="nt"><h3></span>Column Two<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 10pt;"</span><span class="nt">></span>Second column content...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"three-col"</span><span class="nt">></span>
<span class="nt"><h3></span>Column Three<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 10pt;"</span><span class="nt">></span>Third column content...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-12-magazine-style-layout">Example 12: Magazine-style layout</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.magazine-layout</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.feature-image</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">140pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">15pt</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.dropcap</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">48pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">8pt</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Feature Article<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"magazine-layout"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"feature-image"</span> <span class="na">src=</span><span class="s">"feature.jpg"</span> <span class="nt">/></span>
<span class="nt"><p><span</span> <span class="na">class=</span><span class="s">"dropcap"</span><span class="nt">></span>T<span class="nt"></span></span>his article demonstrates a
professional magazine-style layout with floating images and
drop caps. The text flows naturally around the floated elements...<span class="nt"></p></span>
<span class="nt"><p></span>Additional paragraphs continue the flow...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-13-alternating-image-positions">Example 13: Alternating image positions</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.section</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-left</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">15pt</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-right</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"image-left"</span> <span class="na">src=</span><span class="s">"img1.jpg"</span> <span class="nt">/></span>
<span class="nt"><h2></span>Section One<span class="nt"></h2></span>
<span class="nt"><p></span>Text flows to the right of the left-floated image...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"image-right"</span> <span class="na">src=</span><span class="s">"img2.jpg"</span> <span class="nt">/></span>
<span class="nt"><h2></span>Section Two<span class="nt"></h2></span>
<span class="nt"><p></span>Text flows to the left of the right-floated image...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-14-contact-card-with-floating-elements">Example 14: Contact card with floating elements</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.contact-card</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.contact-photo</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.contact-info</span> <span class="nt">h3</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.contact-info</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">3pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contact-card"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contact-photo"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contact-info"</span><span class="nt">></span>
<span class="nt"><h3></span>John Smith<span class="nt"></h3></span>
<span class="nt"><p></span>Senior Manager<span class="nt"></p></span>
<span class="nt"><p></span>john.smith@company.com<span class="nt"></p></span>
<span class="nt"><p></span>+1 (555) 123-4567<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-15-complex-document-layout">Example 15: Complex document layout</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.document</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header-logo</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">60pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">60pt</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header-info</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar-note</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">180pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">15pt</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fef3c7</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#f59e0b</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-image</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">140pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">15pt</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"document"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"header-logo"</span><span class="nt">></span>LOGO<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"header-info"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0; color: #6b7280;"</span><span class="nt">></span>
Financial Year Summary
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar-note"</span><span class="nt">></span>
<span class="nt"><strong></span>Note:<span class="nt"></strong></span> Key highlights and important points
appear in this sidebar area.
<span class="nt"></div></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"content-image"</span> <span class="na">src=</span><span class="s">"chart.jpg"</span> <span class="nt">/></span>
<span class="nt"><p></span>The main content text flows around both the sidebar note and
the floated image, creating a sophisticated multi-element layout...<span class="nt"></p></span>
<span class="nt"><p></span>Additional paragraphs continue the professional presentation...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/cssproperties/css_prop_position">position</a> - Set positioning method</li>
<li><a href="/reference/cssproperties/css_prop_top">top</a> - Set top offset for positioned elements</li>
<li><a href="/reference/cssproperties/css_prop_left">left</a> - Set left offset for positioned elements</li>
<li><a href="/reference/cssproperties/css_prop_right">right</a> - Set right offset for positioned elements</li>
<li><a href="/reference/cssproperties/css_prop_bottom">bottom</a> - Set bottom offset for positioned elements</li>
<li><a href="/reference/cssproperties/css_prop_margin">margin</a> - Set margin spacing around elements</li>
<li><a href="/reference/htmlattributes/attr_style">style</a> - Inline style attribute</li>
</ul>
<hr />
</div>
</body>
Note: Font-display is not applied during PDF rendering in Scryber.Core. These data binding examples are useful for shared stylesheets that serve both web and PDF contexts, where the property applies to web rendering only.
Examples
Example 1: Auto Display (No Effect)
<style>
@font-face {
font-family: 'CustomFont';
src: url('custom.ttf');
font-display: auto;
}
</style>
Example 2: Swap Display (No Effect)
<style>
@font-face {
font-family: 'WebFont';
src: url('webfont.woff2');
font-display: swap;
}
.custom-text {
font-family: 'WebFont', Arial, sans-serif;
}
</style>
<p class="custom-text">Text with swap font display</p>
Example 3: Block Display (No Effect)
<style>
@font-face {
font-family: 'DisplayFont';
src: url('display.woff2');
font-display: block;
}
</style>
Example 4: Fallback Display (No Effect)
<style>
@font-face {
font-family: 'FallbackFont';
src: url('fallback.woff2');
font-display: fallback;
}
</style>
Example 5: Optional Display (No Effect)
<style>
@font-face {
font-family: 'OptionalFont';
src: url('optional.woff2');
font-display: optional;
}
</style>
Example 6: Inline Style (No Effect)
<div style="font-display: swap; font-family: Arial">
Text with font-display in inline style (not applied)
</div>
Example 7: Multiple Font Faces (No Effect)
<style>
@font-face {
font-family: 'HeadingFont';
src: url('heading-regular.woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'HeadingFont';
src: url('heading-bold.woff2');
font-weight: 700;
font-display: swap;
}
</style>
Example 8: Web-PDF Shared Stylesheet (No Effect in PDF)
<style>
/* Shared stylesheet for web and PDF */
@font-face {
font-family: 'BrandFont';
src: url('brand-font.woff2') format('woff2'),
url('brand-font.ttf') format('truetype');
font-display: swap; /* Applies to web, ignored in PDF */
}
body {
font-family: 'BrandFont', Arial, sans-serif;
}
</style>
Example 9: Performance Optimization (Web Only)
<style>
@font-face {
font-family: 'FastFont';
src: url('fast-font.woff2');
font-display: optional; /* Prioritize performance over custom font */
}
</style>
Example 10: Critical Content Font (No Effect)
<style>
@font-face {
font-family: 'CriticalFont';
src: url('critical.woff2');
font-display: block; /* Wait for font to load */
}
.critical-heading {
font-family: 'CriticalFont', serif;
}
</style>
<h1 class="critical-heading">Important Heading</h1>
Example 11: Invoice Branding (No Effect)
<style>
@font-face {
font-family: 'InvoiceFont';
src: url('invoice-font.woff2');
font-display: swap;
}
.invoice-header {
font-family: 'InvoiceFont', 'Helvetica', sans-serif;
font-size: 24pt;
}
</style>
<div class="invoice-header">INVOICE</div>
Example 12: Report Custom Typography (No Effect)
<style>
@font-face {
font-family: 'ReportSerif';
src: url('report-serif.woff2');
font-display: fallback;
}
.report-body {
font-family: 'ReportSerif', Georgia, serif;
}
</style>
Example 13: Logo Font (No Effect)
<style>
@font-face {
font-family: 'LogoFont';
src: url('logo.woff2');
font-display: block; /* Ensure logo font always displays */
}
.company-logo-text {
font-family: 'LogoFont', sans-serif;
}
</style>
<div class="company-logo-text">ACME Corp</div>
Example 14: Decorative Text (No Effect)
<style>
@font-face {
font-family: 'DecorativeFont';
src: url('decorative.woff2');
font-display: optional; /* Not critical, skip if slow */
}
.decorative {
font-family: 'DecorativeFont', cursive;
}
</style>
Example 15: Complete Document with Font Display
<!-- CSS prepared for web use, with PDF compatibility -->
<style>
@font-face {
font-family: 'DocumentFont';
src: url('document-regular.woff2') format('woff2'),
url('document-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DocumentFont';
src: url('document-bold.woff2') format('woff2'),
url('document-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: 'DocumentFont', Arial, sans-serif;
font-size: 11pt;
}
h1, h2 {
font-weight: 700;
}
</style>
<body>
<h1>Professional Document</h1>
<p>
This document uses custom web fonts with font-display: swap
for optimal web performance. In PDF generation via Scryber.Core,
the font-display property is recognized but not applied, as
fonts are typically loaded synchronously before rendering.
</p>
<p>
The fallback font stack ensures that content remains readable
whether custom fonts load successfully or not.
</p>
</body>
See Also
- font - Shorthand font property
- font-family - Font family specification
- font-style - Italic and oblique styles
- font-weight - Font weight values
- font-size - Font size specification
- style attribute - Inline CSS styles