line-break-strict-016b.xht (4060B)
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 - strict and centered punctuation marks</title> 6 <!-- centered punctuation marks --> 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-strict-016b-ref.xht" /> 11 <meta http-equiv="content-language" content="en, ja" /> 12 <meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks." /> 13 <style type="text/css"> 14 @font-face 15 { 16 font-family: "mplus-1p-regular"; 17 src: url("/fonts/mplus-1p-regular.woff") format("woff"); 18 /* filesize: 803300 bytes (784.5 KBytes) */ 19 /* 20 mplus-1p-regular.ttf can be downloaded at/from [TBD later] 21 */ 22 } 23 .test span { 24 line-break: strict; /* The property to be tested */ 25 } 26 p.test, p.control { 27 border: 1px solid gray; 28 color: blue; 29 font-family: "mplus-1p-regular"; 30 width: 10.2em; /* added extra .2em for some symbols wider than 1em */ 31 } 32 span.target { 33 background-color: aqua; 34 } 35 div.wrapper { 36 display: inline-block; 37 border: 1px solid; 38 margin: 5px; 39 padding: 5px; 40 } 41 </style> 42 </head> 43 <body lang="en"> 44 <p> 45 Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position. 46 </p> 47 <div class="wrapper"> 48 <!-- centered punctuation marks DOUBLE EXCLAMATION MARK --> 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 </div> 56 <div class="wrapper"> 57 <!-- centered punctuation marks DOUBLE QUESTION MARK --> 58 <p class="test" lang="ja"> 59 <span>サンプル文サンプル文<span class="target">⁇</span>サンプル文</span> 60 </p> 61 <p class="control" lang="ja"> 62 <span>サンプル文サンプル<br />文<span class="target">⁇</span>サンプル文</span> 63 </p> 64 </div> 65 <div class="wrapper"> 66 <!-- centered punctuation marks QUESTION EXCLAMATION MARK --> 67 <p class="test" lang="ja"> 68 <span>サンプル文サンプル文<span class="target">⁈</span>サンプル文</span> 69 </p> 70 <p class="control" lang="ja"> 71 <span>サンプル文サンプル<br />文<span class="target">⁈</span>サンプル文</span> 72 </p> 73 </div> 74 <div class="wrapper"> 75 <!-- centered punctuation marks EXCLAMATION QUESTION MARK --> 76 <p class="test" lang="ja"> 77 <span>サンプル文サンプル文<span class="target">⁉</span>サンプル文</span> 78 </p> 79 <p class="control" lang="ja"> 80 <span>サンプル文サンプル<br />文<span class="target">⁉</span>サンプル文</span> 81 </p> 82 </div> 83 <div class="wrapper"> 84 <!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK --> 85 <p class="test" lang="ja"> 86 <span>サンプル文サンプル文<span class="target">！</span>サンプル文</span> 87 </p> 88 <p class="control" lang="ja"> 89 <span>サンプル文サンプル<br />文<span class="target">！</span>サンプル文</span> 90 </p> 91 </div> 92 <div class="wrapper"> 93 <!-- centered punctuation marks FULLWIDTH QUESTION MARK --> 94 <p class="test" lang="ja"> 95 <span>サンプル文サンプル文<span class="target">？</span>サンプル文</span> 96 </p> 97 <p class="control" lang="ja"> 98 <span>サンプル文サンプル<br />文<span class="target">？</span>サンプル文</span> 99 </p> 100 </div> 101 </body> 102 </html>