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

TIL about text-orientation

TIL about text-orientation

Lightning talk on vertical text

Gunnar Bittersmann

January 06, 2020
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript


  1. TIL
    about text disorientation

    View Slide

  2. YOURS TRULY

    View Slide

  3. YOURS REALLY TRULY

    View Slide

  4. YOURS REALLY REALLY T

    View Slide

  5. YOURS REALLY REALLY
    TRULY

    View Slide

  6. 国际化活动W3C万维
    ⽹联盟
    writing-mode: horizontal-tb

    View Slide






  7. W3C





    writing-mode: vertical-rl

    View Slide

  8. YOURS REALLY REALLY
    TRULY
    footer {
    writing-mode: vertical-rl;
    }

    View Slide

  9. footer {
    writing-mode: vertical-rl;
    transform: rotate(0.5turn);
    }
    YOURS REALLY REALLY
    TRULY

    View Slide

  10. © YOURS TRULY

    View Slide

  11. ©
    footer {
    writing-mode: vertical-rl;
    transform: rotate(0.5turn);
    }
    YOURS TRULY





    View Slide






  12. W3C





    writing-mode: vertical-rl

    W
    ©
    Lo – Letter, other
    Lu – Letter, uppercase
    So – Symbol, other

    View Slide

  13. ©
    footer {
    writing-mode: vertical-rl;
    transform: rotate(0.5turn);
    }
    YOURS TRULY

    View Slide

  14. ©
    footer {
    writing-mode: vertical-rl;
    transform: rotate(0.5turn);
    text-orientation: sideways;
    }
    YOURS TRULY

    View Slide

  15. -
    TIL
    about text orientation

    View Slide