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

TIL about text-orientation

Avatar for Gunnar Bittersmann Gunnar Bittersmann
January 06, 2020
Programming
0
230

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
130
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
92
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
TIL that the future :has already begun
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
99
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
95
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
98

Other Decks in Programming

See All in Programming
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
18
8.9k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
Avatar for azukiazusa azukiazusa1
24
12k
テストコードはもう書かない：JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
Avatar for makun makun
0
320
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
150
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
Avatar for cc4966 cc4966
2
230
The Past, Present, and Future of Enterprise Java with ASF in the Middle
Avatar for ivargrimstad ivargrimstad
0
120
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
Avatar for nokomoro3 nokomoro3
0
180
アルテニア コンサル／ＩＴエンジニア向け 採用ピッチ資料
Avatar for ALTENIR altenir
0
110
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
700
為你自己學 Python - 冷知識篇
Avatar for 高見龍 eddie
1
350
速いWebフレームワークを作る
Avatar for Yusuke Wada yusukebe
5
1.7k

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
72
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
13k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k

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