line-break-normal-015b.xht (2716B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSS Text Test: line-break - normal and inseparable characters</title> 6 <!-- inseparable characters --> 7 <link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" /> 8 <link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" /> 9 <link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" /> 10 <link rel="match" href="reference/line-break-normal-015b-ref.xht" /> 11 <meta http-equiv="content-language" content="en, ja" /> 12 <meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking between inseparable characters such as TWO DOT LEADER (U+2025) and HORIZONTAL ELLIPSIS (U+2026). Tailorable breaks between ID and CL, as well as CL and IN are also disallowed." /> 13 <meta name="flags" content="should" /> 14 <style type="text/css"> 15 @font-face 16 { 17 font-family: "mplus-1p-regular"; 18 src: url("/fonts/mplus-1p-regular.woff") format("woff"); 19 /* filesize: 803300 bytes (784.5 KBytes) */ 20 /* 21 mplus-1p-regular.ttf can be downloaded at/from [TBD later] 22 */ 23 } 24 .test span { 25 line-break: normal; /* The property to be tested */ 26 } 27 p.test, p.control { 28 border: 1px solid gray; 29 color: blue; 30 font-family: "mplus-1p-regular"; 31 width: 10.2em; /* added extra .2em for some symbols wider than 1em */ 32 } 33 span.target { 34 background-color: aqua; 35 } 36 div.wrapper { 37 display: inline-block; 38 border: 1px solid; 39 margin: 10px; 40 padding: 10px; 41 } 42 </style> 43 </head> 44 <body lang="en"> 45 <p> 46 Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position. 47 </p> 48 <div class="wrapper"> 49 <!-- inseparable characters TWO DOT LEADER --> 50 <p class="test" lang="ja"> 51 <span>サンプルサンプル。<span class="target">‥‥</span>サンプル文</span> 52 </p> 53 <p class="control" lang="ja"> 54 <span>サンプルサンプ<br />ル。<span class="target">‥‥</span>サンプル文</span> 55 </p> 56 </div> 57 <div class="wrapper"> 58 <!-- inseparable characters HORIZONTAL ELLIPSIS --> 59 <p class="test" lang="ja"> 60 <span>サンプルサンプル。<span class="target">……</span>サンプル文</span> 61 </p> 62 <p class="control" lang="ja"> 63 <span>サンプルサンプ<br />ル。<span class="target">……</span>サンプル文</span> 64 </p> 65 </div> 66 </body> 67 </html>