A companion to minimal-renderer & the EMNLP tutorial

How does text split into image patches?

Render text onto a continuous 2D pixel strip and slice it with a sliding window into fixed-size visual tokens (adapted from PIXEL and VisRep).

Exact PangoCairo + Live Canvas.
Presets use exact GoNotoCurrent.ttf PangoCairo strips; custom edits render live in browser.

Patch size (pixels_per_patch) 24 × 24 px

Controls line height and square patch width (window = pixels_per_patch).

Sliding window stride (stride) 24 px (continuous)

Font size & DPI 10pt @ 120 DPI (16.7px)

scaled_px = (dpi / 72) * font_size with 2px horizontal pad.

Font family Noto Sans

Includes automatic Unicode script & symbol fallbacks.

Exact PangoCairo (GoNotoCurrent.ttf) RGB mode (color emoji) Strip SentencePiece (▁ → space) Append black EOS patch Show patch grid on strip Tint patch boundaries Compact matplotlib row

Hover or click any patch to inspect its 24×24 pixel matrix & character span.

Choose or type an example

Includes examples from minimal-renderer.ipynb and the EMNLP playground

Example sentence

From minimal-renderer.ipynb:

From tokenization-tutorial:

Engine: PangoCairo (GoNotoCurrent.ttf)

Edit the text above to render live in your browser

1. Rendered sentence strip image_generator.get_image(sentence)

(24, 144)px (H × W) 6 patch widths

Rendered on a single horizontal line of height 24px, padded to a multiple of 24px. Hover a patch or character below to highlight its window.

2. Sliced image patches (visual tokens) image_generator.get_images(sentence)

6patches 1.2 chars / patch

Sliding a 24×24 window with stride 24px across the rendered sentence strip. Click any patch to pin it in the pixel inspector below.

Hover zoomed grid for (row, col) pixel value

Patch #1 · Pixels x = 0..24

Covers characters [0:2] · Click any patch above to lock selection.

Patch shape

(24, 24) uint8

Horizontal slice

[:, 0:24]

Covered text

"𒁹"

Ink coverage

18.4% non-white

Three experiments to try

How this browser demo relates to esalesky/minimal-renderer. In Python, TextImageGenerator uses PangoCairo + fontconfig with GoNotoCurrent.ttf and fallback fonts to render text onto a cairo.ImageSurface of height pixels_per_patch (default 24px, 10pt @ 120 DPI = 16.67px), pads width to the next multiple of pixels_per_patch, and slices sent_image[:, start:start+window] with step stride. This interactive page executes the same layout and sliding-window geometry live on an HTML5 2D <canvas> using Google Noto web fonts so you can experiment with any text directly in the browser.

How does text split into image patches?

Choose or type an example

Patch #1 · Pixels x = 0..24

Compare rendered examples side by side

Three experiments to try