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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Text Test: line-break - strict and centered punctuation marks</title>
<!-- centered punctuation marks -->
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
<link rel="help" title="5.2. Breaking Rules for Punctuation: the 'line-break' property" href="http://www.w3.org/TR/css-text-3/#line-break" />
<link rel="match" href="reference/line-break-strict-016-ref.xht" />
<meta http-equiv="content-language" content="en, ja" />
<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks such as COLON (U+003A) and SEMICOLON (U+003B)." />
<style type="text/css">
@font-face
{
font-family: "mplus-1p-regular";
src: url("support/mplus-1p-regular.woff") format("woff");
/* filesize: 803300 bytes (784.5 KBytes) */
/*
mplus-1p-regular.ttf can be downloaded at/from [TBD later]
*/
}
.test span {
line-break: strict; // The property to be tested
}
p.test, p.control {
border: 1px solid gray;
color: blue;
font-family: "mplus-1p-regular";
width: 10em;
}
span.target {
background-color: aqua;
}
</style>
</head>
<body lang="en">
<p>
Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
</p>
<!-- centered punctuation marks COLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">:</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">:</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks SEMICOLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">;</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">;</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">・</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">・</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks FULLWIDTH COLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">：</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">：</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">；</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">；</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">･</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">･</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">!</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">!</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">?</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">?</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">‼</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">‼</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks DOUBLE QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">⁇</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">⁇</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">⁈</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">⁈</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">⁉</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">⁉</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">！</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">！</span>サンプル文</span>
</p>
<hr />
<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">？</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br />文<span class="target">？</span>サンプル文</span>
</p>
</body>
</html>
|
