Render Pipeline

Scroll horizontally to see the rest!

Step 1: TTF Loader
Aa

Mono.ttf

Font Tables


glyf

Contains the actual glyph data for each character.

cmap

Maps Unicode code points to glyph indices in the font.

hmtx

Contains horizontal metrics for each glyph, such as advance width

head

Contains global information about the font, such as version and bounding box.

maxp

Contains information about the maximum number of glyphs and points in the font.

And more..

There are many more tables in a TTF file, each serving a specific purpose.

A confession


The functioning of Harbor Browser is far too complex to be accurately represented by a single step-by-step diagram - it's impossible to summarize 30 thousand lines of code comprising deeply interlinked modules and services in just a few steps. The steps outlined above are a very high-level overview of the render pipeline, and do not capture the full complexity and nuance of how Harbor Browser actually works.

Harbor Browser

A browser built completely from scratch in Rust and Zig.

Resources

GitHub

Made with ❤️ by Tathya

Harbor Browser Logo