e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
39 lines
2.3 KiB
HTML
39 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--#include virtual="/_include/head.html" -->
|
|
<title>Prose — ASW</title>
|
|
<meta name="description" content="data-layout="prose" — optimal
|
|
reading width for long-form content">
|
|
</head>
|
|
<body>
|
|
<!--#include virtual="/_include/nav.html" -->
|
|
<main data-layout="prose">
|
|
<h1>Prose Layout</h1>
|
|
<p data-text="lead">65 characters. The typographic sweet spot — Bringhurst's recommendation, LaTeX's default, the width every readable thing converges on.</p>
|
|
|
|
<p>Add <code>data-layout="prose"</code> to any <code><main></code> or <code><div></code>. The element constrains itself to <code>65ch</code> and centers in its container. Nothing else changes — headings, paragraphs, lists, code blocks all behave normally inside.</p>
|
|
|
|
<p>This paragraph is exactly this wide. Not wider. Your eye doesn't have to travel far to find the next line. That's the whole point.</p>
|
|
|
|
<h2>When to use it</h2>
|
|
<p>Articles. Documentation pages. Session reports written as prose. Any page where the primary content is text and the reader should read, not scan.</p>
|
|
|
|
<p>Don't use it for dashboards, data-heavy pages, or anything with wide tables. Use <code>data-layout="report"</code> or no layout constraint instead.</p>
|
|
|
|
<h2>How it works</h2>
|
|
|
|
<div class="sourceCode" id="cb1"><pre
|
|
class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">[data-layout</span><span class="op">=</span><span class="st">"prose"</span><span class="ex">]</span> {</span>
|
|
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">65</span><span class="dt">ch</span><span class="op">;</span></span>
|
|
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">margin-inline</span>: <span class="bu">auto</span><span class="op">;</span></span>
|
|
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
|
<p>One rule. Font-relative — <code>ch</code> tracks the character width of the current typeface, so it scales correctly if the font changes.</p>
|
|
|
|
<footer>
|
|
<a href="/projects/asw/docs/">← ASW Docs</a>
|
|
</footer>
|
|
</main>
|
|
<!--#include virtual="/_include/footer.html" -->
|
|
</body>
|
|
</html>
|