TIL how to drop caps (this time for real), part 2: manga style

Zeichnung: Anna Bittersmann

Joy

Joy text-box-edge: alphabetic; text-box-trim: both;

Áthas text-box-edge: cap; text-box-trim: both;

alegría text-box-edge: ex; text-box-trim: both;

радость text-box-edge: ex; text-box-trim: both;

Freude text-box-edge: cap alphabetic; text-box-trim: both;

CSS IS AWESOME

Freude

CSS IS AWESOME

言語 Sprache

言語 <html lang=”ja”> ⋮ 言語

<html lang=”zh-Hans”> ⋮ &#x8A9E;&#x8A00;

Frieden

writing-mode: vertical-rl

footer { writing-mode: vertical-rl; transform: rotate(0.5turn); text-orientation: sideways; } © YOURS TRULY

footer { writing-mode: vertical-rl; rotate: 0.5turn; text-orientation: sideways; } © YOURS TRULY

footer { writing-mode: vertical-rl; scale: -1; text-orientation: sideways; } © YOURS TRULY

➡ inline direction padding-block-start ‫ أقوى‬,‫ أعلى‬,‫أسرع‬ padding-block-end padding -inline -end padding -inline -start ➡ block direction padding-block-end padding -inline -start direction: rtl citius, altius, fortius padding -inline -end direction: ltr padding-block-start

padding-block-end padding-inline-end 「より速く、より高 く、より強く」 padding-inline-start く ︑ よ り 強 く ﹂ ﹁ よ り 速 く ︑ よ り 高 padding-block-start padding-block-start writing-mode: vertical-rl padding-block-end padding-inline-start writing-mode: horizontal-tb padding-inline-end ➡ inline direction ➡ block direction

writing-mode: vertical-lr

physical properties logical properties padding-left padding-right padding-top padding-bottom padding-inline-start padding-inline-end padding-block-start padding-block-end padding padding-inline padding-block margin-… margin-… border-… border-…

physical properties logical properties left right top bottom inset-inline-start inset-inline-end inset-block-start inset-block-end inset inset-inline inset-block width height inline-size block-size

CSS IS AWESOME