1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html lang="ja">
3 <head>
4 <title>CSS Test: hanging-punctuation - first - basic cases</title>
5 <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp">
6 <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">
7 <link rel="match" href="reference/hanging-punctuation-first-001-ref.htm">
8 <meta name="flags" content="font">
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
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 span.attention {
32 color: red;
33 }
34
35 </style>
36 </head>
37 <body>
38 <p>
39 Test passes if each pair of upper and lower text in the square box is identical.
40 </p>
41 <hr>
42 <div>
43 Opening brackets
44 </div>
45 <div class="parent">
46 <div class="test">
47 「これは、満たすための文字です。」
48 </div>
49 <br>
50 <div class="no-wrap">
51 <span class="hanging">「これは、満たすための</span><br>文字です。」
52 </div>
53 </div>
54 <hr>
55 <div>
56 Closing brackets
57 </div>
58 <div class="parent">
59 <div class="test">
60 これは、「満たす文字」です。
61 </div>
62 <br>
63 <div class="no-wrap">
64 これは、「満たす文<br>字」です。
65 </div>
66 </div>
67 <hr>
68 <div>
69 Initial quotes
70 </div>
71 <div class="parent">
72 <div class="test">
73 “これは、満たすための文字です。”
74 </div>
75 <br>
76 <div class="no-wrap">
77 <span class="hanging">“これは、満たすための</span><br>文字です。”
78 </div>
79 </div>
80 <hr>
81 <div>
82 Final quotes
83 </div>
84 <div class="parent">
85 <div class="test">
86 これは、“満たす文字”です。
87 </div>
88 <br>
89 <div class="no-wrap">
90 これは、“満たす文<br>字”です。
91 </div>
92 </div>
93 <hr>
94 <p>
95 <span class="attention">* You will need a Japanese font.</span><br>
96 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.
97 </p>
98 </body>
99 </html>