Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL about text-orientation

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Gunnar Bittersmann Gunnar Bittersmann
January 06, 2020
Programming
0
240

TIL about text-orientation

Lightning talk on vertical text

Avatar for Gunnar Bittersmann

Gunnar Bittersmann

January 06, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
Responsive typography 2
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
190
TIL that the future :has already begun
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
130
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
100
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
180
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110

Other Decks in Programming

See All in Programming
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
380
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
450
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
400
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
170
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
AI & Enginnering
Avatar for codelynx codelynx
0
110
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
190
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
690

Featured

See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
77
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
110
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k

Transcript

  1. TIL about text disorientation

  2. YOURS TRULY

  3. YOURS REALLY TRULY

  4. YOURS REALLY REALLY T

  5. YOURS REALLY REALLY TRULY

  6. 国际化活动W3C万维 ⽹联盟 writing-mode: horizontal-tb

  7. 国 际 化 活 动 W3C 万 维 ⽹ 联

    盟 writing-mode: vertical-rl

  8. YOURS REALLY REALLY TRULY footer { writing-mode: vertical-rl; }

  9. footer { writing-mode: vertical-rl; transform: rotate(0.5turn); } YOURS REALLY REALLY

    TRULY

  10. © YOURS TRULY

  11. © footer { writing-mode: vertical-rl; transform: rotate(0.5turn); } YOURS TRULY

  12. 国 际 化 活 动 W3C 万 维 ⽹ 联

    盟 writing-mode: vertical-rl 国 W © Lo – Letter, other Lu – Letter, uppercase So – Symbol, other

  13. © footer { writing-mode: vertical-rl; transform: rotate(0.5turn); } YOURS TRULY

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

    YOURS TRULY

  15. - TIL about text orientation