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
260
0

TIL about text-orientation

Lightning talk on vertical text

Avatar for Gunnar Bittersmann

Gunnar Bittersmann

January 06, 2020

More Decks by Gunnar Bittersmann

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

Other Decks in Programming

See All in Programming
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
540
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
250
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
350
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
130
Building a Meta Ray-Ban display app
Avatar for Akio Itaya akkeylab
0
170
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
1
210
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.7k
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
110
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
290
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
5
490
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
660

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
170
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
490
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Design in an AI World
Avatar for tapps tapps
1
280
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
370
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k

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