Skip to content

Inline Styles

Unlike block styles, inline styles are inherited by children so can be defined in a containing block and propagated down to all inline descendents.

For example:

xml
<frame font="UbuntuMono">
  Some example text.
</frame>

The only attribute which applies to all inlines is background-color. Aside from this, all inline styles specifically refer to text:

Text Styles

The text-specific style attributes are:

  1. font
  2. font-style
  3. font-size
  4. text-decoration
  5. preserve-whitespace (boolean, defaults to false)
  6. line-height
  7. min-font-size, only used if font-size="fit"
  8. max-font-size, only used if font-size="fit"

font

the font property determines the font choice for a particular section of text. The value of this property can be either:

  1. A reference to a font defined in the document's assets
  2. The name of a google font
  3. A semi-colon separated list of fonts
    • In this case, subsequent fonts are used as fallbacks to render glyphs which are unsupported by previous fonts

For example, <p font="Inter; Noto Sans SC>Hello, 你好</p> would use Google's Inter font to render "Hello, " and Noto Sans Simplified Chinese to render "你好" since the glyphs "你" and "好" aren't supported by Inter.

font-style

The font-style property can be regular (the default), bold, italic, or bold-italic.

text-decoration

The text-decoration attribute contains a whitespace separated list of text decoration features from:

  1. underline
  2. strike-through

e.g. <span text-decoration="underline strike-through">...</span>.

preserve-whitespace

If preserve-whitespace="true" then the text will be displayed exactly as it's written within the inline. For example, line breaks, tabs, additional spaces etc. will all be respected.