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