These are the value types that the style attributes take. Keywords are case-sensitive except colour names and hexadecimal digits. Parts of a value are separated by white space.
Colours
| Form | Example | Meaning |
|---|---|---|
#rrggbb | #ffff00 | Red, green and blue in hexadecimal; fully opaque. |
#rrggbbaa | #000000c0 | The same with alpha, 00 transparent to ff opaque. |
rgb(r,g,b) | rgb(255,255,0) | Decimal components, 0 to 255. |
rgba(r,g,b,a) | rgba(0,0,0,192) | With alpha, also 0 to 255. |
| a named colour | yellow | One of the names below. |
Colour components are not premultiplied by alpha.
| Name | Value | Name | Value |
|---|---|---|---|
transparent | #00000000 | green | #008000ff |
black | #000000ff | lime | #00ff00ff |
silver | #c0c0c0ff | olive | #808000ff |
gray | #808080ff | yellow | #ffff00ff |
white | #ffffffff | navy | #000080ff |
maroon | #800000ff | blue | #0000ffff |
red | #ff0000ff | teal | #008080ff |
purple | #800080ff | aqua | #00ffffff |
fuchsia | #ff00ffff | cyan | #00ffffff (same as aqua) |
magenta | #ff00ffff (same as fuchsia) |
Lengths
A length is a number and a unit, or a percentage; a missing unit is an error.
| Unit | Meaning | Since |
|---|---|---|
px | Pixels of the root container. TTML2 deprecates them unless tts:extent on tt gives the size in pixels. | 1 |
em | The element’s font size: 1em is 100%. | 1 |
c | Cells: the root container divided into the grid set by ttp:cellResolution, 32 columns by 15 rows by default. A horizontal length counts cell widths, a vertical one cell heights. | 1 |
% | A percentage of a reference length that each attribute defines, such as the parent’s font size or the root container’s size. | 1 |
rw | 1% of the root container’s width. | 2 |
rh | 1% of the root container’s height. | 2 |
| Type | Form |
|---|---|
<measure> (TTML2) | auto, fitContent, maxContent, minContent or a length, not negative |
<extent> | auto, contain, cover (the last two TTML2), or two measures: width then height. On tt only auto, contain or two pixel lengths are allowed. |
<origin> | auto, or two lengths: x then y, from the top left of the root container |
<padding> | one value: all four sides; two: before and after, then start and end; three: before, start and end, after; four: before, end, after, start |
<position> (TTML2) | one to four parts from left, center, right, top, bottom and lengths, as in CSS: center is center center, bottom right is left 100% top 100%, right 10% top 5% is 10% in from the right and 5% down |
<alpha> | a number from 0.0 to 1.0; values outside are clamped |
Fonts
tts:fontFamily takes a comma-separated list. Each item is a family name,
quoted or not, or one of the generic names below; a quoted name is never taken as a
generic name.
| Generic name | Meaning |
|---|---|
default | The processor’s choice; a monospaced sans-serif font is recommended |
monospace | Any fixed-width font |
sansSerif | Any sans-serif font |
serif | Any serif font |
monospaceSansSerif | Fixed-width sans-serif |
monospaceSerif | Fixed-width serif |
proportionalSansSerif | Proportional sans-serif |
proportionalSerif | Proportional serif |
tts:fontSize is one length for both directions, or two (width, then
height) for anamorphic text. Percentages are of the parent’s font size.
tts:fontVariant (TTML2) is normal, or a combination of
super or sub, full or half, and
ruby. They select the OpenType features sups,
subs, fwid, hwid and ruby.
Borders, outlines, shadows and emphasis
| Type | Form | Since |
|---|---|---|
<border> | at least one of a thickness, a style, a colour and radii, in any order. Thickness: thin, medium (default), thick or a length (not a percentage). Style: none (default), dotted, dashed, solid, double; an unknown style is drawn as solid. Colour: default the text colour. Radii: radii(r) or radii(rx, ry), default 0. | 2 |
<text-outline> | none, or an optional colour (default the text colour), a thickness and an optional blur radius (default 0) | 1 |
<shadow> | horizontal offset, vertical offset and an optional blur radius (default 0px), then an optional colour (default the text colour). tts:textShadow takes one or more, separated by commas. | 2 |
<text-decoration> | none, or any of underline or noUnderline, lineThrough or noLineThrough, overline or noOverline. The no… forms cancel an inherited line. | 1 |
<text-emphasis> | any of a style, a colour and a position, in any order; or none | 2 |
<text-combine> | none or all | 2 |
<ruby-reserve> | none, or both, before, after or outside, optionally followed by a length (percentages are of the font size) | 2 |
| Emphasis part | Values |
|---|---|
| Style | none; auto (filled sesame in vertical text, otherwise filled circle); filled or open with circle (● U+25CF, ○ U+25CB), dot (• U+2022, ◦ U+25E6) or sesame (﹅ U+FE45, ﹆ U+FE46), either word alone taking the default of the other (filled, circle); or a quoted string, whose first character is the mark |
| Colour | current (the text colour) or a colour |
| Position | before, after or outside |
Worked example
<style xml:id="karaoke"
tts:fontFamily="'Noto Sans', proportionalSansSerif"
tts:fontSize="1.2c"
tts:color="rgba(255,255,255,255)"
tts:textOutline="black 0.05c"
tts:textShadow="2px 2px 3px #00000080, -1px -1px"
tts:border="thin solid yellow radii(4px)"
tts:padding="0.2c 0.5c"/>