@vettvangur/hyphen
v0.0.10
Published
Vettvangur | Responsive language-aware hyphenation
Maintainers
thorvardurb
helgivettvangur
ollijonsson
marysomerville
snorria
ccrch
jayweekend
egillm
gudjon83
hafsig79
bgunnarssondev
sveinnmar
brynjarth
gardarthorsteins
ingimar
limgur
maggivilli
gozdeKeywords
Readme
@vettvangur/hyphen
Responsive, language-aware hyphenation for headline elements via canvas text measurement.
Install
pnpm add @vettvangur/hyphen [email protected]Usage
import { initHyphenation } from '@vettvangur/hyphen'Whole page (default — targets elements with a headline class):
await initHyphenation()Custom classes:
await initHyphenation(document, { classes: ['my-heading', 'display-text'] })Each token matches exact class names and prefixes — headline matches both headline and headline-xl.
Scoped to a subtree:
await initHyphenation(someElement)React
Whole app — call once in a root layout:
import { initHyphenation } from '@vettvangur/hyphen'
import { useEffect } from 'react'
export default function Layout({ children }) {
useEffect(() => {
initHyphenation()
}, [])
return <>{children}</>
}Resize and font-load listeners are bound once regardless of re-renders.
Scoped to a component:
import { initHyphenation } from '@vettvangur/hyphen'
import { useEffect, useRef } from 'react'
export default function Hero({ title }) {
const ref = useRef(null)
useEffect(() => {
if (ref.current) initHyphenation(ref.current)
})
return <h1 ref={ref} className="headline">{title}</h1>
}The effect runs after every render so updated text is always hyphenated. initHyphenation writes soft hyphens directly to el.textContent; the internal originalText map ensures idempotent re-runs.
Language
Language is auto-detected from the nearest [lang] ancestor attribute or <html lang>. Supports is (Icelandic) and English (default).
CSS classes
| Class | When added |
|-------|-----------|
| js-hyphen-manual | Soft hyphens (­) were inserted into a word |
| js-hyphen-emergency | A word couldn't be hyphenated — overflow fallback should be applied |
Example CSS:
.js-hyphen-emergency {
overflow-wrap: break-word;
}Auto re-runs
When called with document as the root, hyphenation automatically re-runs on:
- Window resize (debounced 150 ms)
- Font load events (
document.fonts)