hanging-punctuation-first-001.xht (3117B)
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 - first - 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-first-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: first; 14 } 15 /* the CSS below is not part of the test */ 16 body { 17 font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック"; 18 } 19 .hanging { 20 left: -1em; 21 position: relative; 22 } 23 .no-wrap { 24 white-space: nowrap; 25 } 26 .parent { 27 border: 1px solid gray; 28 margin-left: 2em; 29 width: 10em 30 } 31 div.wrapper { 32 display: inline-block; 33 border: 1px solid; 34 margin: 10px; 35 padding: 10px; 36 } 37 span.attention { 38 color: red; 39 } 40 ]]> 41 </style> 42 </head> 43 <body> 44 <p> 45 Test passes if each pair of upper and lower text in the square box is identical. 46 </p> 47 <div class="wrapper"> 48 <div> 49 Opening brackets 50 </div> 51 <div class="parent"> 52 <div class="test"> 53 「これは、満たすための文字です。」 54 </div> 55 <br /> 56 <div class="no-wrap"> 57 <span class="hanging">「これは、満たすための</span><br />文字です。」 58 </div> 59 </div> 60 </div> 61 <div class="wrapper"> 62 <div> 63 Closing brackets 64 </div> 65 <div class="parent"> 66 <div class="test"> 67 これは、「満たす文字」です。 68 </div> 69 <br /> 70 <div class="no-wrap"> 71 これは、「満たす文<br />字」です。 72 </div> 73 </div> 74 </div> 75 <div class="wrapper"> 76 <div> 77 Initial quotes 78 </div> 79 <div class="parent"> 80 <div class="test"> 81 “これは、満たすための文字です。” 82 </div> 83 <br /> 84 <div class="no-wrap"> 85 <span class="hanging">“これは、満たすための</span><br />文字です。” 86 </div> 87 </div> 88 </div> 89 <div class="wrapper"> 90 <div> 91 Final quotes 92 </div> 93 <div class="parent"> 94 <div class="test"> 95 これは、“満たす文字”です。 96 </div> 97 <br /> 98 <div class="no-wrap"> 99 これは、“満たす文<br />字”です。 100 </div> 101 </div> 102 </div> 103 <p> 104 <span class="attention">* You will need a Japanese font.</span><br /> 105 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. 106 </p> 107 </body> 108 </html>