Text

Import them from @inkoxide/render. Examples, and how these components work together, are in the guide.

A paragraph, or a run inside one; inside an <Svg>, SVG text (SvgTextProps).

import { Document, Page, Text } from '@inkoxide/render';

export default function Example() {
  return (
    <Document lang="en-US">
      <Page size={[320, 160]} className="p-6">
        <Text className="text-justify leading-relaxed" hyphenate>
          A paragraph is a <Text className="font-bold">Text</Text>, and a Text inside it is a run with its own
          style: <Text className="text-orange-700 italic">a colour</Text>, a weight or a size. Long words are
          hyphenated with the patterns of the document’s language.
        </Text>
      </Page>
    </Document>
  );
}

Prop	Type	Default	Description
`hyphenate`	`boolean`		Hyphenate this text (same as `hyphens-auto`). Needs patterns for its language, so set `lang` on the text or the Document: without one, nothing is hyphenated and a warning says so. `false` (`hyphens-none`) also turns off the registered `hyphenationCallback`.
`lang`	`string`		Language of this text, when it differs from the document's.
`hyphenationCallback`	`HyphenationCallback \| null`		Breaks words where this function says, instead of the built-in patterns (`hyphenate`), which then leave this text alone. Overrides the registered callback (`Font.registerHyphenationCallback`); `null` turns it off for this text, which goes back to `hyphenate`.
`dir`	`'ltr' \| 'rtl' \| 'auto'`		Base direction: `rtl` for Arabic or Hebrew paragraphs, `auto` from the first strong letter.
`orphans`	`number`	`1`	Minimum lines left at the bottom of a page before a break.
`widows`	`number`	`1`	Minimum lines carried to the top of the next page.
`render`	`RenderProp`
`x`	`SvgNumberList`		Where the text starts (with `textAnchor`); a list positions each character.
`y`	`SvgNumberList`
`dx`	`SvgNumberList`		Shifts from where each character would be.
`dy`	`SvgNumberList`
`rotate`	`SvgNumberList`		Degrees each character is turned; the last value repeats.
`letterSpacing`	`number \| string`
`wordSpacing`	`number \| string`
`textDecoration`	`string`		`underline`, `overline`, `line-through`, or several.
`textLength`	`number \| string`		The width to fit the text to, by its spacing or (`lengthAdjust`) its glyphs too.
`lengthAdjust`	`'spacing' \| 'spacingAndGlyphs'`
`direction`	`'ltr' \| 'rtl'`

It also takes the shared props break, wrap, minPresenceAhead, fixed, pages, href, bookmark, className, style, id, debug.

Link

A link to href (https://…, mailto:… or #id; src is the same). Inside a Text it is an inline run; elsewhere a box, like a View with href. It adds no colour or underline.

import { Document, Link, Page, Text } from '@inkoxide/render';

export default function Example() {
  return (
    <Document>
      <Page size={[320, 120]} className="p-6">
        <Text>
          Read the{' '}
          <Link href="https://inkoxide.dev/docs" className="text-orange-700 underline">
            documentation
          </Link>
          , or write to{' '}
          <Link href="mailto:[email protected]" className="text-orange-700 underline">
            [email protected]
          </Link>
          .
        </Text>
      </Page>
    </Document>
  );
}

Prop	Type	Description
`src`	`string`

It also takes the shared props break, wrap, minPresenceAhead, fixed, pages, href, bookmark, className, style, id, debug.