This is the Standard reference for typography.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
text-align
Interactive example. Rule type: shorthand.
Prefixes: text-align. Example: text-align:left. It emits text-align:left;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
left, center, right, justify, start, end, match-parent, justify-all, [center], $align
text-align-last
Interactive example. Maturity: advanced.
Prefixes: text-align-last. Example: text-align-last:auto. It emits text-align-last:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
auto, start, end, left, right, center, justify, match-parent, [center], $alignLast
text-align-all
Interactive example. Maturity: advanced.
Prefixes: text-align-all. Example: text-align-all:start. It emits text-align-all:start;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
start, end, left, right, center, justify, match-parent, [center], $alignAll
text-group-align
Interactive example. Maturity: experimental. Browser support: CSS Text Level 4 draft feature with limited browser support.
Prefixes: text-group-align. Example: text-group-align:none. It emits text-group-align:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, start, end, left, right, center, [end], $groupAlign
text-justify
Interactive example.
Prefixes: text-justify. Example: text-justify:auto. It emits text-justify:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
auto, none, inter-word, inter-character, ruby, no-compress, [auto], $justify
text-indent
Interactive example.
Prefixes: text-indent. Example: text-indent:px. It emits text-indent:1px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
px, 2, 8, 16, 50%, [2em], [2em_hanging], [2em_each-line], $indent
line-height
Interactive example.
Prefixes: line-height. Example: line-height:1. It emits line-height:1;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (16)
1, normal, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 1.5,
24px, 50%, [1.4], $lineHeight
initial-letter
Interactive example.
Prefixes: initial-letter. Example: initial-letter:normal. It emits initial-letter:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
normal, 1, 2, 3, [2_1], $initialLetter
initial-letter-align
Interactive example.
Prefixes: initial-letter-align. Example: initial-letter-align:alphabetic. It emits initial-letter-align:alphabetic;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
alphabetic, ideographic, hanging, leading, border-box, [border-box_ideographic], $initialLetterAlign
initial-letter-wrap
Interactive example.
Prefixes: initial-letter-wrap. Example: initial-letter-wrap:none. It emits initial-letter-wrap:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
none, first, all, grid, -40%, [0.1em], $initialLetterWrap
text-box-trim
Interactive example.
Prefixes: text-box-trim. Example: text-box-trim:none. It emits text-box-trim:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, trim-start, trim-end, trim-both, [trim-start], $textBoxTrim
text-box-edge
Interactive example.
Prefixes: text-box-edge. Example: text-box-edge:auto. It emits text-box-edge:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, text, ideographic, ideographic-ink, [cap_alphabetic], $textBoxEdge
text-wrap
Interactive example. Rule type: shorthand.
Prefixes: text-wrap. Example: text-wrap:wrap. It emits text-wrap:wrap;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
wrap, nowrap, balance, pretty, stable, [balance], $wrap
text-wrap-mode
Interactive example. Maturity: advanced.
Prefixes: text-wrap-mode. Example: text-wrap-mode:wrap. It emits text-wrap-mode:wrap;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
wrap, nowrap, [nowrap], $wrapMode
text-wrap-style
Interactive example. Maturity: advanced.
Prefixes: text-wrap-style. Example: text-wrap-style:auto. It emits text-wrap-style:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
auto, balance, stable, pretty, avoid-orphans, [pretty], $wrapStyle
white-space
Interactive example. Rule type: shorthand.
Prefixes: white-space. Example: white-space:normal. It emits white-space:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
normal, nowrap, pre, pre-line, pre-wrap, break-spaces, [pre], $whiteSpace
white-space-collapse
Interactive example. Maturity: advanced.
Prefixes: white-space-collapse. Example: white-space-collapse:collapse. It emits white-space-collapse:collapse;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
collapse, discard, preserve, preserve-breaks, preserve-spaces, break-spaces, [preserve], $whiteSpaceCollapse
white-space-trim
Interactive example. Maturity: advanced.
Prefixes: white-space-trim. Example: white-space-trim:none. It emits white-space-trim:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, discard-before, discard-after, discard-inner, [discard-before_discard-after], $whiteSpaceTrim
wrap-before
Interactive example.
Prefixes: wrap-before. Example: wrap-before:auto. It emits wrap-before:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
auto, avoid, avoid-line, avoid-flex, line, flex, [avoid-flex], $wrapBefore
wrap-after
Interactive example.
Prefixes: wrap-after. Example: wrap-after:auto. It emits wrap-after:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
auto, avoid, avoid-line, avoid-flex, line, flex, [avoid-flex], $wrapAfter
wrap-inside
Interactive example.
Prefixes: wrap-inside. Example: wrap-inside:auto. It emits wrap-inside:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, avoid, [avoid], $wrapInside
line-break
Interactive example.
Prefixes: line-break. Example: line-break:auto. It emits line-break:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
auto, loose, normal, strict, anywhere, [strict], $lineBreak
overflow-wrap
Interactive example.
Prefixes: overflow-wrap. Example: overflow-wrap:normal. It emits overflow-wrap:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
normal, break-word, anywhere, [anywhere], $overflowWrap
word-break
Interactive example.
Prefixes: word-break. Example: word-break:normal. It emits word-break:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
normal, break-all, keep-all, auto-phrase, manual, [break-all], $wordBreak
text-color
Interactive example.
Prefixes: text-color. Example: text-color:ink-100. It emits color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (515)
ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950,
ink-000, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900,
gray-950, gray-000, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850,
mauve-900, mauve-950, mauve-000, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800,
slate-850, slate-900, slate-950, slate-000, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700,
sage-800, sage-850, sage-900, sage-950, sage-000, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600,
olive-700, olive-800, olive-850, olive-900, olive-950, olive-000, sand-100, sand-150, sand-200, sand-300, sand-400, sand-500,
sand-600, sand-700, sand-800, sand-850, sand-900, sand-950, sand-000, tomato-100, tomato-150, tomato-200, tomato-300, tomato-400,
tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950, tomato-000, red-100, red-150, red-200, red-300,
red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950, red-000, ruby-100, ruby-150, ruby-200,
ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950, ruby-000, crimson-100, crimson-150,
crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950, crimson-000, pink-100,
pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950, pink-000,
plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950,
plum-000, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900,
purple-950, purple-000, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850,
violet-900, violet-950, violet-000, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800,
iris-850, iris-900, iris-950, iris-000, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700,
indigo-800, indigo-850, indigo-900, indigo-950, indigo-000, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600,
blue-700, blue-800, blue-850, blue-900, blue-950, blue-000, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500,
cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950, cyan-000, teal-100, teal-150, teal-200, teal-300, teal-400,
teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950, teal-000, jade-100, jade-150, jade-200, jade-300,
jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950, jade-000, green-100, green-150, green-200,
green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950, green-000, grass-100, grass-150,
grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950, grass-000, brown-100,
brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950, brown-000,
bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950,
bronze-000, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900,
gold-950, gold-000, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850,
sky-900, sky-950, sky-000, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800,
mint-850, mint-900, mint-950, mint-000, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700,
lime-800, lime-850, lime-900, lime-950, lime-000, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600,
yellow-700, yellow-800, yellow-850, yellow-900, yellow-950, yellow-000, amber-100, amber-150, amber-200, amber-300, amber-400, amber-500,
amber-600, amber-700, amber-800, amber-850, amber-900, amber-950, amber-000, orange-100, orange-150, orange-200, orange-300, orange-400,
orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950, orange-000, primary-100, primary-150, primary-200, primary-300,
primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950, primary-000, neutral-100, neutral-150, neutral-200,
neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950, neutral-000, focused-100, focused-150,
focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950, focused-000, success-100,
success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950, success-000,
warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950,
warning-000, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900,
failure-950, failure-000, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850,
general-900, general-950, general-000, transparent, current, black, white, [#abc], $color, $color|white, red-500/50
text-transform
Interactive example.
Prefixes: text-transform. Example: text-transform:none. It emits text-transform:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
none, uppercase, lowercase, capitalize, full-width, full-size-kana, math-auto, [uppercase_full-width], $transform
text-autospace
Interactive example.
Prefixes: text-autospace. Example: text-autospace:normal. It emits text-autospace:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
normal, auto, no-autospace, ideograph-alpha, ideograph-numeric, punctuation, insert, replace, [ideograph-alpha_ideograph-numeric_replace], $autospace
text-spacing
Interactive example.
Prefixes: text-spacing. Example: text-spacing:none. It emits text-spacing:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (16)
none, auto, normal, space-all, space-first, trim-start, trim-both, trim-all, no-autospace, ideograph-alpha, ideograph-numeric, punctuation,
insert, replace, [trim-both_ideograph-alpha], $spacing
text-spacing-trim
Interactive example.
Prefixes: text-spacing-trim. Example: text-spacing-trim:space-all. It emits text-spacing-trim:space-all;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
space-all, normal, space-first, trim-start, trim-both, trim-all, auto, [trim-start], $spacingTrim
letter-spacing
Interactive example.
Prefixes: letter-spacing. Example: letter-spacing:1x. It emits letter-spacing:var(--letter-spacing-1x);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (20)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, tighter, tight, wide,
wider, normal, 0.1em, 2px, -0.1em, 1, [0.1em], $letterSpacing
word-spacing
Interactive example.
Prefixes: word-spacing. Example: word-spacing:1x. It emits word-spacing:var(--word-spacing-1x);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (17)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, normal, 0.1em, 2px,
-0.05em, 50%, 1, [0.1em], $wordSpacing
word-space-transform
Interactive example.
Prefixes: word-space-transform. Example: word-space-transform:none. It emits word-space-transform:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, space, ideographic-space, auto-phrase, [ideographic-space_auto-phrase], $wordSpaceTransform
tab-size
Interactive example.
Prefixes: tab-size. Example: tab-size:0. It emits tab-size:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, 1, 2, 4, 8, 4px, 2em, [4], $tabSize
hyphens
Interactive example.
Prefixes: hyphens. Example: hyphens:none. It emits hyphens:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, manual, auto, [manual], $hyphens
hyphenate-character
Interactive example.
Prefixes: hyphenate-character. Example: hyphenate-character:auto. It emits hyphenate-character:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
auto, $hy
hyphenate-limit-zone
Interactive example.
Prefixes: hyphenate-limit-zone. Example: hyphenate-limit-zone:0. It emits hyphenate-limit-zone:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
0, 2, 25%, [4em], $zone
hyphenate-limit-chars
Interactive example.
Prefixes: hyphenate-limit-chars. Example: hyphenate-limit-chars:auto. It emits hyphenate-limit-chars:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, 1, 2, 6, [auto_3_4], $chars
hyphenate-limit-lines
Interactive example.
Prefixes: hyphenate-limit-lines. Example: hyphenate-limit-lines:no-limit. It emits hyphenate-limit-lines:no-limit;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
no-limit, 0, 1, 2, $lines
hyphenate-limit-last
Interactive example.
Prefixes: hyphenate-limit-last. Example: hyphenate-limit-last:none. It emits hyphenate-limit-last:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
none, always, column, page, spread, [spread], $last
vertical-align
Interactive example.
Prefixes: vertical-align. Example: vertical-align:baseline. It emits vertical-align:baseline;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
baseline, sub, super, text-top, text-bottom, middle, top, bottom, 10px, -0.2em, 50%, [middle],
$verticalAlign
line-grid
Interactive example. Maturity: experimental. Browser support: CSS Rhythmic Sizing draft feature with limited browser support.
Prefixes: line-grid. Example: line-grid:match-parent. It emits line-grid:match-parent;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
match-parent, create, [create], $grid
line-snap
Interactive example. Maturity: experimental. Browser support: CSS Rhythmic Sizing draft feature with limited browser support.
Prefixes: line-snap. Example: line-snap:none. It emits line-snap:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, baseline, contain, [baseline], $snap
line-fit-edge
Interactive example.
Prefixes: line-fit-edge. Example: line-fit-edge:leading. It emits line-fit-edge:leading;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
leading, text, ideographic, ideographic-ink, [cap_alphabetic], $lineFitEdge
line-padding
Interactive example.
Prefixes: line-padding. Example: line-padding:0. It emits line-padding:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
0, 2, 0.5em, [0.5em], $linePadding
line-height-step
Interactive example.
Prefixes: line-height-step. Example: line-height-step:0. It emits line-height-step:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
0, 6, 24px, [calc(1lh+4px)], $step
box-snap
Interactive example. Maturity: experimental. Browser support: CSS Rhythmic Sizing draft feature with limited browser support.
Prefixes: box-snap. Example: box-snap:none. It emits box-snap:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, block-start, block-end, center, baseline, last-baseline, [baseline], $snap
baseline-source
Interactive example.
Prefixes: baseline-source. Example: baseline-source:auto. It emits baseline-source:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, first, last, [first], $baselineSource
baseline-shift
Interactive example.
Prefixes: baseline-shift. Example: baseline-shift:sub. It emits baseline-shift:sub;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
sub, super, top, center, bottom, 10px, -0.2em, 50%, [10px], $baselineShift
dominant-baseline
Interactive example.
Prefixes: dominant-baseline. Example: dominant-baseline:auto. It emits dominant-baseline:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
auto, text-bottom, alphabetic, ideographic, middle, central, mathematical, hanging, text-top, [central], $dominantBaseline
alignment-baseline
Interactive example.
Prefixes: alignment-baseline. Example: alignment-baseline:baseline. It emits alignment-baseline:baseline;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
baseline, text-bottom, alphabetic, ideographic, middle, central, mathematical, text-top, [text-before-edge], $alignmentBaseline
block-step
Interactive example.
Prefixes: block-step. Example: block-step:[24px_padding-box_start_nearest]. It emits block-step:24px padding-box start nearest;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
[24px_padding-box_start_nearest], $value
block-step-size
Interactive example.
Prefixes: block-step-size. Example: block-step-size:none. It emits block-step-size:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, 0, 6, 24px, [calc(1lh+4px)], $step
block-step-insert
Interactive example.
Prefixes: block-step-insert. Example: block-step-insert:margin-box. It emits block-step-insert:margin-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
margin-box, padding-box, content-box, [padding-box], $insert
block-step-align
Interactive example.
Prefixes: block-step-align. Example: block-step-align:auto. It emits block-step-align:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, center, start, end, [center], $align
block-step-round
Interactive example.
Prefixes: block-step-round. Example: block-step-round:up. It emits block-step-round:up;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
up, down, nearest, [nearest], $round
inline-sizing
Interactive example.
Prefixes: inline-sizing. Example: inline-sizing:normal. It emits inline-sizing:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
normal, stretch, [stretch], $inlineSizing
writing-mode
Interactive example.
Prefixes: writing-mode. Example: writing-mode:horizontal-tb. It emits writing-mode:horizontal-tb;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr, [vertical-rl], $writingMode
direction
Interactive example.
Prefixes: direction. Example: direction:ltr. It emits direction:ltr;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
ltr, rtl, [rtl], $direction
unicode-bidi
Interactive example.
Prefixes: unicode-bidi. Example: unicode-bidi:normal. It emits unicode-bidi:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
normal, embed, isolate, bidi-override, isolate-override, plaintext, [isolate], $bidi
text-orientation
Interactive example.
Prefixes: text-orientation. Example: text-orientation:mixed. It emits text-orientation:mixed;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
mixed, upright, sideways, [upright], $orientation
text-combine-upright
Interactive example.
Prefixes: text-combine-upright. Example: text-combine-upright:none. It emits text-combine-upright:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, all, digits, [digits_2], $combine
ruby-position
Interactive example.
Prefixes: ruby-position. Example: ruby-position:alternate. It emits ruby-position:alternate;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
alternate, over, under, inter-character, [alternate_under], $position
ruby-align
Interactive example.
Prefixes: ruby-align. Example: ruby-align:start. It emits ruby-align:start;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
start, center, space-between, space-around, [center], $align
ruby-merge
Interactive example.
Prefixes: ruby-merge. Example: ruby-merge:separate. It emits ruby-merge:separate;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
separate, merge, auto, [merge], $merge
ruby-overhang
Interactive example.
Prefixes: ruby-overhang. Example: ruby-overhang:auto. It emits ruby-overhang:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, spaces, none, [auto], $overhang