A presentation at Tech Talk @ Tagesspiegel 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
Mehr über typografische Linien, vertikale Textausrichtung und Initialen mit CSS:
margin-inline-end
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Tech Talk 2024-03-15: Typografische Linien, vertikale Textausrichtung und Initialen mit CSS
Tech Talk 2021-05-28: Lightning Talk über Matrjoschkas und Anführungszeichen in verschiedenen Sprachen
Tech Talk 2023-06-01: Logical vs. physical properties, values and units in CSS
Tech Talk 2020-01-06: Lightning talk on vertical text
A lightning talk about nested languages and correct quotation marks. Front-Trends 2016 in Warsaw
Performed at Front-Trends 2015 in Warsaw
