1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Text Test: line-break - strict and centered punctuation marks</title>
5 <!-- centered punctuation marks -->
6 <link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com">
7 <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">
8 <link rel="match" href="reference/line-break-strict-016-ref.htm">
9 <meta http-equiv="content-language" content="en, ja">
10 <meta name="flags" content="font">
11 <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).">
12 <style type="text/css">
13 @font-face
14 {
15 font-family: "mplus-1p-regular";
16 src: url("support/mplus-1p-regular.woff") format("woff");
17 /* filesize: 803300 bytes (784.5 KBytes) */
18 /*
19 mplus-1p-regular.ttf can be downloaded at/from [TBD later]
20 */
21 }
22 .test span {
23 line-break: strict; // The property to be tested
24 }
25 p.test, p.control {
26 border: 1px solid gray;
27 color: blue;
28 font-family: "mplus-1p-regular";
29 width: 10em;
30 }
31 span.target {
32 background-color: aqua;
33 }
34 </style>
35 </head>
36 <body lang="en">
37 <p>
38 Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
39 </p>
40 <!-- centered punctuation marks COLON -->
41 <p class="test" lang="ja">
42 <span>サンプル文サンプル文<span class="target">:</span>サンプル文</span>
43 </p>
44 <p class="control" lang="ja">
45 <span>サンプル文サンプル<br>文<span class="target">:</span>サンプル文</span>
46 </p>
47 <hr>
48 <!-- centered punctuation marks SEMICOLON -->
49 <p class="test" lang="ja">
50 <span>サンプル文サンプル文<span class="target">;</span>サンプル文</span>
51 </p>
52 <p class="control" lang="ja">
53 <span>サンプル文サンプル<br>文<span class="target">;</span>サンプル文</span>
54 </p>
55 <hr>
56 <!-- centered punctuation marks KATAKANA MIDDLE DOT -->
57 <p class="test" lang="ja">
58 <span>サンプル文サンプル文<span class="target">・</span>サンプル文</span>
59 </p>
60 <p class="control" lang="ja">
61 <span>サンプル文サンプル<br>文<span class="target">・</span>サンプル文</span>
62 </p>
63 <hr>
64 <!-- centered punctuation marks FULLWIDTH COLON -->
65 <p class="test" lang="ja">
66 <span>サンプル文サンプル文<span class="target">：</span>サンプル文</span>
67 </p>
68 <p class="control" lang="ja">
69 <span>サンプル文サンプル<br>文<span class="target">：</span>サンプル文</span>
70 </p>
71 <hr>
72 <!-- centered punctuation marks FULLWIDTH SEMICOLON -->
73 <p class="test" lang="ja">
74 <span>サンプル文サンプル文<span class="target">；</span>サンプル文</span>
75 </p>
76 <p class="control" lang="ja">
77 <span>サンプル文サンプル<br>文<span class="target">；</span>サンプル文</span>
78 </p>
79 <hr>
80 <!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
81 <p class="test" lang="ja">
82 <span>サンプル文サンプル文<span class="target">･</span>サンプル文</span>
83 </p>
84 <p class="control" lang="ja">
85 <span>サンプル文サンプル<br>文<span class="target">･</span>サンプル文</span>
86 </p>
87 <hr>
88 <!-- centered punctuation marks EXCLAMATION MARK -->
89 <p class="test" lang="ja">
90 <span>サンプル文サンプル文<span class="target">!</span>サンプル文</span>
91 </p>
92 <p class="control" lang="ja">
93 <span>サンプル文サンプル<br>文<span class="target">!</span>サンプル文</span>
94 </p>
95 <hr>
96 <!-- centered punctuation marks QUESTION MARK -->
97 <p class="test" lang="ja">
98 <span>サンプル文サンプル文<span class="target">?</span>サンプル文</span>
99 </p>
100 <p class="control" lang="ja">
101 <span>サンプル文サンプル<br>文<span class="target">?</span>サンプル文</span>
102 </p>
103 <hr>
104 <!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
105 <p class="test" lang="ja">
106 <span>サンプル文サンプル文<span class="target">‼</span>サンプル文</span>
107 </p>
108 <p class="control" lang="ja">
109 <span>サンプル文サンプル<br>文<span class="target">‼</span>サンプル文</span>
110 </p>
111 <hr>
112 <!-- centered punctuation marks DOUBLE QUESTION MARK -->
113 <p class="test" lang="ja">
114 <span>サンプル文サンプル文<span class="target">⁇</span>サンプル文</span>
115 </p>
116 <p class="control" lang="ja">
117 <span>サンプル文サンプル<br>文<span class="target">⁇</span>サンプル文</span>
118 </p>
119 <hr>
120 <!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
121 <p class="test" lang="ja">
122 <span>サンプル文サンプル文<span class="target">⁈</span>サンプル文</span>
123 </p>
124 <p class="control" lang="ja">
125 <span>サンプル文サンプル<br>文<span class="target">⁈</span>サンプル文</span>
126 </p>
127 <hr>
128 <!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
129 <p class="test" lang="ja">
130 <span>サンプル文サンプル文<span class="target">⁉</span>サンプル文</span>
131 </p>
132 <p class="control" lang="ja">
133 <span>サンプル文サンプル<br>文<span class="target">⁉</span>サンプル文</span>
134 </p>
135 <hr>
136 <!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
137 <p class="test" lang="ja">
138 <span>サンプル文サンプル文<span class="target">！</span>サンプル文</span>
139 </p>
140 <p class="control" lang="ja">
141 <span>サンプル文サンプル<br>文<span class="target">！</span>サンプル文</span>
142 </p>
143 <hr>
144 <!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
145 <p class="test" lang="ja">
146 <span>サンプル文サンプル文<span class="target">？</span>サンプル文</span>
147 </p>
148 <p class="control" lang="ja">
149 <span>サンプル文サンプル<br>文<span class="target">？</span>サンプル文</span>
150 </p>
151 </body>
152 </html>