style-forge.helpers/src/text.css

Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.

.ff\:sans { font-family: var(--sf-ff-sans) }
.ff\:serif { font-family: var(--sf-ff-serif) }
.ff\:monospace { font-family: var(--sf-ff-monospace) }
.ff\:cursive { font-family: var(--sf-ff-cursive) }
.ff\:fantasy { font-family: var(--sf-ff-fantasy) }
.ff\:emoji { font-family: var(--sf-ff-emoji) }
.ff\:math { font-family: var(--sf-ff-math) }
.ff\:fangsong { font-family: var(--sf-ff-fangsong) }

.fw { font-weight: var(--sf-fw) }
.fw\:i { font-weight: inherit }
.fw\:ii { font-weight: initial }
.fw\:bold { font-weight: var(--sf-fw-bold) }
.fw\:small { font-weight: var(--sf-fw-small) }

.fw\:h1 { font-weight: var(--sf-fw-h1) }
.fw\:h2 { font-weight: var(--sf-fw-h2) }
.fw\:h3 { font-weight: var(--sf-fw-h3) }
.fw\:h4 { font-weight: var(--sf-fw-h4) }
.fw\:h5 { font-weight: var(--sf-fw-h5) }
.fw\:h6 { font-weight: var(--sf-fw-h6) }

.fw\:1 { font-weight: 100 }
.fw\:2 { font-weight: 200 }
.fw\:3 { font-weight: 300 }
.fw\:4 { font-weight: 400 }
.fw\:5 { font-weight: 500 }
.fw\:6 { font-weight: 600 }
.fw\:7 { font-weight: 700 }
.fw\:8 { font-weight: 800 }
.fw\:9 { font-weight: 900 }

.fw\:thin { font-weight: 100 }
.fw\:light { font-weight: 300 }
.fw, .fw\:normal { font-weight: 400 }
.fw\:medium { font-weight: 500 }
.fw\:bold { font-weight: 700 }

.fw\:extra-light,
.fw\:ultra-light
{ font-weight: 200 }

.fw\:semi-bold,
.fw\:demi-bold
{ font-weight: 600 }

.fw\:extra-bold,
.fw\:ultra-bold
{ font-weight: 800 }

.fw\:black,
.fw\:heavy
{ font-weight: 900 }

.fz\:h1 { font-size: var(--sf-fz-h1) }
.fz\:h2 { font-size: var(--sf-fz-h2) }
.fz\:h3 { font-size: var(--sf-fz-h3) }
.fz\:h4 { font-size: var(--sf-fz-h4) }
.fz\:h5 { font-size: var(--sf-fz-h5) }
.fz\:h6 { font-size: var(--sf-fz-h6) }

.fz { font-size: var(--sf-fz) }
.fz\:0 { font-size: var(--sf-fz-0) }
.fz\:i { font-size: inherit }
.fz\:ii { font-size: initial }
.fz\:bold { font-size: var(--sf-fz-bold) }

.fz\:small { font-size: var(--sf-fz-small) }

.fz\:xxxs { font-size: var(--sf-rem-xxxs) }   /* 1px */
.fz\:xxs  { font-size: var(--sf-rem-xxs) }    /* 2px */
.fz\:xxss { font-size: var(--sf-rem-xxss) }   /* 3px */
.fz\:xs   { font-size: var(--sf-rem-xs) }     /* 4px */
.fz\:xss  { font-size: var(--sf-rem-xss) }    /* 5px */
.fz\:xsss { font-size: var(--sf-rem-xsss) }   /* 6px */
.fz\:3xs  { font-size: var(--sf-rem-3xs) }    /* 7px */
.fz\:sm   { font-size: var(--sf-rem-sm) }     /* 8px */
.fz\:smm  { font-size: var(--sf-rem-smm) }    /* 9px */
.fz\:s    { font-size: var(--sf-rem-s) }      /* 10px */
.fz\:ss   { font-size: var(--sf-rem-ss) }     /* 11px */
.fz\:ms   { font-size: var(--sf-rem-ms) }     /* 12px */
.fz\:mss  { font-size: var(--sf-rem-mss) }    /* 13px */
.fz\:ls   { font-size: var(--sf-rem-ls) }     /* 14px */
.fz\:lss  { font-size: var(--sf-rem-lss) }    /* 15px */
.fz\:md   { font-size: var(--sf-rem-md) }     /* 16px */
.fz\:mdd  { font-size: var(--sf-rem-mdd) }    /* 17px */
.fz\:lg   { font-size: var(--sf-rem-lg) }     /* 18px */
.fz\:lgg  { font-size: var(--sf-rem-lgg) }    /* 19px */
.fz\:xl   { font-size: var(--sf-rem-xl) }     /* 20px */
.fz\:2xl  { font-size: var(--sf-rem-2xl) }    /* 24px */
.fz\:3xl  { font-size: var(--sf-rem-3xl) }    /* 32px */
.fz\:4xl  { font-size: var(--sf-rem-4xl) }    /* 40px */
.fz\:5xl  { font-size: var(--sf-rem-5xl) }    /* 48px */
.fz\:6xl  { font-size: var(--sf-rem-6xl) }    /* 56px */
.fz\:7xl  { font-size: var(--sf-rem-7xl) }    /* 64px */
.fz\:8xl  { font-size: var(--sf-rem-8xl) }    /* 72px */
.fz\:9xl  { font-size: var(--sf-rem-9xl) }    /* 80px */
.fz\:10xl { font-size: var(--sf-rem-10xl) }   /* 88px */
.fz\:11xl { font-size: var(--sf-rem-11xl) }   /* 96px */
.fz\:12xl { font-size: var(--sf-rem-12xl) }   /* 104px */

.ta\:i, .\$ta\:i > * { text-align: inherit }
.ta\:ii, .\$ta\:ii > * { text-align: inherit }
.ta\:l, .\$ta\:l > * { text-align: start }
.ta\:c, .\$ta\:c > * { text-align: center }
.ta\:r, .\$ta\:r > * { text-align: end }
.ta\:j, .\$ta\:j > * { text-align: justify }

.whs, .\$whs > * { white-space: normal }
.whs\:i, .\$whs\:i > * { white-space: inherit }
.whs\:ii, .\$whs\:ii > * { white-space: initial }
.whs\:nowrap, .\$whs\:nowrap > * { white-space: nowrap }
.whs\:p, .\$whs\:p > * { white-space: pre }
.whs\:pl, .\$whs\:pl > * { white-space: pre-line }
.whs\:pw, .\$whs\:pw > * { white-space: pre-wrap }

.lh, .\$lh > * { line-height: var(--sf-lh-normal) }
.lh\:base, .\$lh\:base > * { line-height: var(--sf-lh) }
.lh\:i, .\$lh\:i > * { line-height: inherit }
.lh\:ii, .\$lh\:ii > * { line-height: initial }
.lh\:n, .\$lh\:n > * { line-height: normal }
.lh\:1, .\$lh\:1 > * { line-height: 1 }
.lh\:0, .\$lh\:0 > * { line-height: 0 }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align */
.va\:i, .\$va\:i > * { vertical-align: inherit }
.va\:ii, .\$va\:ii > * { vertical-align: initial }
.va\:bl, .\$va\:bl > * { vertical-align: baseline }
.va\:a, .\$va\:a > * { vertical-align: auto }
.va\:m, .\$va\:m > * { vertical-align: middle }
.va\:t, .\$va\:t > * { vertical-align: top }
.va\:b, .\$va\:b > * { vertical-align: bottom }
.va\:tt, .\$va\:tt > * { vertical-align: text-top }
.va\:tb, .\$va\:tb > * { vertical-align: text-bottom }
.va\:sub, .\$va\:sub > * { vertical-align: sub }
.va\:sup, .\$va\:sup > * { vertical-align: super }

.rtl { direction: rtl }
.ltr { direction: ltr }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode */
.wm\:lr { writing-mode: lr }
.wm\:rl { writing-mode: rl }
.wm\:tb { writing-mode: tb }

.wm\:btl { writing-mode: bt-lr }
.wm\:btr { writing-mode: bt-rl }
.wm\:lrb { writing-mode: lr-bt }
.wm\:lrt { writing-mode: lr-tb }
.wm\:rlb { writing-mode: rl-bt }
.wm\:rlt { writing-mode: rl-tb }
.wm\:tbl { writing-mode: tb-lr }
.wm\:tbr { writing-mode: tb-rl }

.wm\:i { writing-mode: inherit }
.wm\:ii { writing-mode: initial }

.wm\:horizontal-tb { writing-mode: horizontal-tb }
.wm\:sideways-lr { writing-mode: sideways-lr }
.wm\:sideways-rl { writing-mode: sideways-rl }
.wm\:vertical-lr { writing-mode: vertical-lr }
.wm\:vertical-rl { writing-mode: vertical-rl }

.tt\:i { text-transform: inherit }
.tt\:ii { text-transform: initial }
.tt\:n { text-transform: none }
.tt\:ca { text-transform: capitalize }
.tt\:fsk { text-transform: full-size-kana }
.tt\:fw { text-transform: full-width }
.tt\:ma { text-transform: math-auto }
.tt\:lo { text-transform: lowercase }
.tt\:up { text-transform: uppercase }

/* /// */

html.var .ff\:sans { font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' }
html.var .ff\:serif { font-family: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' }
html.var .ff\:monospace { font-family: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' }
html.var .ff\:cursive { font-family: cursive }
html.var .ff\:fantasy { font-family: fantasy }
html.var .ff\:emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji }
html.var .ff\:math { font-family: math }
html.var .ff\:fangsong { font-family: fangsong }

html.var .fw { font-weight: 400 }
html.var .fw\:i { font-weight: inherit }
html.var .fw\:ii { font-weight: initial }
html.var .fw\:bold { font-weight: 600 }
html.var .fw\:small { font-weight: 300 }

html.var .fw\:h1 { font-weight: 700 }
html.var .fw\:h2 { font-weight: 700 }
html.var .fw\:h3 { font-weight: 700 }
html.var .fw\:h4 { font-weight: 600 }
html.var .fw\:h5 { font-weight: 600 }
html.var .fw\:h6 { font-weight: 600 }

html.var .fz\:h1 { font-size: 48px }
html.var .fz\:h2 { font-size: 40px }
html.var .fz\:h3 { font-size: 32px }
html.var .fz\:h4 { font-size: 24px }
html.var .fz\:h5 { font-size: 20px }
html.var .fz\:h6 { font-size: 16px }

html.var .fz { font-size: 16px }
html.var .fz\:0 { font-size: 0 }
html.var .fz\:i { font-size: inherit }
html.var .fz\:ii { font-size: initial }
html.var .fz\:bold { font-size: 16px }

html.var .fz\:small { font-size: 12px }

html.var .fz\:xxxs { font-size: 1px }
html.var .fz\:xxs  { font-size: 2px }
html.var .fz\:xxss { font-size: 3px }
html.var .fz\:xs   { font-size: 4px }
html.var .fz\:xss  { font-size: 5px }
html.var .fz\:xsss { font-size: 6px }
html.var .fz\:3xs  { font-size: 7px }
html.var .fz\:sm   { font-size: 8px }
html.var .fz\:smm  { font-size: 9px }
html.var .fz\:s    { font-size: 10px }
html.var .fz\:ss   { font-size: 11px }
html.var .fz\:ms   { font-size: 12px }
html.var .fz\:mss  { font-size: 13px }
html.var .fz\:ls   { font-size: 14px }
html.var .fz\:lss  { font-size: 15px }
html.var .fz\:md   { font-size: 16px }
html.var .fz\:mdd  { font-size: 17px }
html.var .fz\:lg   { font-size: 18px }
html.var .fz\:lgg  { font-size: 19px }
html.var .fz\:xl   { font-size: 20px }
html.var .fz\:2xl  { font-size: 24px }
html.var .fz\:3xl  { font-size: 32px }
html.var .fz\:4xl  { font-size: 40px }
html.var .fz\:5xl  { font-size: 48px }
html.var .fz\:6xl  { font-size: 56px }
html.var .fz\:7xl  { font-size: 64px }
html.var .fz\:8xl  { font-size: 72px }
html.var .fz\:9xl  { font-size: 80px }
html.var .fz\:10xl { font-size: 88px }
html.var .fz\:11xl { font-size: 96px }
html.var .fz\:12xl { font-size: 104px }

html.var .lh, html.var .\$lh > * { line-height: 1.1875 }
html.var .lh\:base, html.var .\$lh\:base > * { line-height: 0.8 }
html.var .lh\:i, html.var .\$lh\:i > * { line-height: inherit }
html.var .lh\:ii, html.var .\$lh\:ii > * { line-height: initial }
html.var .lh\:n, html.var .\$lh\:n > * { line-height: normal }
html.var .lh\:1, html.var .\$lh\:1 > * { line-height: 1 }
html.var .lh\:0, html.var .\$lh\:0 > * { line-height: 0 }

html.ta .ta\:i, html.ta .\$ta\:i > * { text-align: inherit }
html.ta .ta\:ii, html.ta .\$ta\:ii > * { text-align: initial }
html.ta .ta\:l, html.ta .\$ta\:l > * { text-align: left }
html.ta .ta\:c, html.ta .\$ta\:c > * { text-align: center }
html.ta .ta\:r, html.ta .\$ta\:r > * { text-align: right }
html.ta .ta\:j, html.ta .\$ta\:j > * { text-align: justify }

html.flex .va\:bl, html.flex .\$va\:bl > * { vertical-align: baseline }
html.flex .va\:a, html.flex .\$va\:a > * { vertical-align: auto }
html.flex .va\:m, html.flex .\$va\:m > * { vertical-align: middle }
html.flex .va\:t, html.flex .\$va\:t > * { vertical-align: top }
html.flex .va\:b, html.flex .\$va\:b > * { vertical-align: bottom }
html.flex .va\:tt, html.flex .\$va\:tt > * { vertical-align: text-top }
html.flex .va\:tb, html.flex .\$va\:tb > * { vertical-align: text-bottom }
html.flex .va\:sub, html.flex .\$va\:sub > * { vertical-align: sub }
html.flex .va\:sup, html.flex .\$va\:sup > * { vertical-align: super }