HN Showcase
Back to browse
Sidebearing-trim – align text to visible ink, not the glyph box

Sidebearing-trim – align text to visible ink, not the glyph box

by peksi·Apr 22, 2026·2 points·1 comment
Visit ProjectView on HN

AI Analysis

●●SolidNiche GemBig Brain

Solves a 10-year-old stale W3C CSS proposal that no other tool addresses.

Strengths
  • •Extracts sidebearing values from .woff files to shift line-start glyphs precisely
  • •React component and vanilla JS API with resize observation built in
  • •Debug overlay via CSS variables for visual verification of alignment
Weaknesses
  • •Only .woff supported — .woff2 would add 1.15 MB bundle size
  • •No RTL support and requires mounted DOM nodes for line detection
Category
Design
Target Audience

Frontend developers and designers caring about typography

Similar To

letter-spacing CSS · optical margin alignment tools

Post Description

Ahoy HN!

I'm sure most of you have at least subconsciously noticed that when aligning heading to a layout edge or another element, text always appears slightly indented. This is indistinguishable on smaller font sizes, but starts to be noticeable especially on bigger sans-serif font sizes.

This has been discussed in the internet without any proper solutions. There's even a W3C CSS proposal from 2014 for "font-side-bearings: trimmed" that has remained stale. https://lists.w3.org/Archives/Public/www-style/2014Jan/0242....

This npm-package 'sidebearing-trim' fixes the issue. By extracting .woff font metrics we're detecting starting characters of the visual lines and shift each row by exactly the sidebearing value of its first glyph.

This is my first npm package so please expect it to be still rough around the edges. Happy to hear your feedback!

Similar Projects