hanging-punctuation-allow-end-001.xht (3217B)
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 - allow-end - 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-allow-end-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: allow-end; 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 IDEOGRAPHIC COMMA 46 </div> 47 <div class="parent"> 48 <div class="test"> 49 これらは満たす文字で、それらも満たす文字です。 50 </div> 51 <br /> 52 <div class="no-wrap"> 53 これらは満たす文字で、<br />それらも満たす文字で<br />す。 54 </div> 55 </div> 56 </div> 57 <div class="wrapper"> 58 <div> 59 IDEOGRAPHIC FULL STOP 60 </div> 61 <div class="parent"> 62 <div class="test"> 63 これは満たす文字です。 64 </div> 65 <br /> 66 <div class="no-wrap"> 67 これは満たす文字です。 68 </div> 69 </div> 70 </div> 71 <div class="wrapper"> 72 <div> 73 HALFWIDTH IDEOGRAPHIC COMMA 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 HALFWIDTH IDEOGRAPHIC FULL STOP 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>