Document style switch: Google Docs' Arial, or a serif reading setting

client/app.css

@@ -19,6 +19,53 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+/* Libre Baskerville, for the "Reading" document style. Four files, 132KB,
+   each well inside the ~100KB the Hub allows a non-LFS binary — and each a
+   variable font carrying wght 400-700, so bold and bold italic are interpolated
+   from the real design rather than synthesised by slanting or smearing a roman.
+   (Google serves one file per style for both weights; the pair of weights in
+   the descriptor below is what tells the browser to use the axis.)
+
+   Chosen by eye from a tuner over fourteen serifs, not by distance from the
+   magazine's own Ubique Text — that face was cut for the Council on Foreign
+   Relations and cannot be licensed, so the comparison had a floor. What the
+   measurements did settle is the sizing below.
+
+   Nothing references them until data-doc-style="reading" is stamped, and an
+   unused @font-face is never fetched — Docs-style readers pay nothing. */
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('/fonts/libre-baskerville-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('/fonts/libre-baskerville-latin-ext-italic.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('/fonts/libre-baskerville-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('/fonts/libre-baskerville-latin-italic.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 * { box-sizing: border-box; }
 :root {
   color-scheme: light;
@@ -391,7 +438,7 @@ textarea { resize: vertical; }
 
 /* editing / suggesting switch — the header's mode control, like Docs' pencil */
 /* the theme toggle is icon-only in the header; the label is for the ⋯ sheet */
-#theme-btn .lbl { display: none; }
+#theme-btn .lbl, #docstyle-btn .lbl { display: none; }
 
 #mode-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--tint); flex-shrink: 0; }
 #mode-switch button {
@@ -518,6 +565,73 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
   --code-block-border: #3a3a40;
 }
 
+/* --- document style: Docs vs Reading ---------------------------------------
+   A second axis, independent of light/dark: what the *document* is set in.
+   The default ("docs") is Google Docs' Arial 11pt/1.15, set in :root above.
+   "reading" is the long-form magazine setting measured off a Foreign Affairs
+   article: a serif at 22px/1.45, space between paragraphs instead of Docs'
+   none, and small-caps section heads.
+
+   The sheet is untouched — and it happens to need no touching: Docs' 8.5in page
+   with 1in margins leaves a 624px column, within a few pixels of the 630px the
+   article is set to, so the measure is already right at this size.
+
+   The page geometry is the one thing Reading leaves alone. No literal colour
+   appears below either — every rule inherits --doc-text and friends, so Reading
+   works in dark mode without a second block. A head script stamps
+   data-doc-style before first paint, like the theme. */
+:root[data-doc-style="reading"] {
+  --doc: "Libre Baskerville", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
+  /* Chosen at the page rather than derived, after sliding the numbers around
+     against real text. Measured over 37 paragraphs in this 624px column it sets
+     10.69 words a line on 28.8px of leading, which puts it between Docs (13.54
+     words on 16.9px) and the magazine (9.88 on 31.9px) and nearer the magazine.
+     Switching styles therefore does reflow the document — Baskerville is a wide
+     face, and no size of it both matches Docs' line and stays this open. */
+  --doc-size: 16px;
+  --doc-line: 1.8;         /* = 28.8px */
+  --para-gap: 1.1em;       /* = 17.6px: paragraphs are separated by space… */
+  --doc-link: var(--doc-text);  /* the article underlines links in the text ink */
+}
+
+/* …not by indentation, so the "no space between paragraphs" Docs rule lifts */
+[data-doc-style="reading"] .tiptap p { margin: 0 0 var(--para-gap); }
+[data-doc-style="reading"] .tiptap p:last-child { margin-bottom: 0; }
+[data-doc-style="reading"] .tiptap li > p { margin: 0; }
+
+/* Section heads are small caps at text weight — the magazine's own hierarchy,
+   which leans on letterspacing and space above rather than on size and bold.
+   font-variant is synthesised from the roman here; Libre Baskerville ships no
+   true small-cap glyphs (the article's own face does). */
+[data-doc-style="reading"] .tiptap h2,
+[data-doc-style="reading"] .tiptap h3 {
+  /* 25.6px small caps, with the article's 0.075em tracking and its 2em of air
+     above — the proportions that make a section head read as one */
+  font-size: 1.6em; font-variant: all-small-caps; letter-spacing: 0.075em;
+  line-height: 1.45; margin: 2em 0 0.333em; color: var(--doc-text);
+}
+/* holds the article's 64-to-30 relationship between headline and section head */
+[data-doc-style="reading"] .tiptap h1 { font-size: 3.4133em; line-height: 1.1; margin: 1.25em 0 0.208em; }
+[data-doc-style="reading"] .tiptap h4 { font-size: 1em; font-weight: 700; line-height: 1.3; margin: 2em 0 0.455em; color: var(--doc-text); }
+[data-doc-style="reading"] .tiptap h5 { font-size: 1em; font-style: italic; line-height: 1.3; margin: 2em 0 0.455em; color: var(--doc-text); }
+[data-doc-style="reading"] .tiptap h6 {
+  font-size: 0.818em; font-variant: all-small-caps; letter-spacing: 0.075em;
+  font-style: normal; line-height: 1.3; margin: 2.44em 0 0.556em; color: var(--doc-text-2);
+}
+/* nothing above the first block, whatever it is */
+[data-doc-style="reading"] .tiptap > :first-child { margin-top: 0; }
+/* the opening heading is the article title: the display cut, set large */
+[data-doc-style="reading"] .tiptap > h1:first-child { font-size: 2.909em; line-height: 1.1; margin-bottom: 0.234em; }
+
+/* an underline in the text's own ink, rather than Docs' blue */
+[data-doc-style="reading"] .tiptap a { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.15em; }
+[data-doc-style="reading"] .tiptap hr { border-top-color: var(--doc-text); margin: 1.818em 0; }
+[data-doc-style="reading"] .tiptap blockquote { padding-left: 1.2em; font-style: italic; }
+/* lists sit close to the text, not at Docs' half-inch tab stop */
+[data-doc-style="reading"] .tiptap ul,
+[data-doc-style="reading"] .tiptap ol { padding-left: 1.4em; margin: 0 0 var(--para-gap); }
+[data-doc-style="reading"] .tiptap li { padding: 0.227em 0; }
+
 /* --- home --- */
 .home { max-width: 680px; margin: 0 auto; padding: 48px 24px 120px; }
 .home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
@@ -1000,6 +1114,9 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
   .proposal-bar { padding: 12px 14px; }
   /* 11pt is uncomfortably small on a handset — nudged up, still Arial/1.15 */
   .tiptap { font-size: calc(16px * var(--doc-zoom, 1)); }
+  /* Reading steps down too: 22px is a desktop column measure, and a phone has
+     no room for it. The article itself drops to 18px on small screens. */
+  [data-doc-style="reading"] .tiptap { font-size: calc(18px * var(--doc-zoom, 1)); }
   .tiptap pre { font-size: 13px; padding: 10px; }
   /* wide content scrolls inside itself rather than widening the page */
   .tiptap table, .sugg-ins-block table { display: block; overflow-x: auto; white-space: nowrap; }
@@ -1031,7 +1148,7 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 
   /* theme + mode controls ride the ⋯ sheet on a phone, where the header is full */
   #more-pop #theme-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 11px 12px; height: auto; font-size: 14px; }
-  #more-pop #theme-btn .lbl { display: inline; }
+  #more-pop #theme-btn .lbl, #more-pop #docstyle-btn .lbl { display: inline; }
   /* the mode switch rides the ⋯ sheet on a phone, where the header is full */
   #more-pop #mode-switch { margin: 4px 8px 6px; justify-content: center; }
   #more-pop #mode-switch button { flex: 1; padding: 9px 12px; font-size: 13.5px; }
@@ -1056,3 +1173,4 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 @media (hover: none) {
   [data-tip]:hover::after { display: none; }
 }
+

client/doc.html

@@ -13,6 +13,21 @@
     } catch (e) {
       document.documentElement.dataset.theme = 'light'
     }
+    // …and the document style, so the sheet is never set in the wrong face for
+    // a frame. Reading also needs its serif early: the stylesheet only asks for
+    // it once text is laid out, which is a whole round trip too late.
+    try {
+      var s = localStorage.getItem('cw-doc-style')
+      document.documentElement.dataset.docStyle = s === 'reading' ? 'reading' : 'docs'
+      if (s === 'reading') {
+        var l = document.createElement('link')
+        l.rel = 'preload'; l.as = 'font'; l.type = 'font/woff2'; l.crossOrigin = 'anonymous'
+        l.id = 'serif-preload'; l.href = '/fonts/libre-baskerville-latin.woff2'
+        document.head.appendChild(l)
+      }
+    } catch (e) {
+      document.documentElement.dataset.docStyle = 'docs'
+    }
   </script>
   <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin />
   <!--boot-->
@@ -44,6 +59,7 @@
     <button class="iconbtn phone-only" id="m-fmt" title="Formatting">Aa</button>
     <button class="iconbtn phone-only" id="m-comments" title="Comments"></button>
     <button class="iconbtn phone-only" id="m-more" title="More">⋯</button>
+    <button class="iconbtn" id="docstyle-btn" title="Switch document style"></button>
     <button class="iconbtn" id="theme-btn" title="Switch theme"></button>
     <button class="btn ghost small" id="share-btn">Share</button>
     <button class="btn ghost small" id="agents-btn">Agents</button>

client/src/common.js

@@ -10,6 +10,8 @@ const ICONS = {
   back: '<path d="M15 4l-7 7 7 7"/>',
   sun: '<circle cx="11" cy="11" r="4"/><path d="M11 2.5v2M11 17.5v2M2.5 11h2M17.5 11h2M5 5l1.4 1.4M15.6 15.6L17 17M17 5l-1.4 1.4M6.4 15.6L5 17"/>',
   moon: '<path d="M17 13.2A7 7 0 0 1 8.8 5a7.2 7.2 0 1 0 8.2 8.2z"/>',
+  serif: '<path d="M4.5 6V4.5h13V6M11 4.5v13M8 17.5h6"/>',
+  docpage: '<rect x="4.5" y="3.5" width="13" height="15" rx="1.5"/><path d="M7.5 8h7M7.5 11.5h7M7.5 15h4"/>',
   comment: '<path d="M19 12.5a6.5 6.5 0 0 1-6.5 6.5H5l-1.8 1.8V12.5a7.3 7.3 0 0 1 7.3-7.3h1.5A6.5 6.5 0 0 1 19 12.5z"/>',
   edit: '<path d="M14.5 4.5l3 3L8 17l-4 1 1-4 9.5-9.5z"/>',
   image: '<rect x="3.5" y="4.5" width="15" height="13" rx="2"/><circle cx="8" cy="9" r="1.4"/><path d="M18 14l-4-4-7 7"/>',
@@ -139,6 +141,50 @@ export function wireTheme(btn) {
   })
 }
 
+// --- document style ---------------------------------------------------------
+// What the document itself is set in: 'docs' (Arial 11pt on a letter sheet) or
+// 'reading' (a serif article column). Unlike the theme this has no OS signal to
+// follow, so the default is simply 'docs'. The head script has already stamped
+// the stored choice; this wires the button that changes it.
+export const DOC_STYLES = ['docs', 'reading']
+
+export function wireDocStyle(btn) {
+  const paint = () => {
+    const reading = document.documentElement.dataset.docStyle === 'reading'
+    if (!btn) return
+    btn.replaceChildren(icon(reading ? 'docpage' : 'serif'), el('span', { class: 'lbl' }, reading ? 'Docs' : 'Reading'))
+    btn.title = reading ? 'Set the document in Arial, like Google Docs' : 'Set the document in a serif reading column'
+    btn.setAttribute('aria-label', btn.title)
+  }
+  const apply = style => {
+    document.documentElement.dataset.docStyle = style
+    // the serif is only fetched once something on the page asks for it, so the
+    // first switch is also the first request — warm it alongside the repaint
+    if (style === 'reading') preloadSerif()
+    paint()
+  }
+  paint()
+  btn?.addEventListener('click', () => {
+    const next = document.documentElement.dataset.docStyle === 'reading' ? 'docs' : 'reading'
+    try {
+      localStorage.setItem('cw-doc-style', next)
+    } catch {}
+    apply(next)
+  })
+}
+
+function preloadSerif() {
+  if (document.getElementById('serif-preload')) return
+  const l = document.createElement('link')
+  l.id = 'serif-preload'
+  l.rel = 'preload'
+  l.as = 'font'
+  l.type = 'font/woff2'
+  l.crossOrigin = 'anonymous'
+  l.href = '/fonts/libre-baskerville-latin.woff2'
+  document.head.appendChild(l)
+}
+
 export function colorFor(name) {
   let h = 0
   for (const c of String(name)) h = (h * 31 + c.charCodeAt(0)) % 360

client/src/doc.js

@@ -198,7 +198,7 @@ import { ySyncPluginKey, yUndoPluginKey, absolutePositionToRelativePosition, rel
 import { markdownToBlocks } from '../../server/md.js'
 import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
-import { initAuth, api, el, esc, icon, colorFor, timeAgo, statusLabel, renderMentionText, agentKeyBox, wireTheme } from './common.js'
+import { initAuth, api, el, esc, icon, colorFor, timeAgo, statusLabel, renderMentionText, agentKeyBox, wireTheme, wireDocStyle } from './common.js'
 import { wordDiff, arrayDiff, styledWordDiff, markKeyOf } from './diff.js'
 
 const docId = location.pathname.split('/').filter(Boolean)[1]
@@ -244,6 +244,7 @@ async function main() {
   // --- one-time shell wiring (survives page switches) ---
   document.getElementById('back-link').appendChild(icon('back'))
   wireTheme(document.getElementById('theme-btn'))
+  wireDocStyle(document.getElementById('docstyle-btn'))
   wireSelectionMenu()
   wireMobileChrome()
   wireMarginToggle()
@@ -870,7 +871,7 @@ function syncHeaderHeight() {
 // Move the crowded-out header controls in and out of the ⋯ sheet.
 function applyBreakpoint() {
   const pop = document.getElementById('more-pop')
-  const movable = () => ['mode-switch', 'theme-btn', 'share-btn', 'agents-btn', 'reset-btn', 'whoami'].map(id => document.getElementById(id)).filter(Boolean)
+  const movable = () => ['mode-switch', 'docstyle-btn', 'theme-btn', 'share-btn', 'agents-btn', 'reset-btn', 'whoami'].map(id => document.getElementById(id)).filter(Boolean)
   if (isPhone()) {
     for (const node of movable()) {
       if (pop.contains(node)) continue

test/browser.js

@@ -738,6 +738,60 @@ async function main() {
   await page.click('#zoom-out')
   console.log('✓ zoom controls')
 
+  // --- document style: Docs (Arial 11pt/1.15) <-> Reading (serif 22px/1.45) ---
+  const typeset = () =>
+    page.evaluate(() => {
+      const t = getComputedStyle(document.querySelector('.tiptap'))
+      const p = [...document.querySelectorAll('.tiptap p')].find(e => e.textContent.trim().length > 40)
+      return {
+        style: document.documentElement.dataset.docStyle,
+        family: t.fontFamily.split(',')[0].replace(/"/g, ''),
+        size: parseFloat(t.fontSize),
+        line: parseFloat(t.lineHeight),
+        paraGap: p ? parseFloat(getComputedStyle(p).marginBottom) : null,
+        measure: Math.round(document.querySelector('.tiptap').getBoundingClientRect().width),
+      }
+    })
+
+  const docsSet = await typeset()
+  assert.strictEqual(docsSet.style, 'docs', 'default document style is docs')
+  assert.strictEqual(docsSet.family, 'Arial', 'docs style sets the document in Arial')
+  assert.strictEqual(docsSet.paraGap, 0, 'docs style has no space between paragraphs')
+
+  await page.click('#docstyle-btn')
+  await waitFor(async () => (await typeset()).family === 'Libre Baskerville', 'reading style swaps in the serif')
+  const readingSet = await typeset()
+  // The settled numbers, pinned: 16px on 28.8px with 17.6px between paragraphs.
+  // Chosen by eye against real text rather than derived, which is exactly why
+  // they are worth pinning — nothing else records why these and not others.
+  assert.strictEqual(readingSet.size, 16, `body is set at 16px (got ${readingSet.size})`)
+  assert.strictEqual(Math.round(readingSet.line * 10) / 10, 28.8, `leading is 28.8px (got ${readingSet.line})`)
+  assert.strictEqual(Math.round(readingSet.paraGap * 10) / 10, 17.6, `paragraph gap is 17.6px (got ${readingSet.paraGap})`)
+  const head = await page.evaluate(() => {
+    const h = document.querySelector('.tiptap h2')
+    if (!h) return null
+    const s = getComputedStyle(h)
+    return { size: parseFloat(s.fontSize), line: parseFloat(s.lineHeight), caps: s.fontVariantCaps,
+             ls: parseFloat(s.letterSpacing), mt: parseFloat(s.marginTop) }
+  })
+  if (head) {
+    assert.strictEqual(Math.round(head.size * 10) / 10, 25.6, `section heads are 25.6px (got ${head.size})`)
+    assert.strictEqual(head.caps, 'all-small-caps', 'section heads are small caps')
+    assert.ok(Math.abs(head.ls / head.size - 0.075) < 0.005, `section heads keep the article's 0.075em tracking (got ${(head.ls / head.size).toFixed(4)}em)`)
+    assert.ok(Math.abs(head.mt / head.size - 2) < 0.02, `section heads take 2em of air above (got ${(head.mt / head.size).toFixed(2)}em)`)
+  }
+  // the switch is typography only — the sheet keeps Docs' letter geometry
+  assert.strictEqual(readingSet.measure, docsSet.measure, 'the text column is untouched by the document style')
+  // (no words-per-line guard against Docs: this face at this size fits 10.69
+  // to Docs' 13.54, so the two deliberately differ and switching reflows)
+  // and it survives a reload, like the theme
+  await page.reload({ waitUntil: 'domcontentloaded' })
+  await waitFor(async () => !!(await page.$('.tiptap p')), 'doc reloads')
+  assert.strictEqual((await typeset()).family, 'Libre Baskerville', 'document style persists across a reload')
+  await page.click('#docstyle-btn')
+  await waitFor(async () => (await typeset()).family === 'Arial', 'switches back to docs')
+  console.log('✓ document style switch (Docs <-> Reading), persisted, page width untouched')
+
   // --- undo / redo ---
   await focusDocEnd(page)
   await page.waitForTimeout(600)