A presentation at Tech Talk @ Tagesspiegel in March 2024 in by Gunnar Bittersmann
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”> ⋮ 語言
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
