white-space-collapse-001

White space and non-ASCII spaces

WeasyPrint

This browser

Flags
script
Assertion
Any space immediately following another collapsible space is collapsed to have zero advance width. Only refers to U+0020, not other Unicode spaces.

Source

 1 <!DOCTYPE html>
 2 <html lang="en"><head>
 3 <meta charset="utf-8">
 4 <title>White space and non-ASCII spaces</title>
 5 <link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
 6 <link href="https://drafts.csswg.org/css-text-3/#line-break-transform" rel="help">
 7 <meta content="Any space immediately following another collapsible space is collapsed to have zero advance width. Only refers to U+0020, not other Unicode spaces." name="assert">
 8 <style type="text/css">
 9 .test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
10 .ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
11 </style>
12 <script src="/resources/testharness.js"></script>
13 <script src="/resources/testharnessreport.js"></script>
14 </head>
15 <body>
16 <div id="log"></div>
17 <div class="test" id="testNB"><span>hello   &nbsp;       there</span></div>
18 <div class="ref" id="refNB"><span>hello &nbsp; there</span></div>
19 <div class="test" id="testEN"><span>hello   &ensp;       there</span></div>
20 <div class="ref" id="refEN"><span>hello &ensp; there</span></div>
21 <div class="test" id="testEM"><span>hello   &emsp;       there</span></div>
22 <div class="ref" id="refEM"><span>hello &emsp; there</span></div>
23 <div class="test" id="testTS"><span>hello   &thinsp;       there</span></div>
24 <div class="ref" id="refTS"><span>hello &thinsp; there</span></div>
25 <div class="test" id="testZW"><span>hello   &#x200B;       there</span></div>
26 <div class="ref" id="refZW"><span>hello &#x200B; there</span></div>
27 <div class="test" id="testNNB"><span>hello   &#x202F;       there</span></div>
28 <div class="ref" id="refNNB"><span>hello &#x202F; there</span></div>
29 <div class="test" id="testIS"><span>hello   &nbsp;       there</span></div>
30 <div class="ref" id="refIS"><span>hello &nbsp; there</span></div>
31 <div class="test" id="testIS2"><span>缔造真正全球通行   &nbsp;       的万维网</span></div>
32 <div class="ref" id="refIS2"><span>缔造真正全球通行 &nbsp; 的万维网</span></div>
33 <script>
34 test(function() {
35 assert_equals(document.getElementById('testNB').firstChild.offsetWidth, document.getElementById('refNB').firstChild.offsetWidth);
36 }, "no-break space");
37 test(function() {
38 assert_equals(document.getElementById('testEN').firstChild.offsetWidth, document.getElementById('refEN').firstChild.offsetWidth);
39 }, "en space");
40 test(function() {
41 assert_equals(document.getElementById('testEM').firstChild.offsetWidth, document.getElementById('refEM').firstChild.offsetWidth);
42 }, "em space");
43 test(function() {
44 assert_equals(document.getElementById('testTS').firstChild.offsetWidth, document.getElementById('refTS').firstChild.offsetWidth);
45 }, "thin space");
46 test(function() {
47 assert_equals(document.getElementById('testZW').firstChild.offsetWidth, document.getElementById('refZW').firstChild.offsetWidth);
48 }, "zero width space");
49 test(function() {
50 assert_equals(document.getElementById('testZW').firstChild.offsetWidth, document.getElementById('refZW').firstChild.offsetWidth);
51 }, "narrow no-break space");
52 test(function() {
53 assert_equals(document.getElementById('testIS').firstChild.offsetWidth, document.getElementById('refIS').firstChild.offsetWidth);
54 }, "ideographic space");
55 test(function() {
56 assert_equals(document.getElementById('testIS2').firstChild.offsetWidth, document.getElementById('refIS2').firstChild.offsetWidth);
57 }, "ideographic space inside ideographic text");
58 </script>
59 <!-- Notes:
60 The assertion will fail if space is produced for any line in the test paragraph.
61 -->
62 
63 
64 
65 
66 </body></html>