RichText
Text with styled runs written inside the string: (blue)[Blue], (24, bold)[Big], *bold*, _italic_, `code`, ~strike~, \n for a line break and a blank line for a paragraph. A slash prints markup as written: /(blue)[Blue]. Values from $name are always plain text. Its config styles the whole text, like Text's.
Styles inside the string
RichText writes styled runs inside one string. (style, style…)[text] styles the text in brackets, and *bold*, _italic_, `code` and ~strike~ mark words. Runs nest. Its own config styles the whole text, like a Text's.
RichText(
.config(
size: 17
lineHeight: 1.6
)
.obj('
Room B is (teal)[free] at (accent, bold)[10:30] for ~€60~ *€48*.\n
(13, muted)[Prices include _everything_. See (link: /docs/objects)[the docs] for `RichText`.]
A blank line starts a paragraph. (hL.gold.40)[Highlights] work too.
')
)The markup
| Write | Shows |
|---|---|
(blue)[text], (#0d0d0d)[text], (accent)[text] | a colour: named, hex or a theme colour |
(green.50)[text] | a colour at 50% opacity |
(24)[text] | a size, in design px |
(weight.700)[text], (bold)[text], (italic)[text] | weight and style; also underline, strike, code |
(hL.gold.30)[text] | a highlight behind the text, with its opacity |
(link: /docs)[text] | a link (in-app paths navigate without a reload) |
(grey.90, bold, 35)[text] | several styles at once |
*bold* _italic_ `code` ~strike~ | marks; they need a space or punctuation around them, so snake_case and 2 * 3 stay as written |
\n | a line break; a blank line starts a paragraph; other line breaks in the source are spaces |
/(, /*, /_ | the markup as written; each further slash shows one slash (//(blue)[x] shows /(blue)[x]) |
Values from $name and ${expr} are always plain text, never markup, so a name with a * in it cannot restyle the page. A style the compiler does not know is shown as written, with warning L1018. The string may run over several lines between quotes.
Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
size (fontSize) | len | Font size in design px. | |
font (fontFamily) | txt | Font family, e.g. 'Geist'. | |
weight (fontWeight, wight) | thin | light | regular | medium | semibold | bold | black | Font weight: thin…black or 100–900. | |
italic (italics) | bool | Italic style. | |
color | paint | Text colour (a gradient paints the glyphs). | |
align (textAlign, textAlight, alignment) | left | mid | right | start | end | justify | Text alignment. | |
lineHeight | num | Line height as a multiple of the font size. | |
letterSpacing | len | Space between letters. | |
underline | bool | Underline. | |
underlinePos | auto | under | baseline | Underline position. | |
underlineSkipInk | bool | true | Skip descenders when underlining. |
strike | bool | Strike-through. | |
transform | none | upper | lower | capitalize | Case transform. | |
overflow | wrap | ellipsis | fade | scale | clip | wrap | Long text: wrap (default), ellipsis, fade, scale or clip. |
maxLines | int | Maximum lines before overflow applies. | |
selectable | bool | true | Allow selection. |
baseline (textBaseline) | top | mid | bottom | baseline | Vertical alignment inside a line. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.obj: text, the default slot, required
Events
.on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.