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

TIL about text-orientation

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
6.1k
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
270
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
280
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
160
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
530
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
310
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
650
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
5.9k
[AI Engineering Summit Tokyo 2025] LLMは計画業務のゲームチェンジャーか？ 最適化業務における活⽤の可能性と限界
Avatar for terry-u16 terryu16
2
610
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
220
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.2k
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
860
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
720
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
390
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k

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