Render the column layout structure on the backend, cap at two columns, add a left-margin breakout.

render() now segments the body into .colseg wrappers and flags .multicol
itself, replacing the fragile colseg injection in pagerite.js. Columns
are capped at two; shrink-wrapped figures left-align inside columns.
New {.margin} breakout (and ::: aside) drops blocks into the left gutter
on wide viewports, falling back to in-column floats.

frontend/src/pagerite.js

@@ -286,66 +286,8 @@ import "overlayscrollbars/overlayscrollbars.css";
     // created page has no pen for commitPending's handover click.
     renderAuthUi();
     placeEditPen();
-    // Preview swaps also wipe the .colseg wrappers (the server render has
-    // none), which would drop the multi-column layout until a full reload;
-    // re-split so columns survive both live editing and closing the editor.
-    const main = document.getElementById("main");
-    if (main) applyMulticol(main);
   });
 
-  // Multi-column layout only when there is enough text to justify it.
-  // Split the body into columned segments: h1s, h2s and wide elements are
-  // full-width separators and never go inside columns.
-  function applyMulticol(main) {
-    const article = main.querySelector("article");
-    if (!article) return;
-    const body = article.querySelector(".body");
-    // Code blocks don't read as flowing text and are often generated
-    // filler; exclude them when measuring whether the text justifies
-    // columns.
-    const textLen = (el) => {
-      let n = el.textContent.trim().length;
-      for (const pre of el.querySelectorAll("pre")) n -= pre.textContent.length;
-      return n;
-    };
-    article.classList.toggle(
-      "multicol",
-      !!body && textLen(body) > 1800,
-    );
-    if (body && article.classList.contains("multicol")
-        && !body.querySelector(".colseg")) {
-      // h1s, h2s and wide elements (a {.wide} block or anything holding
-      // one, e.g. a figure with a wide image) are full-width separators
-      const isSeparator = (el) =>
-        el.tagName === "H1" || el.tagName === "H2"
-        || el.classList.contains("wide")
-        || el.querySelector(".wide") !== null;
-      let seg = null;
-      for (const el of [...body.children]) {
-        if (isSeparator(el)) {
-          seg = null;
-          body.append(el);
-        } else {
-          if (!seg) {
-            seg = document.createElement("div");
-            seg.className = "colseg";
-            body.append(seg);
-          }
-          seg.append(el);
-        }
-      }
-      // Columns are per section: only segments with enough text get them,
-      // so a short ingress or a brief section stays single-column. A
-      // .nocols container (::: nocols) opts its whole section out.
-      for (const s of body.querySelectorAll(".colseg")) {
-        s.classList.toggle(
-          "cols",
-          s.querySelector(".nocols") === null && textLen(s) > 600,
-        );
-      }
-    }
-  }
-
   function applyEffects() {
     (window.requestIdleCallback || setTimeout)(preload);
     const main = document.getElementById("main");
@@ -355,7 +297,6 @@ import "overlayscrollbars/overlayscrollbars.css";
     renderAuthUi();
     placeEditPen();
     fitNav();
-    applyMulticol(main);
     if (reduceMotion.matches) return;
     for (const el of main.querySelectorAll(
       "h2, h3, figure, img, pre, blockquote, table, dl, .task-list-item",