TIL about text-orientation

Lightning talk on vertical text

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