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