writing-mode-ref.html (1361B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>writing-mode-ref</title> 6 <style> 7 p { 8 display: inline-block; 9 margin: 10px; 10 } 11 .line-through { 12 text-decoration: line-through wavy rgba(0, 0, 0, 0.3); 13 } 14 .wm-vertical-lr { 15 writing-mode: vertical-lr; 16 } 17 .wm-vertical-rl { 18 writing-mode: vertical-rl; 19 } 20 .wm-sideways-lr { 21 writing-mode: sideways-lr; 22 } 23 .wm-sideways-rl { 24 writing-mode: sideways-rl; 25 } 26 </style> 27 </head> 28 <body> 29 <p lang="zh" dir="ltr" class="wm-vertical-lr line-through">你好世界！Hello World!</p> 30 <p lang="zh" dir="ltr" class="wm-vertical-rl line-through">你好世界！Hello World!</p> 31 <p lang="zh" dir="ltr" class="wm-sideways-lr line-through">你好世界！Hello World!</p> 32 <p lang="zh" dir="ltr" class="wm-sideways-rl line-through">你好世界！Hello World!</p> 33 <br/> 34 <p lang="zh" dir="rtl" class="wm-vertical-lr line-through">你好世界！Hello World!</p> 35 <p lang="zh" dir="rtl" class="wm-vertical-rl line-through">你好世界！Hello World!</p> 36 <p lang="zh" dir="rtl" class="wm-sideways-lr line-through">你好世界！Hello World!</p> 37 <p lang="zh" dir="rtl" class="wm-sideways-rl line-through">你好世界！Hello World!</p> 38 </body> 39 </html>