Skip to content
Inkoxide

Search covers every page and heading of the docs. Use ↑ ↓ and ↵.

Text: hyphenation and direction

Edit this page

<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 Text with hyphenate (or the class hyphens-auto); it follows the lang of the text or the document. With neither, nothing is hyphenated, and the warnings of generate say so. US English patterns ship with the package and serve every English lang; other languages use the engine's built-in patterns. A paragraph is hyphenated in one language, so a Text inside a Text with another lang is not hyphenated by patterns: make it a paragraph of its own, or give it a hyphenationCallback. 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 with whitespace-nowrap or whitespace-pre is never broken: a long word overflows the line.

  • Your own hyphenation. Font.registerHyphenationCallback sets a function that splits each word into the parts a line may break between, for every Text; [word] keeps a word from being hyphenated. It replaces the built-in patterns, so hyphenate is 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 uppercase or another text transform; spaces, digits and punctuation stay as they are, and a word that already has soft hyphens is left alone. A Text, or a Text inside one, takes its own function with hyphenationCallback={fn}, and the built-in patterns leave its words alone; it goes back to hyphenate and lang with hyphenationCallback={null}. hyphenate={false} (or hyphens-none) turns the callback off for that text. Text with whitespace-nowrap or whitespace-pre is not broken.

  • Right-to-left text uses dir="rtl" on a Text. Register a font that covers the script first (for example Noto Sans Arabic or Noto Sans Hebrew with Font.register): the bundled fonts cover Latin, Greek and Cyrillic.

  • Even lines. textWrap: 'pretty' (the class text-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 with whitespace-nowrap or whitespace-pre, and very long paragraphs past the limits in the schema, break first fit.

  • Orphans and widows: orphans={2} and widows={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.