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