hanging-punctuation-last-001.xht (2996B)
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" xml:lang="ja"> 4 <head> 5 <title>CSS Test: hanging-punctuation - last - basic cases</title> 6 <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" /> 7 <link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" /> 8 <link rel="match" href="reference/hanging-punctuation-last-001-ref.xht"/> 9 <meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." /> 10 <style type="text/css"> 11 <![CDATA[ 12 .test { 13 hanging-punctuation: last; 14 } 15 /* the CSS below is not part of the test */ 16 body { 17 font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; 18 } 19 .no-wrap { 20 white-space: nowrap; 21 } 22 .parent { 23 border: 1px solid gray; 24 margin-left: 2em; 25 width: 10em 26 } 27 div.wrapper { 28 display: inline-block; 29 border: 1px solid; 30 margin: 10px; 31 padding: 10px; 32 } 33 span.attention { 34 color: red; 35 } 36 ]]> 37 </style> 38 </head> 39 <body> 40 <p> 41 Test passes if each pair of upper and lower text in the square box is identical. 42 </p> 43 <div class="wrapper"> 44 <div> 45 Opening brackets 46 </div> 47 <div class="parent"> 48 <div class="test"> 49 「これは、満たすための文字です。」 50 </div> 51 <br /> 52 <div class="no-wrap"> 53 「これは、満たすため<br />の文字です。」 54 </div> 55 </div> 56 </div> 57 <div class="wrapper"> 58 <div> 59 Closing brackets 60 </div> 61 <div class="parent"> 62 <div class="test"> 63 これは、「満たす文字」です。 64 </div> 65 <br /> 66 <div class="no-wrap"> 67 これは、「満たす文字」<br />です。 68 </div> 69 </div> 70 </div> 71 <div class="wrapper"> 72 <div> 73 Initial quotes 74 </div> 75 <div class="parent"> 76 <div class="test"> 77 “これは、満たすための文字です。” 78 </div> 79 <br /> 80 <div class="no-wrap"> 81 “これは、満たすため<br />の文字です。” 82 </div> 83 </div> 84 </div> 85 <div class="wrapper"> 86 <div> 87 Final quotes 88 </div> 89 <div class="parent"> 90 <div class="test"> 91 これは、“満たす文字”です。 92 </div> 93 <br /> 94 <div class="no-wrap"> 95 これは、“満たす文字”<br />です。 96 </div> 97 </div> 98 </div> 99 <p> 100 <span class="attention">* You will need a Japanese font.</span><br /> 101 If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page. 102 </p> 103 </body> 104 </html>