Skip to content

text.md

Latest commit

 

History

History
53 lines (42 loc) · 3.46 KB

text.md

File metadata and controls

53 lines (42 loc) · 3.46 KB
Raw

<text>

A text node; its children are the glyphs.

<text color="#FFFFFF" fontSize={128} fontWeight="bold" width={1920} textAlign="center">
  Hello World
</text>

A <text> given neither width nor height sizes itself to what it says; giving it either fixes the box, wraps into it, and makes textAlign / textBaseline mean something. A centered full-frame title is <text width={1920} height={1080} textAlign="center" textBaseline="middle">…</text>.

Props

All common props, plus:

Prop Type Default Meaning
children string (or expressions resolving to strings) required The text content, alongside any <textRange>, paint, <stroke>, <shadow>, <effect>, <animation> and <keyframeTrack> children.
color string none The glyph color; any CSS color, alpha ignored (use opacity). Drawn beneath any paint children (see paints.md); animate it with a color keyframe track. A text with neither color nor a paint child draws no glyphs.
fontFamily string Inter A family available on the machine (dapi fonts); see fonts.md.
fontSize number 16 Px.
fontWeight number | "normal" | "bold" "normal" CSS weights 100–900.
fontStyle "normal" | "italic" | "oblique" "normal"
letterSpacing number 0 Extra space between glyphs, px; negative tightens.
textCase "original" | "upper" | "lower" "original" Casing applied when drawing; the text itself stays as written.
textAlign "left" | "center" | "right" "left" Horizontal alignment of glyphs within the box.
textBaseline "top" | "middle" | "bottom" | "alphabetic" "top" Vertical alignment within the box: the block anchored to the top or bottom, centered, or ("alphabetic") the first line's baseline at the top of the box.
leading number 1 Line height as a multiple of each line's natural height.

The text-only animation types ("appearWord", "appearChar", "scramble") animate the glyphs themselves.

<textRange>

A style override for a run of the glyphs, a sub-entity like a paint: start/end address the run by character index into the text as written (before textCase), and the rest is what changes inside it. An unset font prop inherits the text's; its own color, paints, strokes and shadows replace the text's for those glyphs. Several stack in document order, later ones winning where they overlap. Layout (textAlign, textBaseline, leading) stays the text's.

<text fontSize={96} color="#FFFFFF" width={1920} textAlign="center">
  Ship it today
  <textRange start={5} end={7} color="#F43F5E" fontWeight="bold" />
  <textRange start={8} fontStyle="italic" letterSpacing={2}>
    <stroke color="#000000" width={2} />
  </textRange>
</text>
Prop Type Default Meaning
start number required First character of the run, 0-based.
end number end of text One past the last character of the run.
color string inherits The run's glyph color; any CSS color.
fontFamily, fontSize, fontWeight, fontStyle, letterSpacing, textCase as on <text> inherit Font overrides for the run.
children Paint, <stroke>, <shadow> and <keyframeTrack> (a color track) children.