cssbox

A standalone CSS layout engine in Rust. HTML/CSS in, exact coordinates out.

Built for PDF generation, document rendering, native UI, and anywhere you need CSS layout without a browser.

The Problem

If you need to lay out a document with CSS — generate a PDF from HTML, render rich text in a native app, build an e-book reader — your options are:

• Headless Chrome/Puppeteer — works, but it's a 200MB dependency that spawns a browser process
• WeasyPrint — Python-only, slow, flexbox/grid support is incomplete
• Prince XML — proprietary, expensive
• wkhtmltopdf — deprecated and unmaintained

Libraries like Yoga and Taffy are great for app-style UI (flexbox/grid), but they don't handle document-style layout — inline text flow, floats, tables, or the CSS cascade. They solve a different problem.

cssbox fills the gap: a fast, embeddable Rust library that handles the full CSS layout spec, from modern flexbox/grid to traditional document flow.

Getting Started

[dependencies]
cssbox-core = "0.1"

use cssbox_core::tree::BoxTreeBuilder;
use cssbox_core::style::ComputedStyle;
use cssbox_core::geometry::Size;
use cssbox_core::layout::{compute_layout, FixedWidthTextMeasure};
use cssbox_core::values::LengthPercentageAuto;

// Build a tree of styled nodes
let mut builder = BoxTreeBuilder::new();
let root = builder.root(ComputedStyle::block());

let mut child_style = ComputedStyle::block();
child_style.width = LengthPercentageAuto::px(200.0);
child_style.height = LengthPercentageAuto::px(100.0);
let child = builder.element(root, child_style);

let tree = builder.build();

// Compute layout against an 800x600 viewport
let result = compute_layout(&tree, &FixedWidthTextMeasure, Size::new(800.0, 600.0));

// Query the result — just like getBoundingClientRect()
let rect = result.bounding_rect(child).unwrap();
assert_eq!(rect.width, 200.0);
assert_eq!(rect.height, 100.0);

From HTML/CSS

use cssbox_dom::computed::html_to_box_tree;
use cssbox_core::geometry::Size;
use cssbox_core::layout::{compute_layout, FixedWidthTextMeasure};

let tree = html_to_box_tree(r#"
    <div style="display: flex; gap: 10px">
        <div style="flex: 1; height: 100px"></div>
        <div style="flex: 2; height: 100px"></div>
    </div>
"#);

let result = compute_layout(&tree, &FixedWidthTextMeasure, Size::new(800.0, 600.0));

What It Supports

cssbox implements 7 CSS layout modes — both the modern layout primitives (flexbox, grid) and the traditional document flow (block, inline, float) that document rendering requires.

Landscape

Existing embeddable layout libraries are purpose-built for app UI (flexbox/grid) and intentionally skip document layout. Full browsers handle everything but aren't embeddable. cssbox sits in the middle.

Embeddable libraries

Full browsers and renderers (not embeddable as libraries)

Use Cases

• PDF / document generation — HTML/CSS to precise coordinates, then render to PDF
• Rich text UI — document-style layout in native apps (editors, readers, email clients)
• Native UI — CSS layout without a webview
• Embedded devices — small footprint, zero runtime dependencies
• Testing tools — verify CSS layout behavior programmatically

Crate Structure

Text Measurement

cssbox doesn't measure text — you provide the font metrics via a trait:

pub trait TextMeasure {
    fn measure(&self, text: &str, font_size: f32, max_width: f32) -> Size;
}

A built-in FixedWidthTextMeasure (8px/character) is included for testing. For production, plug in your font rasterizer (e.g., rusttype, fontdue, cosmic-text).

Testing

cargo test --workspace              # all 97 tests
cargo test -p cssbox-core           # core layout tests
cargo test -p cssbox-core block     # specific algorithm
cargo test -p cssbox-core flex
cargo test -p cssbox-core grid

Contributing

Contributions are welcome! The biggest impact areas:

1. WPT pass rate — pick a failing test, fix the layout algorithm
2. Missing CSS properties — add parsing + layout support
3. Text shaping — improve inline layout with real text measurement
4. Performance — layout caching, incremental relayout

License

MIT

lib.rs:

cssbox-core — A standalone CSS layout engine.

This crate implements CSS layout algorithms: block, inline, float, positioning, flexbox, grid, and table. It takes a tree of styled nodes as input and produces computed positions and sizes as output.

Usage

use cssbox_core::tree::BoxTreeBuilder;
use cssbox_core::style::ComputedStyle;
use cssbox_core::geometry::Size;
use cssbox_core::layout::{compute_layout, FixedWidthTextMeasure};

let mut builder = BoxTreeBuilder::new();
let root = builder.root(ComputedStyle::block());
// ... add children ...
let tree = builder.build();

let result = compute_layout(&tree, &FixedWidthTextMeasure, Size::new(800.0, 600.0));
let root_rect = result.bounding_rect(tree.root());