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 hyphens</title>
5 <!-- hyphens -->
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-013-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 hyphens such as HYPHEN (U+2010) and ENDASH (U+2013).">
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 <!-- hyphens -->
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 <p class="test" lang="ja">
49 <span>サンプル文サンプル文<span class="target">–</span>サンプル文</span>
50 </p>
51 <p class="control" lang="ja">
52 <span>サンプル文サンプル<br>文<span class="target">–</span>サンプル文</span>
53 </p>
54 <hr>
55 <p class="test" lang="ja">
56 <span>サンプル文サンプル文<span class="target">〜</span>サンプル文</span>
57 </p>
58 <p class="control" lang="ja">
59 <span>サンプル文サンプル<br>文<span class="target">〜</span>サンプル文</span>
60 </p>
61 <hr>
62 <p class="test" lang="ja">
63 <span>サンプル文サンプル文<span class="target">゠</span>サンプル文</span>
64 </p>
65 <p class="control" lang="ja">
66 <span>サンプル文サンプル<br>文<span class="target">゠</span>サンプル文</span>
67 </p>
68 </body>
69 </html>