Pro Yearly is on sale from $80 to $50! »

TIL about text-orientation

TIL about text-orientation

Lightning talk on vertical text

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

January 06, 2020
Tweet

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