first-line-bidi-001-ref.html (3841B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Reference for ::first-line selector with bidi content</title> 4 <style> 5 body { font: 12px arial, sans-serif; } 6 table { font-size: 10px; } 7 tr td { margin: 1em 1em; border: 1px solid gray; width: 16em; } 8 td:nth-child(1) { text-align: left; } 9 td:nth-child(2) { text-align: center; } 10 td:nth-child(3) { text-align: right; } 11 span.first { color: green; background: pink; } 12 th { padding: 1em; } 13 td { padding: 2px; } 14 td p { margin: 0; } 15 xl { float: left; font-size: 2.5em; } 16 xr { float: right; font-size: 2.5em; } 17 </style> 18 <p>In each box, the first-line text should be <span style="color:green; background:pink">green on pink</span> 19 and should never project outside the box:</p> 20 <table> 21 <tr><th><code>text-align:left</code></th><th><code>text-align:center</code></th><th><code>text-align:right</code></th></tr> 22 <tr> 23 <!-- no padding/indent --> 24 <td> 25 <p><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 26 </td> 27 <td> 28 <p><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 29 </td> 30 <td> 31 <p><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 32 </td> 33 </tr> 34 35 <tr> 36 <!-- padding-left:1em --> 37 <td> 38 <p style="padding-left:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 39 </td> 40 <td> 41 <p style="padding-left:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 42 </td> 43 <td> 44 <p style="padding-left:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 45 </td> 46 </tr> 47 48 <tr> 49 <!-- padding-right:1em --> 50 <td> 51 <p style="padding-right:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 52 </td> 53 <td> 54 <p style="padding-right:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 55 </td> 56 <td> 57 <p style="padding-right:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 58 </td> 59 </tr> 60 61 <tr> 62 <!-- text-indent:2em --> 63 <td> 64 <p style="text-indent:2em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 65 </td> 66 <td> 67 <p style="text-indent:2em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 68 </td> 69 <td> 70 <p style="text-indent:2em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 71 </td> 72 </tr> 73 74 <tr> 75 <!-- initial with float:left --> 76 <td> 77 <p><xl>A</xl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 78 </td> 79 <td> 80 <p><xl>A</xl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 81 </td> 82 <td> 83 <p><xl>A</xl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 84 </td> 85 </tr> 86 87 <tr> 88 <!-- initial with float:right --> 89 <td> 90 <p><xr>Z</xr><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 91 </td> 92 <td> 93 <p><xr>Z</xr><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 94 </td> 95 <td> 96 <p><xr>Z</xr><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p> 97 </td> 98 </tr> 99 </table>