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
140
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
99
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
170
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
110
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
97
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
100

Other Decks in Programming

See All in Programming
AI POSにおけるLLM Observability基盤の導入 ― サイバーエージェントDXインターン成果報告
Avatar for ♛Heitor Hirose hekuchan
0
460
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
Avatar for Márton Braun zsmb
2
490
Eloquentを使ってどこまでコードの治安を保てるのか？を新人が考察してみた
Avatar for ito_kohhh itokoh0405
0
3.1k
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
9.4k
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
Avatar for ANDPAD inc andpad
0
100
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
Avatar for hkws kwahiro
8
3.6k
CSC509 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
5.7k
AI時代に必須！状況言語化スキル / ai-context-verbalization
Avatar for MinoDriven minodriven
3
370
SUZURIの規約違反チェックにおけるクリエイタフィードバックの試⾏錯誤/Trial and Error in Creator Feedback for SUZURI's Terms of Service Violation Checks
Avatar for watasan ae14watanabe
1
140
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
3
5.9k
Researchlyの開発で参考にしたデザイン
Avatar for arakawa adsholoko
0
120

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
310
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
960

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