| <?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 hyphens</title> |
| <!-- hyphens --> |
| <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-013-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 hyphens such as HYPHEN (U+2010) and ENDASH (U+2013)." /> |
| <style type="text/css"> |
| @font-face |
| { |
| font-family: "mplus-1p-regular"; |
| src: url("/fonts/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; |
| } |
| div.wrapper { |
| display: inline-block; |
| border: 1px solid; |
| margin: 10px; |
| padding: 10px; |
| } |
| </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> |
| <!-- hyphens --> |
| <div class="wrapper"> |
| <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> |
| </div> |
| <div class="wrapper"> |
| <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> |
| </div> |
| <div class="wrapper"> |
| <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> |
| </div> |
| <div class="wrapper"> |
| <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> |
| </div> |
| </body> |
| </html> |
