Initial-letter-breaking-rtl-ref.html (1416B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Tests interaction with fragmentation in RTL.</title> 5 <link rel="author" title="Google LLC" href="https://www.google.com/"> 6 <link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> 7 <meta name="flags" content="ahem"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > 9 <style> 10 .sample { 11 direction: rtl; 12 font-family: Ahem; 13 font-size: 20px; 14 line-height: 24px; 15 width: 230px; 16 } 17 18 .float { 19 background: cyan; 20 clear: none; 21 float: right; 22 height: 50px; 23 width: 50px; 24 } 25 26 .mc { 27 columns: 2; 28 direction: rtl; 29 height: 500px; 30 writing-mode: horizontal-tb; 31 } 32 33 .fake-initial-letter { 34 background: lime; 35 float: right; 36 height: 80px; 37 margin-top: 2px; 38 width: 80px; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="mc"> 44 <div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> 45 <div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC<br clear="both">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> 46 <div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> 47 </div> 48 </body> 49 </html>