@symbo.ls/brender 3.14.677 → 3.14.679

package/drawnFaces.js

@@ -0,0 +1,783 @@
+// ── The faces a built page's elements draw ──────────────────────────────────
+// XMA r12 results (mirc #503, item 2): window.__smblsFacesReady and
+// `brender.faces.inline: true` took every face of a family the page's styles
+// name, when any character of the whole page was in its range — a page that
+// draws Playfair Display only in bold headings still asked for its regular
+// face, ~60 KB a page never needs.
+//
+// This reads the page as the browser would draw it: each element's
+// font-family, font-weight and font-style from the rules that match it (the
+// cascade: origin, !important, specificity, order; inheritance; var(); the
+// `font` shorthand; the browser's own bold headings, italic emphasis and
+// system-font form controls), then the characters of the element's own text
+// against the faces sheet (`<style data-smbls-faces>`) by the browser's face
+// matching (style, then weight; then unicode-range per character, falling to
+// the next family for a character no face of a family covers).
+//
+// What can change after the first view counts too, so no face that may be
+// drawn is left out: a rule under @media / @supports / @container / @layer,
+// and a rule whose selector names a state (:hover, :focus, :checked, …) or
+// :lang(), adds its value as a possibility wherever it would win. A rule for
+// `::placeholder` reaches the field's placeholder, one for `::before` /
+// `::after` the strings and attr() of its `content`; other generated content
+// (`::marker`, counters' own text) is not read. A name in a family list that
+// the sheet does not declare (a system font) is passed over, so the next
+// family counts for every character; a generic family (`sans-serif`,
+// `system-ui`, …) ends the list.
+//
+// The page's stylesheets are its `<style>` elements, its
+// `<link rel="stylesheet">` files and their @import files, read by
+// `options.readSheet(href, from)` (`from`: the address of the sheet that
+// imports it, none for the page) — a `<link data-smbls-font>` (a font
+// service's sheet of @font-face rules, smbls fontFaces.js) is not read.
+//
+// Returns Map<index, chars>: `index` the n-th `@font-face` rule of the faces
+// sheet (in order, as /@font-face\s*\{([^}]*)\}/g finds them), `chars` the
+// characters the page draws in it (unique, in order of first use) — or null
+// when a stylesheet of the page cannot be read (no readSheet, another origin,
+// a sheet that does not parse): any face may be drawn then.
+import { parseHTML } from 'linkedom'
+import { stylesheetRules } from './pageWeight.js'
+
+const FACES_STYLE = /<style\b[^>]*\bdata-smbls-faces\b[^>]*>([\s\S]*?)<\/style\s*>/i
+const FACE_RULE = /@font-face\s*\{([^}]*)\}/gi
+const RAW = /<(script|template|noscript)\b([^>]*)>[\s\S]*?<\/\1\s*>/gi
+
+// At most this many values per property and element: a page whose
+// variables branch more is read with the first ones.
+const MAX_VALUES = 8
+
+const GENERIC = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif',
+  'ui-monospace', 'ui-rounded', 'math', 'emoji', 'fangsong', '-apple-system', 'blinkmacsystemfont'
+])
+
+// Selector states: matched as if they held (the value is a possibility).
+const STATES = new Set([
+  'hover', 'focus', 'focus-visible', 'focus-within', 'active', 'visited', 'link', 'any-link', 'target',
+  'target-within', 'checked', 'indeterminate', 'default', 'disabled', 'enabled', 'read-only', 'read-write',
+  'required', 'optional', 'valid', 'invalid', 'user-valid', 'user-invalid', 'in-range', 'out-of-range',
+  'placeholder-shown', 'autofill', '-webkit-autofill', 'open', 'closed', 'popover-open', 'modal',
+  'fullscreen', 'picture-in-picture', 'playing', 'paused', 'current', 'past', 'future', 'defined',
+  'lang', 'dir', 'state', 'blank', 'local-link', 'scope', 'host', 'host-context'
+])
+const LEGACY_PSEUDO_ELEMENTS = new Set(['before', 'after', 'first-line', 'first-letter'])
+const SELECTOR_LISTS = new Set(['is', 'where', 'matches', '-webkit-any', '-moz-any', 'has'])
+
+// The browser's own rules (lowest in the cascade): bold headings, italic
+// emphasis, a system font in form controls (`font: inherit` undoes it).
+const UA_RULES = `h1,h2,h3,h4,h5,h6,th{font-weight:bold}b,strong{font-weight:bolder}
+em,i,cite,var,dfn,address{font-style:italic}code,kbd,samp,pre,tt,listing,xmp,plaintext{font-family:monospace}
+input,textarea,select,button{font-family:system-ui;font-weight:400;font-style:normal}`
+
+const FONT_PROPS = new Set(['font', 'font-family', 'font-weight', 'font-style'])
+const ALWAYS_MEDIA = /^\s*(?:only\s+)?(?:all|screen)\s*$/i
+const VAR_NAME = /var\(\s*(--[\w-]+)/g
+
+// ── Text helpers ────────────────────────────────────────────────────────────
+// The end of a balanced (…) that opens at `at` (quotes skipped); -1 if none.
+const closeOf = (text, at) => {
+  let depth = 0
+  let quote = null
+  for (let i = at; i < text.length; i++) {
+    const ch = text[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '(') depth++
+    else if (ch === ')' && !--depth) return i
+  }
+  return -1
+}
+
+// Split at top-level `sep` (outside quotes, (), [], {}).
+const splitTop = (text, sep) => {
+  const out = []
+  let depth = 0
+  let quote = null
+  let start = 0
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '(' || ch === '[' || ch === '{') depth++
+    else if (ch === ')' || ch === ']' || ch === '}') depth = Math.max(0, depth - 1)
+    else if (ch === sep && !depth) {
+      out.push(text.slice(start, i))
+      start = i + 1
+    }
+  }
+  out.push(text.slice(start))
+  return out
+}
+
+const IDENT_CHAR = /[\w\- -￿]/
+const identEnd = (text, at) => {
+  let i = at
+  while (i < text.length) {
+    if (text[i] === '\\') i += 2
+    else if (IDENT_CHAR.test(text[i])) i++
+    else break
+  }
+  return i
+}
+
+// ── Selectors ───────────────────────────────────────────────────────────────
+// Specificity of one complex selector, as one number (a, b, c → a·1e6 + b·1e3 + c).
+const specificityOf = (sel) => {
+  let a = 0
+  let b = 0
+  let c = 0
+  const add = (n) => {
+    a += Math.floor(n / 1e6)
+    b += Math.floor(n / 1e3) % 1e3
+    c += n % 1e3
+  }
+  for (let i = 0; i < sel.length;) {
+    const ch = sel[i]
+    if (ch === '"' || ch === "'") {
+      const end = sel.indexOf(ch, i + 1)
+      i = end === -1 ? sel.length : end + 1
+    } else if (ch === '#') {
+      a++
+      i = identEnd(sel, i + 1)
+    } else if (ch === '.') {
+      b++
+      i = identEnd(sel, i + 1)
+    } else if (ch === '[') {
+      b++
+      const end = sel.indexOf(']', i)
+      i = end === -1 ? sel.length : end + 1
+    } else if (ch === ':') {
+      const element = sel[i + 1] === ':'
+      const start = i + (element ? 2 : 1)
+      const end = identEnd(sel, start)
+      const name = sel.slice(start, end).toLowerCase()
+      let args = null
+      let next = end
+      if (sel[end] === '(') {
+        const close = closeOf(sel, end)
+        args = sel.slice(end + 1, close === -1 ? sel.length : close)
+        next = close === -1 ? sel.length : close + 1
+      }
+      if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) c++
+      else if (name === 'where') { /* 0 */ } else if (SELECTOR_LISTS.has(name) || name === 'not') {
+        if (args) add(Math.max(0, ...splitTop(args, ',').map((s) => specificityOf(s.trim()))))
+      } else b++
+      i = next
+    } else if (ch === '*' || ch === '>' || ch === '+' || ch === '~' || ch === '|' || /\s/.test(ch)) i++
+    else if (IDENT_CHAR.test(ch) || ch === '\\') {
+      c++
+      i = identEnd(sel, i)
+    } else i++
+  }
+  return a * 1e6 + b * 1e3 + c
+}
+
+// The selector css-select can match: states and pseudo-elements become
+// `:is(*)` (a no-op). `conditional` when a state, :lang() or a ::first-*
+// was taken out; `target` 'element', 'placeholder' (::placeholder),
+// 'before' / 'after', or null for what draws no text of the page's
+// (::marker, ::selection, …).
+const staticSelector = (sel) => {
+  let conditional = false
+  let target = 'element'
+  const walk = (text) => {
+    let out = ''
+    for (let i = 0; i < text.length;) {
+      const ch = text[i]
+      if (ch === '"' || ch === "'") {
+        const end = text.indexOf(ch, i + 1)
+        const stop = end === -1 ? text.length : end + 1
+        out += text.slice(i, stop)
+        i = stop
+      } else if (ch === '[') {
+        const end = text.indexOf(']', i)
+        const stop = end === -1 ? text.length : end + 1
+        out += text.slice(i, stop)
+        i = stop
+      } else if (ch === ':') {
+        const element = text[i + 1] === ':'
+        const start = i + (element ? 2 : 1)
+        const end = identEnd(text, start)
+        const name = text.slice(start, end).toLowerCase()
+        let args = null
+        let next = end
+        if (text[end] === '(') {
+          const close = closeOf(text, end)
+          args = text.slice(end + 1, close === -1 ? text.length : close)
+          next = close === -1 ? text.length : close + 1
+        }
+        if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) {
+          if (name === 'placeholder' || name === '-webkit-input-placeholder' || name === '-moz-placeholder') target = 'placeholder'
+          else if (name === 'before' || name === 'after') target = name
+          else if (name === 'first-line' || name === 'first-letter') conditional = true
+          else target = null
+          out += ':is(*)'
+        } else if (name === 'not' && args !== null) {
+          const inner = staticSelectorList(args)
+          // a state inside :not() — drop the :not() (matches more, never less)
+          if (inner.conditional) {
+            conditional = true
+            out += ':is(*)'
+          } else out += `:not(${inner.text})`
+        } else if (SELECTOR_LISTS.has(name) && args !== null) {
+          const inner = staticSelectorList(args)
+          if (inner.conditional) conditional = true
+          out += `:${name === 'matches' || name.endsWith('-any') ? 'is' : name}(${inner.text || '*'})`
+        } else if (STATES.has(name) || name.startsWith('-webkit-') || name.startsWith('-moz-')) {
+          conditional = true
+          out += ':is(*)'
+        } else out += text.slice(i, next)
+        i = next
+      } else {
+        out += ch
+        i++
+      }
+    }
+    return out
+  }
+  const text = walk(sel)
+  return { text, conditional, target }
+}
+// What is left when css-select still cannot match a selector: every
+// pseudo-class out (it matches more, never less).
+const looseSelector = (text) => {
+  let out = ''
+  for (let i = 0; i < text.length;) {
+    const ch = text[i]
+    if (ch === '"' || ch === "'" || ch === '[') {
+      const end = text.indexOf(ch === '[' ? ']' : ch, i + 1)
+      const stop = end === -1 ? text.length : end + 1
+      out += text.slice(i, stop)
+      i = stop
+    } else if (ch === ':') {
+      let end = identEnd(text, i + (text[i + 1] === ':' ? 2 : 1))
+      if (text[end] === '(') {
+        const close = closeOf(text, end)
+        end = close === -1 ? text.length : close + 1
+      }
+      out += ':is(*)'
+      i = end
+    } else {
+      out += ch
+      i++
+    }
+  }
+  return out
+}
+const staticSelectorList = (list) => {
+  let conditional = false
+  const parts = splitTop(list, ',').map((s) => {
+    const r = staticSelector(s.trim())
+    if (r.conditional) conditional = true
+    return r.text || '*'
+  })
+  return { text: parts.join(', '), conditional }
+}
+
+// ── Declarations ────────────────────────────────────────────────────────────
+// The declarations of a block (its nested rules aside) that name a font
+// property, `content` or a custom property.
+const declarationsOf = (block) => {
+  const out = []
+  for (const part of splitTop(block.replace(/\/\*[\s\S]*?\*\//g, ''), ';')) {
+    if (part.includes('{')) continue
+    const colon = part.indexOf(':')
+    if (colon === -1) continue
+    const prop = part.slice(0, colon).trim()
+    const key = prop.startsWith('--') ? prop : prop.toLowerCase()
+    if (!FONT_PROPS.has(key) && key !== 'content' && !key.startsWith('--')) continue
+    let value = part.slice(colon + 1).trim()
+    const important = /!\s*important\s*$/i.test(value)
+    if (important) value = value.replace(/!\s*important\s*$/i, '').trim()
+    out.push({ prop: key, value, important })
+  }
+  return out
+}
+
+// Every style rule of a stylesheet text, at any depth of @media /
+// @supports / @container / @layer (and CSS nesting), and of the files its
+// @import rules name (`ctx.readSheet`): { selector, block, conditional }.
+// `ctx.unknown` turns true for a sheet that cannot be read.
+const IMPORT = /^@import\s+(?:url\(\s*)?(['"]?)([^'")\s]+)\1\s*\)?\s*([^;]*)/i
+const styleRulesOf = (css, conditional, ctx, from, parent = null, into = []) => {
+  const rules = stylesheetRules(css)
+  if (!rules) {
+    ctx.unknown = true
+    return into
+  }
+  for (const rule of rules) {
+    const open = rule.indexOf('{')
+    if (open === -1) {
+      const m = IMPORT.exec(rule)
+      if (!m) continue
+      const sheet = ctx.readSheet ? ctx.readSheet(m[2], from) : null
+      if (typeof sheet !== 'string') ctx.unknown = true
+      else styleRulesOf(sheet, conditional || (!!m[3].trim() && !ALWAYS_MEDIA.test(m[3])), ctx, m[2], parent, into)
+      continue
+    }
+    if (!rule.endsWith('}')) continue
+    const prelude = rule.slice(0, open).trim()
+    const body = rule.slice(open + 1, -1)
+    if (prelude[0] === '@') {
+      const name = (/^@([\w-]+)/.exec(prelude) || [])[1]?.toLowerCase()
+      if (name === 'media') styleRulesOf(body, conditional || !ALWAYS_MEDIA.test(prelude.slice(6)), ctx, from, parent, into)
+      // a layer reorders the cascade: its rules count as possibilities
+      else if (name === 'supports' || name === 'container' || name === 'document' || name === 'scope' || name === 'starting-style' || name === 'layer') {
+        styleRulesOf(body, true, ctx, from, parent, into)
+      }
+      continue
+    }
+    const selector = parent
+      ? splitTop(prelude, ',').map((s) => s.includes('&') ? s.replace(/&/g, `:is(${parent})`) : `:is(${parent}) ${s.trim()}`).join(', ')
+      : prelude
+    into.push({ selector, block: body, conditional })
+    // nested rules (CSS nesting)
+    if (body.includes('{')) {
+      const nested = body.slice(body.search(/[^;{}]*\{/))
+      styleRulesOf(nested, conditional, ctx, from, selector, into)
+    }
+  }
+  return into
+}
+
+// ── Values ──────────────────────────────────────────────────────────────────
+// var() in `value`, from `vars` (name → values): every resulting text (at
+// most MAX_VALUES); null when a var() has no value and no fallback.
+const substitute = (value, vars, depth = 0) => {
+  const at = value.indexOf('var(')
+  if (at === -1) return [value]
+  if (depth > 8) return []
+  const close = closeOf(value, at + 3)
+  if (close === -1) return []
+  const inner = value.slice(at + 4, close)
+  const comma = splitTop(inner, ',')
+  const name = comma[0].trim()
+  const fallback = comma.length > 1 ? comma.slice(1).join(',').trim() : null
+  const known = vars.get(name)
+  const options = known && known.length ? known : fallback !== null ? substitute(fallback, vars, depth + 1) : []
+  const out = []
+  for (const option of options) {
+    for (const rest of substitute(value.slice(0, at) + option + value.slice(close + 1), vars, depth + 1)) {
+      if (!out.includes(rest)) out.push(rest)
+      if (out.length >= MAX_VALUES) return out
+    }
+  }
+  return out
+}
+
+const unquote = (name) => name.trim().replace(/^(['"])([\s\S]*)\1$/, '$2').replace(/\\(.)/g, '$1').trim().toLowerCase()
+const familiesOf = (value) => splitTop(value, ',').map(unquote).filter(Boolean)
+
+const WEIGHT_WORDS = { normal: 400, bold: 700 }
+const weightOf = (value, parent) => {
+  const v = String(value).trim().toLowerCase()
+  if (v in WEIGHT_WORDS) return WEIGHT_WORDS[v]
+  if (v === 'bolder') return parent < 350 ? 400 : parent < 550 ? 700 : 900
+  if (v === 'lighter') return parent < 550 ? 100 : parent < 750 ? 400 : 700
+  const n = Number(v)
+  return Number.isFinite(n) && n >= 1 && n <= 1000 ? n : null
+}
+const styleOf = (value) => {
+  const v = String(value).trim().toLowerCase().split(/\s+/)[0]
+  return v === 'italic' || v === 'oblique' || v === 'normal' ? v : null
+}
+
+// The text a `content` value draws: its strings (CSS escapes read) and
+// attr() values; '' for none, normal, url(), counters and quotes.
+const CSS_ESCAPE = /\\([0-9a-f]{1,6})\s?|\\([\s\S])/gi
+const contentText = (value, el) => {
+  let out = ''
+  for (const m of value.matchAll(/(["'])((?:\\[\s\S]|(?!\1)[^\\])*)\1|attr\(\s*([\w-]+)[^)]*\)/gi)) {
+    if (m[3]) out += el.getAttribute(m[3]) || ''
+    else {
+      out += m[2].replace(CSS_ESCAPE, (all, hex, ch) => {
+        if (!hex) return ch
+        const code = parseInt(hex, 16)
+        return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : '\ufffd'
+      })
+    }
+  }
+  return out
+}
+
+const SYSTEM_FONTS = new Set(['caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'])
+// The `font` shorthand → { family, weight, style } (null: not a font).
+const fontShorthand = (value) => {
+  const v = value.trim()
+  if (SYSTEM_FONTS.has(v.toLowerCase())) return { family: 'system-ui', weight: 'normal', style: 'normal' }
+  const tokens = []
+  let rest = v
+  // the tokens before the size: style, variant, weight, stretch
+  for (;;) {
+    const m = /^\s*([^\s,'"]+)/.exec(rest)
+    if (!m) break
+    const word = m[1]
+    if (/^[\d.]/.test(word) && !/^\d{1,4}$/.test(word)) break // a size (12px, 1.2em, 100%)
+    if (/^\d{1,4}$/.test(word) && Number(word) > 1000) break
+    const low = word.toLowerCase()
+    if (/^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller|calc\(|clamp\(|min\(|max\()/.test(low)) break
+    tokens.push(low)
+    rest = rest.slice(m[0].length)
+    if (tokens.length > 4) break
+  }
+  // the size [/ line-height], then the families
+  const size = /^\s*(?:[^\s/]+|(?:calc|clamp|min|max)\([^)]*\))(?:\s*\/\s*[^\s]+)?\s+/.exec(rest)
+  if (!size) return null
+  const family = rest.slice(size[0].length).trim()
+  if (!family) return null
+  let weight = 'normal'
+  let style = 'normal'
+  for (const t of tokens) {
+    if (t === 'italic' || t === 'oblique') style = t
+    else if (t === 'bold' || t === 'bolder' || t === 'lighter' || /^\d{1,4}$/.test(t)) weight = t
+  }
+  return { family, weight, style }
+}
+
+// ── The faces sheet ─────────────────────────────────────────────────────────
+const descriptor = (body, name) => {
+  const m = new RegExp(`(?:^|;|\\s)${name}\\s*:\\s*([^;]+)`, 'i').exec(body)
+  return m ? m[1].trim() : null
+}
+const rangesOf = (text) => {
+  if (!text) return null
+  const out = []
+  for (const part of String(text).split(',')) {
+    const p = part.trim().replace(/^u\+/i, '')
+    if (!p) continue
+    if (p.includes('?')) {
+      out.push([parseInt(p.replace(/\?/g, '0'), 16), parseInt(p.replace(/\?/g, 'f'), 16)])
+      continue
+    }
+    const [x, y] = p.split('-')
+    const from = parseInt(x, 16)
+    out.push([from, y ? parseInt(y, 16) : from])
+  }
+  return out.length ? out : null
+}
+const facesOf = (sheet) => {
+  const faces = []
+  let index = 0
+  for (const m of sheet.matchAll(FACE_RULE)) {
+    const body = m[1]
+    const family = unquote(descriptor(body, 'font-family') || '')
+    const weights = String(descriptor(body, 'font-weight') || '400').trim().split(/\s+/).map((w) => weightOf(w, 400) || 400)
+    faces.push({
+      index: index++,
+      family,
+      min: Math.min(...weights),
+      max: Math.max(...weights),
+      style: styleOf(descriptor(body, 'font-style') || 'normal') || 'normal',
+      ranges: rangesOf(descriptor(body, 'unicode-range'))
+    })
+  }
+  return faces
+}
+
+// The browser's face matching (CSS Fonts 4, §5.2): style first, then weight.
+const STYLE_ORDER = { italic: ['italic', 'oblique', 'normal'], oblique: ['oblique', 'italic', 'normal'], normal: ['normal', 'oblique', 'italic'] }
+const byStyle = (faces, style) => {
+  for (const s of STYLE_ORDER[style] || STYLE_ORDER.normal) {
+    const got = faces.filter((f) => f.style === s)
+    if (got.length) return got
+  }
+  return faces
+}
+const byWeight = (faces, w) => {
+  const within = faces.filter((f) => f.min <= w && w <= f.max)
+  if (within.length) return within
+  const below = faces.filter((f) => f.max < w).sort((x, y) => y.max - x.max)
+  const above = faces.filter((f) => f.min > w).sort((x, y) => x.min - y.min)
+  let pick
+  if (w >= 400 && w <= 500) pick = above.find((f) => f.min <= 500) || below[0] || above[0]
+  else if (w < 400) pick = below[0] || above[0]
+  else pick = above[0] || below[0]
+  return pick ? faces.filter((f) => f.min === pick.min && f.max === pick.max) : []
+}
+const covers = (face, code) => !face.ranges || face.ranges.some(([from, to]) => code >= from && code <= to)
+
+// ── The page ────────────────────────────────────────────────────────────────
+// The cascade's order of origins: the browser's rules, the page's, the
+// page's !important ones (the browser's !important ones are not read).
+const levelOf = (d) => (d.ua ? 0 : d.important ? 2 : 1)
+const beats = (x, y) => {
+  const lx = levelOf(x)
+  const ly = levelOf(y)
+  if (lx !== ly) return lx > ly
+  if (x.rank !== y.rank) return x.rank > y.rank
+  return x.order > y.order
+}
+// The values that may win: the winner of the rules that always hold, and
+// every conditional one that would beat it; `inherit` when no rule always
+// holds (the inherited value stays possible).
+const winnersOf = (list) => {
+  let base = null
+  for (const d of list) if (!d.conditional && (!base || beats(d, base))) base = d
+  const out = base ? [base] : []
+  for (const d of list) if (d.conditional && (!base || beats(d, base))) out.push(d)
+  return { list: out, inherit: !base }
+}
+const uniq = (values) => {
+  const out = []
+  const keys = new Set()
+  for (const v of values) {
+    const key = JSON.stringify(v)
+    if (keys.has(key)) continue
+    keys.add(key)
+    out.push(v)
+    if (out.length >= MAX_VALUES) break
+  }
+  return out
+}
+const varsIn = (text, into) => {
+  VAR_NAME.lastIndex = 0
+  let m
+  while ((m = VAR_NAME.exec(text))) into.add(m[1])
+  return into
+}
+
+const ROOT = { vars: new Map(), family: [['serif']], weight: [400], style: ['normal'] }
+const SKIP = new Set(['script', 'style', 'template', 'noscript', 'head', 'title'])
+
+// One element's possible fonts, from its declarations and its parent's.
+const fontOf = (decls, parent) => {
+  // custom properties (inherited): the raw values first, then var() in them
+  const vars = new Map(parent.vars)
+  const names = [...new Set(decls.filter((d) => d.prop.startsWith('--')).map((d) => d.prop))]
+  for (const name of names) {
+    const { list, inherit } = winnersOf(decls.filter((d) => d.prop === name))
+    const values = inherit ? [...(parent.vars.get(name) || [])] : []
+    for (const d of list) {
+      const v = d.value.trim()
+      if (/^(inherit|unset)$/i.test(v)) values.push(...(parent.vars.get(name) || []))
+      else if (!/^(initial|revert|revert-layer)$/i.test(v)) values.push(v)
+    }
+    vars.set(name, uniq(values))
+  }
+  for (const name of names) vars.set(name, uniq(vars.get(name).flatMap((v) => substitute(v, vars))))
+  const font = { vars }
+  // font-family, font-weight, font-style (the `font` shorthand sets all three)
+  for (const prop of ['family', 'weight', 'style']) {
+    const longhand = 'font-' + prop
+    const { list, inherit } = winnersOf(decls.filter((d) => d.prop === longhand || d.prop === 'font'))
+    const values = inherit ? [...parent[prop]] : []
+    for (const d of list) {
+      const before = values.length
+      for (const text of substitute(d.value, vars)) {
+        const keyword = text.trim().toLowerCase()
+        if (keyword === 'inherit' || keyword === 'unset') {
+          values.push(...parent[prop])
+          continue
+        }
+        if (keyword === 'initial' || keyword === 'revert' || keyword === 'revert-layer') {
+          values.push(...ROOT[prop])
+          continue
+        }
+        let raw = text
+        if (d.prop === 'font') {
+          const f = fontShorthand(text)
+          if (!f) continue
+          raw = f[prop]
+        }
+        if (prop === 'family') values.push(familiesOf(raw))
+        else if (prop === 'style') {
+          const st = styleOf(raw)
+          if (st) values.push(st)
+        } else {
+          for (const p of parent.weight) {
+            const w = weightOf(raw, p)
+            if (w) values.push(w)
+          }
+        }
+      }
+      // A value that is no value (a var() with none, a word that is not a
+      // font) leaves the property inherited.
+      if (values.length === before) values.push(...parent[prop])
+    }
+    font[prop] = uniq(values)
+  }
+  return font
+}
+
+/**
+ * The faces of the page's faces sheet that its elements draw.
+ * @param {string} html - a page built ahead (its faces sheet in place)
+ * @param {{ readSheet?: (href: string, from?: string) => string | null }} [options]
+ * @returns {Map<number, string> | null} faces sheet rule index → the characters
+ *   drawn in it; null when a stylesheet of the page cannot be read
+ */
+export const drawnFaces = (html, options = {}) => {
+  const drawn = new Map()
+  const sheet = FACES_STYLE.exec(html)
+  if (!sheet) return drawn
+  const faces = facesOf(sheet[1])
+  if (!faces.length) return drawn
+  const families = new Map()
+  for (const f of faces) {
+    if (!families.has(f.family)) families.set(f.family, [])
+    families.get(f.family).push(f)
+  }
+  // Scripts, templates and the faces sheet hold no text the page draws.
+  const lean = html.replace(FACES_STYLE, '<style data-smbls-faces></style>').replace(RAW, '<$1$2></$1>')
+  const { document } = parseHTML(lean)
+
+  // The rules: the browser's, then the page's sheets in document order,
+  // then the style attributes (above every rule).
+  const ctx = { readSheet: typeof options.readSheet === 'function' ? options.readSheet : null, unknown: false }
+  const rules = []
+  const add = (css, conditional, ua, from) => {
+    for (const rule of styleRulesOf(css, conditional, ctx, from)) {
+      const decls = declarationsOf(rule.block)
+      if (decls.length) rules.push({ selector: rule.selector, decls, conditional: rule.conditional, ua })
+    }
+  }
+  add(UA_RULES, false, true)
+  for (const el of document.querySelectorAll('style, link')) {
+    const media = el.getAttribute('media')
+    const conditional = !!media && !ALWAYS_MEDIA.test(media)
+    if (el.localName === 'style') {
+      if (!el.hasAttribute('data-smbls-faces')) add(el.textContent || '', conditional, false)
+      continue
+    }
+    const rel = (el.getAttribute('rel') || '').toLowerCase().split(/\s+/)
+    if (!rel.includes('stylesheet') || el.hasAttribute('data-smbls-font') || el.hasAttribute('disabled')) continue
+    const href = el.getAttribute('href') || ''
+    const css = ctx.readSheet && href ? ctx.readSheet(href) : null
+    if (typeof css !== 'string') return null
+    add(css, conditional || rel.includes('alternate'), false, href)
+  }
+  if (ctx.unknown) return null
+  const attributed = []
+  for (const el of document.querySelectorAll('[style]')) {
+    const decls = declarationsOf(el.getAttribute('style') || '')
+    if (decls.length) attributed.push({ el, decls })
+  }
+  // Only the custom properties a font or `content` declaration reads (at
+  // any depth).
+  const wanted = new Set()
+  const every = [...rules.flatMap((r) => r.decls), ...attributed.flatMap((a) => a.decls)]
+  for (const d of every) if (FONT_PROPS.has(d.prop) || d.prop === 'content') varsIn(d.value, wanted)
+  for (let size = -1; size !== wanted.size;) {
+    size = wanted.size
+    for (const d of every) if (wanted.has(d.prop)) varsIn(d.value, wanted)
+  }
+  const keep = (d) => FONT_PROPS.has(d.prop) || d.prop === 'content' || wanted.has(d.prop)
+
+  // Per element (and per ::placeholder, ::before, ::after of it): its
+  // declarations of those properties, each with its place in the cascade.
+  const declared = { element: new Map(), placeholder: new Map(), before: new Map(), after: new Map() }
+  let order = 0
+  for (const rule of rules) {
+    const decls = rule.decls.filter(keep)
+    if (!decls.length) continue
+    for (const part of splitTop(rule.selector, ',')) {
+      const selector = part.trim()
+      if (!selector) continue
+      let { text, conditional, target } = staticSelector(selector)
+      if (!target) continue
+      let matched
+      try {
+        matched = document.querySelectorAll(text)
+      } catch (err) {
+        // matched with its pseudo-classes out: a possibility, never certain
+        try { matched = document.querySelectorAll(looseSelector(text)) } catch (err2) { continue }
+        conditional = true
+      }
+      const rank = rule.ua ? 0 : specificityOf(selector)
+      const entries = decls.map((d) => ({ ...d, rank, order: ++order, conditional: conditional || rule.conditional, ua: rule.ua }))
+      const into = declared[target]
+      for (const el of matched) {
+        if (!into.has(el)) into.set(el, [])
+        into.get(el).push(...entries)
+      }
+    }
+  }
+  for (const { el, decls } of attributed) {
+    const own = decls.filter(keep)
+    if (!own.length) continue
+    if (!declared.element.has(el)) declared.element.set(el, [])
+    declared.element.get(el).push(...own.map((d) => ({ ...d, rank: 1e9, order: ++order, conditional: false, ua: false })))
+  }
+
+  // The characters of each element's own text, per font it may be drawn in.
+  const textOf = new Map()
+  const addText = (font, text) => {
+    if (!text.trim()) return
+    for (const family of font.family) {
+      for (const weight of font.weight) {
+        for (const style of font.style) {
+          const key = JSON.stringify([family, weight, style])
+          textOf.set(key, (textOf.get(key) || '') + text)
+        }
+      }
+    }
+  }
+  const walk = (el, parent) => {
+    const font = fontOf(declared.element.get(el) || [], parent)
+    let own = ''
+    for (const node of el.childNodes) {
+      if (node.nodeType === 3) own += node.textContent
+      else if (node.nodeType === 1 && !SKIP.has(node.localName)) walk(node, font)
+    }
+    const tag = el.localName
+    if (tag === 'input' || tag === 'textarea') {
+      own += ' ' + (el.getAttribute('value') || '')
+      // ::placeholder inherits from its field
+      const placeholder = el.getAttribute('placeholder')
+      if (placeholder) addText(declared.placeholder.has(el) ? fontOf(declared.placeholder.get(el), font) : font, placeholder)
+    }
+    addText(font, own)
+    // ::before / ::after inherit from the element; their text is `content`
+    for (const kind of ['before', 'after']) {
+      const decls = declared[kind].get(el)
+      if (!decls) continue
+      const box = fontOf(decls, font)
+      for (const d of winnersOf(decls.filter((x) => x.prop === 'content')).list) {
+        for (const value of substitute(d.value, box.vars)) addText(box, contentText(value, el))
+      }
+    }
+  }
+  if (document.documentElement) walk(document.documentElement, ROOT)
+
+  // The faces those characters are drawn in: per family, the faces of the
+  // style and weight the browser picks; per character, the last of them
+  // whose unicode-range holds it (CSS Fonts 4: overlapping ranges, the last
+  // rule first), else the next family.
+  for (const [key, text] of textOf) {
+    const [list, weight, style] = JSON.parse(key)
+    const chosen = new Map()
+    for (const family of list) {
+      if (GENERIC.has(family)) break
+      const all = families.get(family)
+      if (all && !chosen.has(family)) chosen.set(family, byWeight(byStyle(all, style), weight))
+    }
+    if (!chosen.size) continue
+    const seen = new Set()
+    for (const ch of text) {
+      if (seen.has(ch)) continue
+      seen.add(ch)
+      const code = ch.codePointAt(0)
+      if (code <= 32 || code === 0xa0) continue
+      for (const family of list) {
+        if (GENERIC.has(family)) break
+        const set = chosen.get(family) || []
+        let face = null
+        for (let i = set.length - 1; i >= 0 && !face; i--) if (covers(set[i], code)) face = set[i]
+        if (!face) continue
+        const chars = drawn.get(face.index) || ''
+        if (!chars.includes(ch)) drawn.set(face.index, chars + ch)
+        break
+      }
+    }
+  }
+  return drawn
+}