writing-mode.html (1951B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>writing-mode</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 ::-moz-selection { 15 background-color: white; 16 color: black; 17 } 18 .wm-vertical-lr { 19 writing-mode: vertical-lr; 20 display: inline-block; 21 } 22 .wm-vertical-rl { 23 writing-mode: vertical-rl; 24 } 25 .wm-sideways-lr { 26 writing-mode: sideways-lr; 27 } 28 .wm-sideways-rl { 29 writing-mode: sideways-rl; 30 } 31 </style> 32 <script type="text/javascript" charset="utf-8"> 33 function select() { 34 window.getSelection().removeAllRanges(); 35 var elems = document.getElementsByTagName('p'); 36 for (var i = 0; i < elems.length; ++i) { 37 var range = document.createRange(); 38 range.setStart(elems[i].firstChild, 2); 39 range.setEnd(elems[i].firstChild, 9); 40 window.getSelection().addRange(range); 41 } 42 } 43 </script> 44 </head> 45 <body onload="select()"> 46 <p lang="zh" dir="ltr" class="wm-vertical-lr line-through">你好世界！Hello World!</p> 47 <p lang="zh" dir="ltr" class="wm-vertical-rl line-through">你好世界！Hello World!</p> 48 <p lang="zh" dir="ltr" class="wm-sideways-lr line-through">你好世界！Hello World!</p> 49 <p lang="zh" dir="ltr" class="wm-sideways-rl line-through">你好世界！Hello World!</p> 50 <br/> 51 <p lang="zh" dir="rtl" class="wm-vertical-lr line-through">你好世界！Hello World!</p> 52 <p lang="zh" dir="rtl" class="wm-vertical-rl line-through">你好世界！Hello World!</p> 53 <p lang="zh" dir="rtl" class="wm-sideways-lr line-through">你好世界！Hello World!</p> 54 <p lang="zh" dir="rtl" class="wm-sideways-rl line-through">你好世界！Hello World!</p> 55 </body> 56 </html>