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:

<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-weight
4. font-size
5. text-decoration
6. preserve-whitespace (boolean, defaults to false)
7. line-height
8. min-font-size, only used if font-size="fit"
9. max-font-size, only used if font-size="fit"
10. text-shadow and related attributes
11. letter-spacing
12. word-spacing

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.

font-weight

The font-weight property selects a specific weight variant of the current font. It accepts numeric values (100 through 900 in increments of 100) or named aliases such as thin, light, medium, semibold, bold, black, etc.

When set, font-weight takes precedence over font-style for variant selection, but the italic flag from font-style is preserved. If the requested weight variant is not available, Press falls back to the font-style value.

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.

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

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

<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.

letter-spacing / tracking

The letter-spacing attribute adds extra space between each character in a word. tracking is an alias for letter-spacing (the two are equivalent).

Like line-height, the value can be relative or concrete:

Format	Example	Meaning
Bare number	0.1	0.1 × font size per gap
Percentage	10%	10% of font size per gap
Absolute (pt)	2pt	2pt per gap
Absolute (cm)	0.1cm	0.1cm per gap

Negative values tighten the spacing.

<frame font-size="14pt" letter-spacing="2pt">Absolute 2pt spacing</frame>
<frame font-size="14pt" letter-spacing="0.1">Relative: 10% of font size per gap</frame>
<frame font-size="14pt" letter-spacing="10%">Same as above</frame>
<frame font-size="14pt" tracking="2pt">Equivalent to letter-spacing</frame>
<frame font-size="14pt" letter-spacing="-0.5pt">Tighter text</frame>

word-spacing

The word-spacing attribute adds extra space between words. Supports the same relative and concrete formats as letter-spacing.

<frame font-size="14pt" word-spacing="4pt">Absolute 4pt word gaps</frame>
<frame font-size="14pt" word-spacing="0.2">Relative: 20% of font size per gap</frame>
<frame font-size="14pt" word-spacing="-2pt">Tighter word gaps</frame>