pierrelf.com
Phase 3, Issue 5: Basic Block Layout Engine#
Implement a basic block layout engine in the layout crate that positions block-level elements and wraps text into lines.
Requirements#
Layout tree:
LayoutBoxenum:BlockBox,InlineBox,TextRun,AnonymousBlock- Each box has: x, y, width, height, margin, padding, border (all in pixels)
- Build layout tree from DOM tree (block elements generate block boxes, text nodes generate text runs)
Block layout algorithm:
- Blocks stack vertically within their parent
- Each block takes the full width of its parent (minus padding/margins)
- Height is determined by content (sum of children heights)
- Root element gets the viewport width
Default styles (hardcoded for Phase 3, no CSS yet):
<html>,<body>,<div>,<p>,<h1>-<h6>,<pre>→ display: block<span>,<a>→ display: inline<p>→ margin-top: 1em, margin-bottom: 1em<h1>→ font-size: 2em, bold, margin-top/bottom: 0.67em<h2>→ font-size: 1.5em, bold<h3>→ font-size: 1.17em, bold<body>→ margin: 8px (default browser margin)
Text layout:
- Use the
textcrate to measure text (Font::shape_text for advance widths) - Word-wrap text at the containing block width
- Line height: 1.2em default
- Break on whitespace boundaries
API:
layout(document: &Document, viewport_width: f32, viewport_height: f32, font: &Font) -> LayoutTreeLayoutTreeprovides access to the root layout box and iteration
Acceptance criteria#
- Block elements stack vertically
- Text wraps at container width boundaries
-
<p>has vertical margins - Headings are larger than body text
- Layout produces correct x, y, width, height for a simple page
-
cargo clippy -p we-layout -- -D warningspasses -
cargo test -p we-layoutpasses with layout tests - No unsafe code
- No external dependencies (uses workspace crates only: dom, text)