first-line-bidi-002.html (3818B)
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-002-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 <!-- Same as first-line-bidi-001 but with dir=rtl on each <p> element --> 24 <table> 25 <tr><th><code>text-align:left</code></th><th><code>text-align:center</code></th><th><code>text-align:right</code></th></tr> 26 <tr> 27 <!-- no padding/indent --> 28 <td> 29 <p dir=rtl><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 30 </td> 31 <td> 32 <p dir=rtl><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 33 </td> 34 <td> 35 <p dir=rtl><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 36 </td> 37 </tr> 38 39 <tr> 40 <!-- padding-left:1em --> 41 <td> 42 <p dir=rtl style="padding-left:1em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 43 </td> 44 <td> 45 <p dir=rtl style="padding-left:1em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 46 </td> 47 <td> 48 <p dir=rtl style="padding-left:1em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 49 </td> 50 </tr> 51 52 <tr> 53 <!-- padding-right:1em --> 54 <td> 55 <p dir=rtl style="padding-right:1em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 56 </td> 57 <td> 58 <p dir=rtl style="padding-right:1em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 59 </td> 60 <td> 61 <p dir=rtl style="padding-right:1em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 62 </td> 63 </tr> 64 65 <tr> 66 <!-- text-indent:2em --> 67 <td> 68 <p dir=rtl style="text-indent:2em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 69 </td> 70 <td> 71 <p dir=rtl style="text-indent:2em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 72 </td> 73 <td> 74 <p dir=rtl style="text-indent:2em"><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 75 </td> 76 </tr> 77 78 <tr> 79 <!-- initial with float:left --> 80 <td> 81 <p dir=rtl><xl>A</xl><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 82 </td> 83 <td> 84 <p dir=rtl><xl>A</xl><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 85 </td> 86 <td> 87 <p dir=rtl><xl>A</xl><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 88 </td> 89 </tr> 90 91 <tr> 92 <!-- initial with float:right --> 93 <td> 94 <p dir=rtl><xr>Z</xr><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 95 </td> 96 <td> 97 <p dir=rtl><xr>Z</xr><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 98 </td> 99 <td> 100 <p dir=rtl><xr>Z</xr><span dir=rtl>الخت العربي</span> one ايك two<br> دو three تين four</p> 101 </td> 102 </tr> 103 </table>