Layout Oracle

Layout Oracle is a small static web app for exploring cross-browser wrap drift.

Paste text, choose a width, font, and line height, and compare how a Pretext-based browser-wrap simulator breaks the same content in:

• Chromium-like mode
• Safari-like mode
• Firefox-like mode

It is intentionally narrow:

• no backend
• no screenshots
• no full browser rendering
• just line wrapping diffs

What It Does

• shows per-engine wrapped line lists
• finds the first divergence line
• renders a simple visual overlay aligned by wrapped line index
• includes built-in demo cases that trigger modeled engine differences

What It Is Not

Layout Oracle is not a live browser oracle.

It uses a vendored subset of Pretext and varies the engine-profile heuristics Pretext already models:

• lineFitEpsilon
• preferPrefixWidthsForBreakableRuns
• preferEarlySoftHyphenBreak
• carryCJKAfterClosingQuote

That makes it best understood as a profile-based wrap simulator, not a full browser emulator.

Built With

• Vite
• TypeScript
• vanilla DOM
• a small vendored Pretext slice with an engine-profile override

Local Development

npm install
npm run dev

Checks

npm run test
npm run build

GitHub Pages

The repo includes .github/workflows/deploy-pages.yml.

To publish with GitHub Pages:

1. Open repository settings.
2. Go to Pages.
3. Set the source to GitHub Actions.

The workflow sets VITE_BASE_PATH from the repository name so the built assets resolve correctly on Pages.

Project Layout

src/
  app/        state, defaults, small DOM helpers
  oracle/     engine profiles, multi-engine runs, diff logic
  pretext/    vendored upstream subset with a small engine override patch
  ui/         controls, overlay rendering, result rendering

Notes

• v1 uses white-space: normal only
• font choice still depends on the fonts installed on the local machine
• custom font input must include a px size or the app falls back to the selected preset