Skip to content
Inkoxide

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

Text: superscripts and font features

Edit this page

<Text>
  E = mc<Text style={{ verticalAlign: 'super', fontSize: 7 }}>2</Text>, H
  <Text className="align-sub text-[7pt]">2</Text>O
</Text>
<Text style={{ fontFeatureSettings: "'tnum' 1, 'ss01'" }}>1,111.10</Text>
<Text className="tabular-nums slashed-zero">10,000</Text>
  • Superscripts and subscripts. verticalAlign: 'super' or 'sub' on a Text (the classes align-super and align-sub) raises or lowers its baseline by the offsets the font gives for superscripts and subscripts, for text of its size; 'baseline' puts it back. The size stays the one you set: give the superscript a smaller fontSize. The line grows to fit it, as in CSS. A Text inside a superscript stays on its baseline. On a Cell, verticalAlign places the content (top, middle, bottom), and super or sub there is an error.
  • OpenType features. fontFeatureSettings takes a CSS string ("'tnum' 1, 'liga' off"), a list of tags to turn on (['tnum', 'smcp']), or an object of tags to values or switches ({ tnum: 1, liga: false, salt: 2 }): 1 turns a feature on, 0 off, and a larger number picks an alternate. fontVariantNumeric ('tabular-nums', 'oldstyle-nums slashed-zero', …) and its Tailwind classes turn on the matching features, and fontFeatureSettings (or font-features-[…]) wins over them. Both are inherited like the other text properties; a Text that sets its own fontFeatureSettings replaces the inherited one. A feature does something only when the font has it: Inter has tnum, zero, ss01 to ss08, frac, case and more, but no small capitals; Noto Sans has smcp. A run takes at most 32 features, and a document at most 64 different sets of them.
  • PageNumber and TotalPages draw their digits without the features.

Synced from packages/render/GUIDE.md in the inkoxide repository.