#mizchi/font

#Usage

let data : Bytes = ... // TTF, OTF, WOFF, WOFF2, or TTC file bytes
let font = @font.parse_font(data).unwrap()

// Get glyph outline as SVG path commands
let cmds = font.scaled_outline('A'.to_int(), 48.0)

// Get glyph metrics
let gid = font.glyph_index('A'.to_int())
let metrics = font.glyph_metrics(gid)

// Text layout with kerning
let positions = font.layout_text("Hello", 48.0)
let width = font.measure_text("Hello", 48.0)

// Baseline-relative logical/ink rectangles and per-glyph UTF-16 ranges
let bounds = font.layout_text_bounds("Hello", 48.0)
let ink = bounds.ink_bounds // None for empty text or spaces

// OpenType shaping and mixed LTR/RTL layout, with source cluster ranges
let shaped = font.shape_text("office AV אבג", 48.0, direction=@font.Auto)
let width = shaped.bounds.advance_width
let runs = shaped.runs // Visual order, script, embedding level and glyph ranges

// Variable font with axis values
let cmds = font.char_outline_at('A'.to_int(), { "wght": 700.0 })

// Vertical text layout
let vpositions = font.layout_text_vertical("縦書き", 48.0)
let vheight = font.measure_text_vertical("縦書き", 48.0)

// Font subsetting (glyf-based TrueType only)
let subset = @font.subset_font(data, [0x41, 0x42, 0x43]) // A, B, C

#Supported Specifications

#Font Formats

#OpenType Tables

#✅ Parsed

#❌ Not Parsed

#CFF / CFF2 Charstring Operators

#Glyph Outlines

#cmap Formats

#Kerning

#Font Subsetting

#Text Layout

#Shaped paragraphs

let shaped = font.shape_text(
  "fi AV אבג 123",
  32.0,
  direction=@font.Auto, // Also Ltr and Rtl
  language="und",      // BCP 47, e.g. "ar", "he", "tr"
  kerning=true,
  ligatures=true,
  font_weight=700.0, // Optional: select wght on a variable font
  axis_values={ "wdth": 90.0 }, // Optional: explicit axes override font_weight
)
let fit = shaped.bounds.check_width(80.0, 240.0)
// fit.status: Underflow, Fits or Overflow; inclusive limits in CSS pixels

#JS Bindings

#Checking whether text fits

import { checkTextFit, inspectTextFit } from '/browser/fit.js';

const result = await checkTextFit('Hello world Hello world', {
  minWidth: 40,
  maxWidth: 120,
  maxHeight: 96, // Omit for an unconstrained height
  requiredFonts: ['YourLoadedFont'], // Optional: require a registered web font
  allowTruncation: false, // Default: require the full text
  style: {
    fontFamily: 'YourLoadedFont, sans-serif',
    fontSize: '20px', fontWeight: '700', lineHeight: '28px',
    whiteSpace: 'normal', overflowWrap: 'anywhere',
  },
});
console.log(result.unwrapped.status); // Natural max-content width vs [40, 120]
console.log(result.layout.status);    // Actual wrapping and height at 120 x 96
console.log(result.layout.overflowX, result.layout.overflowY);
console.log(result.accepted);          // Wrapped-layout acceptance, including fonts/clipping
console.log(result.presentation);      // Full / truncated / clipped / scrollable / overflow

// Inspect an existing element using its actual fonts, inline spans and CSS.
// This does not resize or modify the source element.
const existing = await inspectTextFit(document.querySelector('.label'), {
  minWidth: 40, maxWidth: 120,
});

# Report both results; --mode selects which result --assert-fit checks
just check-fit --text 'Hello world Hello world' --weight 700 \
  --min-width 40 --max-width 120 --height 96 --assert-fit

# Single-line check; returns exit code 1 for overflow/underflow/unknown
just check-fit --text 'Hello world' --max-width 80 \
  --mode single-line --assert-fit

# Inspect a real page in the selected headless engine
just check-fit --url http://localhost:3000 --selector '.label' \
  --browser firefox --min-width 40 --max-width 120 \
  --require-font 'YourLoadedFont' --allow-truncation --assert-fit

#Headless browser measurements

just setup-browser
just test-browser

# Save six default samples as _build/measurements/font-metrics.json
just measure-browser

# Measure a local font, with optional DOM wrapping; --text can be repeated
just measure-browser --font fixtures/NotoSansMono-Regular.ttf \
  --text "Hello world" --text "Ag" --size 20 --width 70 \
  --line-height 30 --output _build/measurements/wrapped.json

# GSUB/GPOS and mixed-direction samples
just measure-shaping
just measure-browser --font fixtures/shaping-reference/arabic.ttf \
  --text "العربية" --direction rtl --language ar --size 32
just measure-browser --font fixtures/shaping-reference/roboto-variable.ttf \
  --text "Hello world" --weight 700 --size 24
just measure-browser --font fixtures/shaping-reference/robotoserif-variable.ttf \
  --text "Hello world" --axis wdth=75 --axis opsz=8 --size 32
# Optional feature switches: --no-kerning --no-ligatures

import { loadFont } from '/browser/font.js';

const font = await loadFont('/fixtures/NotoSansMono-Regular.ttf');
try {
  const metrics = font.measure('Hello world', 20, { maxWidth: 70, lineHeight: 30 });
  console.log(metrics.canvas.advanceWidth, metrics.dom.lineRects);
} finally {
  font.dispose();
}

// Explicit variation instances load asynchronously and are cached until dispose().
const variable = await loadFont('/fixtures/shaping-reference/robotoserif-variable.ttf');
try {
  const metrics = await variable.measureWithAxes('Hello world', 32, {
    fontWeight: 400, axisValues: { wdth: 75, opsz: 8 },
  });
  console.log(metrics.shaping.variations);
} finally {
  variable.dispose();
}

#Development

# Download test fixtures and run tests
just test

# Or manually
bash scripts/download-fixtures.sh
moon test

# Type check
just check

# Format code
just fmt

# Default-backend tests and headless browser checks
just ci

#Dependencies

• mizchi/svg — PathCommand type for glyph outlines
• mizchi/zlib — WOFF1 decompression
• mizchi/brotli — WOFF2 decompression
• Milky2018/moon_swash — pure MoonBit OpenType shaping
• moonbit-community/unicode-bidi — Unicode bidirectional analysis and reordering

#Test Fonts

#License