Press

Appearance

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. These 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"
  9. text-shadow and related attributes

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.

text-shadow ​

Specifically, the text shadow related attributes are:

  1. text-shadow
  2. text-shadow-x
  3. text-shadow-y
  4. text-shadow-offset
  5. text-shadow-color

Setting any of the above will create a shadow behind the text with color determined by text-shadow-color and with x and y offset respectively defined by text-shadow-x and text-shadow-y.

For simplicity, setting text-shadow-offset will control both text-shadow-x and text-shadow-y.

Additionally, the text-shadow attribute can set any combination of the x offset, y offset, and color attributes using one of the following syntaxes:

  1. text-shadow="{offset} {color}"
  2. text-shadow="{x} {y}"
  3. text-shadow="{x} {y} {color}"

e.g.

xml
<p text-shadow="0.5pt black">
    Lorem ipsum...
</p>

would create a black text shadow offset by 0.5pt to the bottom right.

xml
<p text-shadow="0.5pt 2pt rgba(0, 0, 0, 0.6)">
    Lorem ipsum...
</p>

would create a slightly translucent black shadow offset 0.5pt in the x direction and 2pt in the y direction.