hanging-punctuation-force-end-001

hanging-punctuation - force-end - basic cases

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
font
Assertion
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.

Source

 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>