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

TIL about text-orientation

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Gunnar Bittersmann Gunnar Bittersmann
January 06, 2020
Programming
250
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
170
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
200
TIL that the future :has already begun
Avatar for Gunnar Bittersmann gunnarbittersmann
0
130
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
140
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
140
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
200
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120

Other Decks in Programming

See All in Programming
Contextとはなにか
Avatar for chiroruxx chiroruxx
0
280
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
700
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.6k
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
520
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
490
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
21
7k
Vite+ Unified Toolchain for the Web
Avatar for Naoki Haba naokihaba
0
240
A2UI という光を覗いてみる
Avatar for SatohJohn satohjohn
1
130
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
660
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
Avatar for suikabar suikabar
2
530
dRuby over BLE
Avatar for makicamel makicamel
2
330
メソッドのジェネリクスでGoの夢は広がるか？ / Kyoto.go #65
Avatar for utagawa kiki utgwkk
3
670

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
170
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
140
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360

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