Prose

Prose styles markup you don’t control — the classless HTML a markdown renderer or CMS emits. Wrap it once:

<article class="re-prose"><!-- rendered HTML --></article>

base.css already styles the elements themselves (heading scale, links, inline code, pre, hr) and reset.css zeroes their margins — prose restores the vertical rhythm and dresses the flow-only pieces nothing else covers: blockquote, figure/figcaption, lists, images, and bare tables. Line length is capped at a readable 65ch measure (override max-inline-size to opt out — your unlayered CSS wins over the re.components layer automatically).

Headings, paragraphs & lists

The Analytical Engine

The Engine is not merely a calculator — it weaves algebraical patterns just as the Jacquard loom weaves flowers and leaves. Its store holds a thousand numbers of forty digits, addressed by column and cage.

What it needs to run

Three things, in Menabrea's account:

a store for the variables
a mill where operations happen
punched cards of two kinds:
1. operation cards
2. variable cards

Terminology

Store: the memory — columns of figure wheels
Mill: the arithmetic unit

<article class="re-prose">
  <h1>The Analytical Engine</h1>
  <p>
    The Engine is <strong>not merely a calculator</strong> — it weaves
    <em>algebraical patterns</em> just as the Jacquard loom weaves flowers and leaves. Its
    store holds a thousand numbers of forty digits, addressed by <code>column</code> and
    <code>cage</code>.
  </p>
  <h2>What it needs to run</h2>
  <p>Three things, in <a href="#basic-heading">Menabrea's account</a>:</p>
  <ul>
    <li>a store for the variables</li>
    <li>a mill where operations happen</li>
    <li>
      punched cards of two kinds:
      <ol>
        <li>operation cards</li>
        <li>variable cards</li>
      </ol>
    </li>
  </ul>
  <h3>Terminology</h3>
  <dl>
    <dt>Store</dt>
    <dd>the memory — columns of figure wheels</dd>
    <dt>Mill</dt>
    <dd>the arithmetic unit</dd>
  </dl>
</article>

Blockquote & figure

The quote takes a start-side border (logical, so it flips under RTL) and muted text; a <footer>/<cite> inside reads as a byline. Figures get fluid, rounded media and a smaller muted <figcaption>.

Decorative diagram standing in for Note G — Note G — the table of operations for computing Bernoulli numbers.

Code & table

Bare <pre> and inline <code> come from base.css; prose adds the bare <table> treatment (full-width, collapsed borders, start-aligned headers). .re-table remains the app-table look for markup you do control.

Rendered markdown emits bare <pre> and <table>:

let v4 = v1 * v2;   // operation card 1
let v5 = v4 - v3;   // operation card 2

Card	Operation	Result
1	multiplication	`v4`
2	subtraction	`v5`

Everything above is classless markup — only the wrapper carries .re-prose.

      <article class="re-prose">
        <p>Rendered markdown emits bare <code>&lt;pre&gt;</code> and <code>&lt;table&gt;</code>:</p>
        <pre><code>let v4 = v1 * v2;   // operation card 1
let v5 = v4 - v3;   // operation card 2</code></pre>
        <table>
          <thead>
            <tr>
              <th>Card</th>
              <th>Operation</th>
              <th>Result</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>multiplication</td>
              <td><code>v4</code></td>
            </tr>
            <tr>
              <td>2</td>
              <td>subtraction</td>
              <td><code>v5</code></td>
            </tr>
          </tbody>
        </table>
        <hr />
        <p>
          Everything above is classless markup — only the wrapper carries <code>.re-prose</code>.
        </p>
      </article>

Components inside prose

Every prose selector is wrapped in :where(), so it adds zero specificity beyond the root class — a Relements component (or your own classes) dropped into the flow keeps its own look; prose only contributes the block spacing.

Accessibility

Prose is CSS-only and semantics-neutral: it adds no ARIA and hides nothing — the rendered markup keeps its native roles (headings, lists, blockquote, table, figure). Two notes:

Give images real alt text — prose can’t invent it for you, and a markdown pipeline that drops alt fails WCAG regardless of styling.
No forced-colors override is needed — nothing here conveys state by colour; the blockquote’s border is structural and flattens to CanvasText legibly on its own.

See the accessibility guide for the project-wide stance.