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 - force-end - 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-force-end-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: force-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 span.attention {
28 color: red;
29 }
30
31 </style>
32 </head>
33 <body>
34 <p>
35 Test passes if each pair of upper and lower text in the square box is identical.
36 </p>
37 <hr>
38 <div>
39 IDEOGRAPHIC COMMA
40 </div>
41 <div class="parent">
42 <div class="test">
43 これらは満たす文字で、それらも満たす文字です。
44 </div>
45 <br>
46 <div class="no-wrap">
47 これらは満たす文字で、<br>それらも満たす文字で<br>す。
48 </div>
49 </div>
50 <hr>
51 <div>
52 IDEOGRAPHIC FULL STOP
53 </div>
54 <div class="parent">
55 <div class="test">
56 これは満たす文字です。
57 </div>
58 <br>
59 <div class="no-wrap">
60 これは満たす文字です。
61 </div>
62 </div>
63 <hr>
64 <div>
65 HALFWIDTH IDEOGRAPHIC COMMA
66 </div>
67 <div class="parent">
68 <div class="test">
69 ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
70 </div>
71 <br>
72 <div class="no-wrap">
73 ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br>ﾐﾀｽﾓｼﾞ｡
74 </div>
75 </div>
76 <hr>
77 <div>
78 HALFWIDTH IDEOGRAPHIC FULL STOP
79 </div>
80 <div class="parent">
81 <div class="test">
82 ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
83 </div>
84 <br>
85 <div class="no-wrap">
86 ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br>ﾐﾀｽﾓｼﾞ｡
87 </div>
88 </div>
89 <hr>
90 <p>
91 <span class="attention">* You will need a Japanese font.</span><br>
92 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.
93 </p>
94 </body>
95 </html>