Ludo
86464f3e21
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
|