Text: hyphenation and direction
<Document lang="en-US">
<Page>
<Text className="text-justify" hyphenate>Long paragraphs break words at syllables.</Text>
</Page>
</Document>
-
Hyphenation is off by default. Turn it on per
Textwithhyphenate(or the classhyphens-auto); it follows thelangof the text or the document. With neither, nothing is hyphenated, and thewarningsofgeneratesay so. US English patterns ship with the package and serve every Englishlang; other languages use the engine's built-in patterns. A paragraph is hyphenated in one language, so aTextinside aTextwith anotherlangis not hyphenated by patterns: make it a paragraph of its own, or give it ahyphenationCallback. A soft hyphen (\u00AD) in the text is always a possible break. -
Words wider than the line. A word that does not fit its line is broken between any two characters, hyphenated or not, as CSS does with
overflow-wrap: anywhere(never inside a grapheme cluster, such as a letter with its accent or an emoji).[word]from a hyphenation callback keeps a word from being hyphenated, but not from being broken this way. Text withwhitespace-nowraporwhitespace-preis never broken: a long word overflows the line. -
Your own hyphenation.
Font.registerHyphenationCallbacksets a function that splits each word into the parts a line may break between, for everyText;[word]keeps a word from being hyphenated. It replaces the built-in patterns, sohyphenateis not needed with it.import { Font } from '@inkoxide/render'; const whole = new Set(['Inkoxide', 'PostgreSQL']); // syllables(word) is your own rules, or a hyphenation library: 'hyphenation' → ['hy', 'phen', 'ation']. Font.registerHyphenationCallback((word) => (whole.has(word) ? [word] : syllables(word)));A word is a run of letters as displayed, after
uppercaseor another text transform; spaces, digits and punctuation stay as they are, and a word that already has soft hyphens is left alone. AText, or aTextinside one, takes its own function withhyphenationCallback={fn}, and the built-in patterns leave its words alone; it goes back tohyphenateandlangwithhyphenationCallback={null}.hyphenate={false}(orhyphens-none) turns the callback off for that text. Text withwhitespace-nowraporwhitespace-preis not broken. -
Right-to-left text uses
dir="rtl"on aText. Register a font that covers the script first (for example Noto Sans Arabic or Noto Sans Hebrew withFont.register): the bundled fonts cover Latin, Greek and Cyrillic. -
Even lines.
textWrap: 'pretty'(the classtext-pretty) breaks a paragraph's lines over the whole paragraph instead of filling each in turn, as TeX does: lines come out more even, with fewer hyphens, and the spaces of justified lines may also shrink by up to a third. It is inherited, so<Page style={{ textWrap: 'pretty' }}>sets it for a page.'wrap'is the default and fills lines in turn;'balance'is not supported yet. Text withwhitespace-nowraporwhitespace-pre, and very long paragraphs past the limits in the schema, break first fit. -
Orphans and widows:
orphans={2}andwidows={2}keep at least two lines of a paragraph together at the foot and the head of a page.
Synced from packages/render/GUIDE.md in the inkoxide repository.