Paragraph and Text Layout

Specifications

• Universal Shaped Text Layout defines the canonical resolution contract shared by geometry-sensitive consumers.

Focused studies

• Font fallback
• Italic and oblique
• Optical size automation
• Emoji placeholder rendering

Coverage inventory

The checklist below records implementation coverage. It does not define measurement, shaping, line, glyph, or editing geometry semantics.

Core / Modeling

• FontDescription
• italic model
  • faux italic
    • DOM font-synthesis: none;
• font-weight
• font-optical-sizing
• font-kerning - flag kern
• font-width (font-stretch) - var wdth
• list elements <ol>, <ul>

Core / Painting

• linemetrics overlay
• max_lines
• textlayout width <length> | auto
• textlayout vertical_align
• textlayout height
• line-height
• letter-spacing
• word-spacing
• text-indent
• fill
  • solid paint
  • gradient paint
  • shader (gradient/image) paint with decoration - see limitation https://github.com/gridaco/grida/issues/416
  • image paint
  • multiple fills
• effects
  • drop shadow
  • inner shadow
  • blur
  • backdrop blur
• strokes
  • align
    • outside (union)
      • fast pre-paint (only valid when the fill is non-opaque), but fast
      • paint with clip (split the stroke / fill geometry layer)
    • center (?)
    • inside (?)
  • Issues
    • https://github.com/gridaco/grida/issues/423
  • color
  • linear gradient
  • radial gradient
• decoration
  • text-decoration-style
  • text-decoration-color color
  • text-decoration-color auto / solid
  • text-decoration-color auto
  • text-decoration-color non-solid
  • text-decoration-thickness (only supports %)
  • text-decoration-skip-ink - https://github.com/rust-skia/rust-skia/issues/1187
  • known limitations https://github.com/gridaco/grida/issues/416
• Variable axes
  • wght
  • wdth
  • slnt
  • ital
  • opsz
    • opsz: auto
  • casl
  • crsv
  • MONO Monospace axis
  • GRAD Grade axis
  • XOPQ Parametric Thick Stroke axis
  • XTRA Parametric Counter Width axis
  • YOPQ Parametric Thin Stroke axis
  • YTUC
  • YTLC
  • YTAS
  • YTDE
  • YTFI
• OpenType features

Text Editor

• native text editor
• selection range
• selection range background
• mixed style LUT

Fallback Model

• CJK Fallback
  • implicit fallback (user fallback list)
  • Korean - Noto Sans KR
  • Japanese - Noto Sans JP
  • Chinese SC - Noto Sans SC
    • TC / HK - won't support (till level 2)
• Fallback model
  • soft fallback. level 1
  • unicode-range fallback with range control - level 2
  • explicit fallback. fallback spec level 3 (not planned)
    • Per-glyph fallback
    • Per-run fallback

ICU

• RTL

Ecosystem

• Emoji
  • Apple Color Emoji (as png for license reasons)
• Link annotations
  • pdf export
• update google fonts index. https://fonts.grida.co

Editor

• flatten -> text -> path (vector network)
• link annotation editor preview
• textlayout height mode
• fvar / STAT table parsing - FontStyle picker
• variable axes controls
• font feature controls
• font style picker
  • fvar.instances
  • PostScriptNames
  • multi typeface (multiple ttf for family)
• a11y/toggleItalic
• a11y/togglebold

@grida/fonts / fonts (rs)

• typr open type table parsing module
  • support STAT table
  • fvar
  • GSUB
  • GPOS

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide
• https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings
• https://marussy.com/variable-css-font-features/
• https://pomax.github.io/CFF-glyphlet-fonts/
• https://learn.microsoft.com/en-us/typography/opentype/spec/featurelist
• https://unicode.org/iso15924/iso15924-codes.html

Impls

cg272 width layout

https://github.com/user-attachments/assets/bad52f9b-f328-4562-b860-11ecf133ce1d

cg273 Variable axes / wght

https://github.com/user-attachments/assets/73afc137-c6e9-48c4-ab60-39bf208695ae

cg274 Text Decorations

https://github.com/user-attachments/assets/ba9faf94-846c-42df-8958-86932f90cf1d

cg275 fvar

https://github.com/user-attachments/assets/3b7846b7-ddba-4ed2-9174-9892c104cc82

cg276 OpenType features - GSUB

https://github.com/user-attachments/assets/c1b1ecfa-671e-456a-b9ab-74986725be7f

cg277 OpenType features - fvar.instances / text style picker

https://github.com/user-attachments/assets/afdcd445-4bf1-4910-bb71-48deb8cc4210

cg278 OpenType features - opsz - Optical sizing, opsz-auto

https://github.com/user-attachments/assets/dd49666f-d840-4f60-a112-b53600dceb20

cg279 Font fallback CJK (KR/JP/SC)

https://github.com/user-attachments/assets/c39d8a91-0a82-4bee-a150-c5a3e0cba23e

cg280 PNG Export https://github.com/gridaco/grida/pull/420

cg281 Text Stroke

https://github.com/user-attachments/assets/a137349a-be11-4f65-8682-06a3dd92f712

cg282 fonts.grida.co

https://github.com/user-attachments/assets/9bcc2e13-91cb-4e5a-9603-473a9acf5ef7

cg283 text spacing - line-height / letter-spacing / word-spacing

https://github.com/user-attachments/assets/f89afb4c-07ac-4817-b5a0-d8c4fc5f10ac

cg284 text effects - drop shadow / inner shadow / layer blur / backdrop blur

https://github.com/user-attachments/assets/8ce395bb-8095-4885-b312-961a6f9cca2b