Text

A text layer keeps its styling per range of characters, can size itself to its content, and carries lists, links and highlights. This page covers only what differs from what you'd expect. Also called: rich text, text box, auto-resize, text truncation.

Text color on a layer and on a range

Where: Properties panel → Fill.

• Outside an instance, text color belongs to ranges of characters, never to the layer. With the layer selected, Fill recolors the whole text; while you edit the text, it recolors the selected characters.
• On a text layer inside an instance, picking a Fill without entering text editing sets a whole-text color instead. It is an override of its own: the text keeps following the main component's wording and styling.
• A whole-text color covers every range color, list markers included, and deletes none of them. Fill shows it while it is active, and preview applies it the same way. A Highlight is never covered.
• To get the range colors back, right-click the Fill section title → Reset Text & Styling. It also clears an override of the text's content and styling (resets).
• Picking a color while editing that text first turns the whole-text color into a range color over the entire text, then recolors the selection. The text is then overridden, as after any edit inside an instance.

Binding Fill to a variable binds ranges, not a whole-text color, and removes an active one (text ranges).

Sizing modes and oversized content

Where: Properties panel → Typography → the buttons with the tooltips Auto width & height, Auto height and Fixed, and Oversized content in the last row.

The buttons and the Horizontal sizing and Vertical sizing dropdowns of a Flex or Grid item are one setting:

Text sizing	Horizontal	Vertical
Auto width & height	Hug content	Hug content
Auto height	Fixed or Fill	Hug content
Fixed	Fixed or Fill	Fixed or Fill

• Choosing Auto width & height turns off Fill on both axes; Auto height turns it off vertically.
• Changing the width of an Auto width & height text sets it to Auto height; changing the height of any text sets it to Fixed.
• Auto width & height text never wraps, except at a Maximum width, on the canvas and in preview.

Oversized content shows only while every selected text layer is Fixed. It applies on the canvas and in preview:

Option	Result
Overflow	The text is drawn past the box.
Cut	The text is clipped at the box, through a line if need be.
Truncate	Lines that don't fully fit the height are left out, without a marker.
Ellipsis	Like Truncate, and the last visible line ends with ….

While you edit a text layer, its full contents stay visible, whatever the option.

Lists

Where: while editing a text layer. There is no button or menu for lists.

Type a trigger into an empty paragraph. It fires on the space, and only while the paragraph holds nothing else:

Type	List item
* or -, space	Bulleted
1. or #, space	Numbered
[], space	Checkbox, unchecked

• Tab and Shift + Tab indent and outdent the selected items. Enter on an empty item leaves the list. Backspace at the start of an item outdents it, and at the first level turns it into a plain paragraph.
• A marker takes the font, size and color of the first character of its paragraph. It can't be styled on its own.
• Pasted web content and imported files bring bulleted and numbered lists along; checkbox lists come from the trigger only.
• Clicking a checkbox on the canvas toggles it. In preview, checkboxes don't react to clicks.

Links

Where: while editing a text layer, select characters → Ctrl + K → type or paste the address after Link: → Apply. There is no panel field or menu entry.

• Adding a link underlines the range and leaves its color alone. A link has no styling of its own: in preview it looks like its range, so a link whose underline you remove looks like the text around it.
• Hover a link on the canvas for a popup with icon buttons to copy, edit and remove it. Removing the link removes the range's decoration too.
• In preview it opens in a new tab.

note

Only web links can be typed. An address that doesn't start with http:// or https:// gets https:// put in front of it, so mailto: and tel: links can't be created. Imported links keep their address until you edit them.

Highlight

Where: Properties panel → Highlight → the + button (tooltip Add highlight). Padding and Corner radius appear once a highlight exists.

• A highlight is a paint behind a range of characters, scoped like Fill: the whole text with the layer selected, the selected characters while you edit.
• Padding enlarges the highlight without moving the text or resizing the layer.
• A highlight that wraps is drawn line by line, and Corner radius rounds every piece, on the canvas and in preview.

Right-to-left text

Direction is detected from the text; there is no control for it. The first letter of a left-to-right or right-to-left script decides for the whole layer, not per paragraph; digits and punctuation don't count. Preview resolves it the same way. Alignment doesn't follow: right-to-left text stays flush left until you align it with the button that has the tooltip Align right.

Related

• Binding rules — text size and Fill bound to a variable per range.
• Sizing — Fixed, Fill and Hug content in a Flex or Grid layout.
• Overrides — what a text layer inside an instance can change.
• Fonts — what happens when a font is missing.
• Keyboard shortcuts — the keys that apply while editing text.