Layout-Oracle | Projects

Objective

Find cross-browser wrap drift fast, without launching real browser sessions.

Rationale

This project grew out of learning work. I wanted to understand where browser text wrapping diverges, and I wanted a practical way to test those cases without spinning up full screenshot pipelines.

It also came from wanting to try Pretext, then push it into a focused QA tool. Using a vendored subset let me experiment with engine-profile behavior and expose differences in a controlled UI.

Tech Stack

TypeScript
Vite
Vanilla DOM
Vendored Pretext subset with engine-profile overrides

Architecture

Layout-Oracle runs the same text through three modeled profiles: Chromium-like, Safari-like, and Firefox-like. It returns wrapped-line arrays for each profile and flags the first divergence index.

The diff view includes a line-index alignment overlay, so wrap drift is obvious at a glance.

Design choice was deliberate: keep model narrow, keep signal high. I only targeted wrap behavior and line-level drift, because that is where responsive regressions usually hide first.

Engine profile overrides expose these heuristic knobs:

lineFitEpsilon
preferPrefixWidthsForBreakableRuns
preferEarlySoftHyphenBreak
carryCJKAfterClosingQuote

Execution

The workflow stays intentionally narrow:

paste text
choose width, font, line-height
compare simulated wraps across engines

Built-in demo cases trigger modeled edge behavior for quick repro.

Results

This tool cut debugging time for line-wrap regressions and removed guesswork during responsive QA.

Boundary is explicit: this is a profile-based wrap simulator, not a full browser emulator.