line-break-strict-016

line-break - strict and centered punctuation marks

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
font
Assertion
This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks such as COLON (U+003A) and SEMICOLON (U+003B).

Source

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 	<head>
  4 		<title>CSS Text Test: line-break - strict and centered punctuation marks</title>
  5 		<!-- centered punctuation marks -->
  6 		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com">
  7 		<link rel="help" title="5.2. Breaking Rules for Punctuation: the 'line-break' property" href="http://www.w3.org/TR/css-text-3/#line-break">
  8 		<link rel="match" href="reference/line-break-strict-016-ref.htm">
  9 		<meta http-equiv="content-language" content="en, ja">
 10 		<meta name="flags" content="font">
 11 		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks such as COLON (U+003A) and SEMICOLON (U+003B).">
 12 		<style type="text/css">
 13 			@font-face
 14 			{
 15 				font-family: "mplus-1p-regular";
 16 				src: url("support/mplus-1p-regular.woff") format("woff");
 17 				/* filesize: 803300 bytes (784.5 KBytes) */
 18 				/*
 19 				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
 20 				*/
 21 			}
 22 			.test span {
 23 				line-break: strict;						// The property to be tested
 24 			}
 25 			p.test, p.control {
 26 				border: 1px solid gray;
 27 				color: blue;
 28 				font-family: "mplus-1p-regular";
 29 				width: 10em;
 30 			}
 31 			span.target {
 32 				background-color: aqua;
 33 			}
 34 		</style>
 35 	</head>
 36 	<body lang="en">
 37 		<p>
 38 			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
 39 		</p>
 40 		<!-- centered punctuation marks COLON -->
 41 		<p class="test" lang="ja">
 42 			<span>サンプル文サンプル文<span class="target">:</span>サンプル文</span>
 43 		</p>
 44 		<p class="control" lang="ja">
 45 			<span>サンプル文サンプル<br><span class="target">:</span>サンプル文</span>
 46 		</p>
 47 		<hr>
 48 		<!-- centered punctuation marks SEMICOLON -->
 49 		<p class="test" lang="ja">
 50 			<span>サンプル文サンプル文<span class="target">;</span>サンプル文</span>
 51 		</p>
 52 		<p class="control" lang="ja">
 53 			<span>サンプル文サンプル<br><span class="target">;</span>サンプル文</span>
 54 		</p>
 55 		<hr>
 56 		<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
 57 		<p class="test" lang="ja">
 58 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
 59 		</p>
 60 		<p class="control" lang="ja">
 61 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
 62 		</p>
 63 		<hr>
 64 		<!-- centered punctuation marks FULLWIDTH COLON -->
 65 		<p class="test" lang="ja">
 66 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
 67 		</p>
 68 		<p class="control" lang="ja">
 69 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
 70 		</p>
 71 		<hr>
 72 		<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
 73 		<p class="test" lang="ja">
 74 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
 75 		</p>
 76 		<p class="control" lang="ja">
 77 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
 78 		</p>
 79 		<hr>
 80 		<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
 81 		<p class="test" lang="ja">
 82 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
 83 		</p>
 84 		<p class="control" lang="ja">
 85 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
 86 		</p>
 87 		<hr>
 88 		<!-- centered punctuation marks EXCLAMATION MARK -->
 89 		<p class="test" lang="ja">
 90 			<span>サンプル文サンプル文<span class="target">!</span>サンプル文</span>
 91 		</p>
 92 		<p class="control" lang="ja">
 93 			<span>サンプル文サンプル<br><span class="target">!</span>サンプル文</span>
 94 		</p>
 95 		<hr>
 96 		<!-- centered punctuation marks QUESTION MARK -->
 97 		<p class="test" lang="ja">
 98 			<span>サンプル文サンプル文<span class="target">?</span>サンプル文</span>
 99 		</p>
100 		<p class="control" lang="ja">
101 			<span>サンプル文サンプル<br><span class="target">?</span>サンプル文</span>
102 		</p>
103 		<hr>
104 		<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
105 		<p class="test" lang="ja">
106 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
107 		</p>
108 		<p class="control" lang="ja">
109 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
110 		</p>
111 		<hr>
112 		<!-- centered punctuation marks DOUBLE QUESTION MARK -->
113 		<p class="test" lang="ja">
114 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
115 		</p>
116 		<p class="control" lang="ja">
117 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
118 		</p>
119 		<hr>
120 		<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
121 		<p class="test" lang="ja">
122 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
123 		</p>
124 		<p class="control" lang="ja">
125 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
126 		</p>
127 		<hr>
128 		<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
129 		<p class="test" lang="ja">
130 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
131 		</p>
132 		<p class="control" lang="ja">
133 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
134 		</p>
135 		<hr>
136 		<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
137 		<p class="test" lang="ja">
138 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
139 		</p>
140 		<p class="control" lang="ja">
141 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
142 		</p>
143 		<hr>
144 		<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
145 		<p class="test" lang="ja">
146 			<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
147 		</p>
148 		<p class="control" lang="ja">
149 			<span>サンプル文サンプル<br><span class="target"></span>サンプル文</span>
150 		</p>
151 	</body>
152 </html>