1156021-text-indent-percent.html (1052B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 body { 7 font-size: 10px; 8 } 9 div { 10 width: 100px; 11 height: 200px; 12 margin: 5px; 13 border: 1px solid silver; 14 display: inline-block; 15 vertical-align: top; 16 } 17 .vlr { 18 writing-mode: vertical-lr; 19 } 20 .vrl { 21 writing-mode: vertical-rl; 22 } 23 p { 24 inline-size: 100%; 25 text-indent: 20%; 26 margin: 0; 27 } 28 span { 29 display: inline-block; 30 width: 20px; 31 height: 20px; 32 background: green; 33 } 34 </style> 35 </head> 36 <body> 37 <div> <p><span></span></p> </div> 38 <div dir="rtl"> <p><span></span></p> </div> 39 <div class="vlr"> <p><span></span></p> </div> 40 <div class="vlr" dir="rtl"> <p><span></span></p> </div> 41 <div class="vrl"> <p><span></span></p> </div> 42 <div class="vrl" dir="rtl"> <p><span></span></p> </div> 43 <br> 44 <div> <p><span></span></p> </div> 45 <div> <p dir="rtl"><span></span></p> </div> 46 <div> <p class="vlr"><span></span></p> </div> 47 <div> <p class="vlr" dir="rtl"><span></span></p> </div> 48 <div> <p class="vrl"><span></span></p> </div> 49 <div> <p class="vrl" dir="rtl"><span></span></p> </div> 50 </body> 51 </html>