$30 off During Our Annual Pro Sale. View Details »

TIL about text-orientation

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
150
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
100
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
180
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
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
100
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
170
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110

Other Decks in Programming

See All in Programming
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
2
220
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
120
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.2k
20251127_ぼっちのための懇親会対策会議
Avatar for kokamoto01 kokamoto01_metaps
2
440
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
250
20 years of Symfony, what's next?

Avatar for Fabien Potencier fabpot
2
360
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
720
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
Avatar for kazuhiro hara karad
0
120
dotfiles 式年遷宮 令和最新版
Avatar for masawada masawada
1
780
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
270
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
Avatar for Tomofumi Kondo tomokon
0
130
chocoZAPサービス予約システムをNuxtで内製化した話
Avatar for RIZAPテクノロジーズ rizap_tech
0
160

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k

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