text-shadow-sideways-001-ref.html (832B)
1 <!DOCTYPE html> 2 <title>Reference for Sideways Inline Layout: Text Decoration</title> 3 <meta charset=utf-8> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 5 <style> 6 body > div { 7 /* styling */ 8 border: solid gray; 9 font: 30px/1 Ahem; 10 color: silver; 11 float: left; 12 margin: 8px; 13 14 /* test */ 15 text-decoration: underline; 16 text-decoration-color: orange; 17 text-decoration-thickness: 14px; 18 19 /* reference hacking */ 20 width: 1em; 21 height: 5em; 22 white-space: nowrap; 23 } 24 div > div { 25 /* compensate for WebKit propagation bug */ 26 text-decoration-thickness: 4px; 27 } 28 .lr > div { 29 text-shadow: -4px 2px aqua; 30 transform: rotate(-90deg) translateX(-4em); 31 } 32 .rl > div { 33 text-shadow: 4px -2px aqua; 34 transform: rotate(90deg); 35 } 36 </style> 37 38 <div class=lr><div>Ap Éx</div></div> 39 40 <div class=rl><div>Ap Éx</div></div>