Skip to content

Commit

Permalink
Add guidelines on whitespace characters (#77)
Browse files Browse the repository at this point in the history 
Fix #15.
  • Loading branch information
@xfq
xfq committed Sep 29, 2022
1 parent b21adef commit 3e0bda5
Show file tree
Hide file tree
Showing 2 changed files with 340 additions and 1 deletion.
317 changes: 317 additions & 0 deletions index.html
View file
Expand Up @@ -1687,7 +1687,324 @@ <h3>Defining 'string'</h3>
</div>
</section>

<section id="char_whitespace" class="subtopic">
<h3>Whitespace characters</h3>

<p class="reviewComments"><a href="https://github.com/w3c/i18n-activity/labels/t%3Achar_whitespace" target="_blank">See related review comments.</a></p>

<div class="xref"><span class="seealso">See also</span>
<p>[[[#markup_identifiers]]].</p>
</div>

<p>Whitespace characters are characters that represent horizontal or vertical space in typography. Whitespace characters can have different visual effects: some whitespace characters have no visible effect, while others represent larger, smaller, or variable amounts of space on the page.</p>

<div class="req" id="char_define_whitespace">
<p class="advisement">Specifications that use the term "whitespace" SHOULD explicitly define what the term means.</p>
<details class="links">
<summary>explanations &amp; examples</summary>
<ul>
<li><a href="https://infra.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>, in <cite>Infra Living Standard</cite></li>
<li><a href="https://www.w3.org/TR/css-syntax/#whitespace">Whitespace</a>, in <cite>CSS Syntax</cite></li>
<li><a href="https://www.w3.org/TR/css-text/#white-space">Document white space characters</a>, in <cite>CSS Text</cite></li>
<li><a href="https://tc39.es/ecma262/#sec-white-space">White Space</a>, in <cite>ECMAScript Language Specification</cite></li>
<li><a href="https://www.w3.org/TR/WGSL/#blankspace-and-line-breaks">Blankspace and line breaks</a>, in <cite>WebGPU Shading Language</cite></li>
<li><a href="https://www.w3.org/TR/webdriver/#dfn-whitespace">Whitespace</a>, in <cite>WebDriver</cite></li>
<li><a href="https://www.w3.org/TR/xml/#NT-S">S (white space)</a>, in <cite>Extensible Markup Language (XML) 1.0</cite></li>
</ul>
</details>
</div>

<div class="req" id="char_unicode_white_space">
<p class="advisement">Most specifications SHOULD define whitespace to mean characters with the Unicode <a href="https://www.unicode.org/reports/tr44/#White_Space">White_Space</a> property.</p>
</div>

<div class="req" id="char_ascii_whitespace">
<p class="advisement">Specifications that define whitespace for use in <a href="https://www.w3.org/TR/charmod-norm/#def_vocabulary">vocabularies</a> that are restricted to ASCII or to formats that are whitespace delimited (examples include HTML or CSS) SHOULD specify <a href="https://infra.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a> as part of their grammar.</p>
</div>

<div class="req" id="char_whitespace_code_points">
<p class="advisement">If a specification defines "whitespace" differently from ASCII or Unicode whitespace, the specific code points MUST be listed.</p>
</div>

<p>
Some specifications, such as <a href="https://tc39.es/ecma262/#sec-white-space">ECMAScript</a>, have provided their own definition of whitespace which differ from the above to meet their own specific requirements.
</p>

<p>
The following table is the definition of whitespace characters in various specifications.
</p>

<table class="whitespace">
<caption>Links to the latest definitions of the information in the table can be found by expanding the "explanations & examples".</caption>
<thead>
<tr>
<th>&nbsp;</th>
<th><code class="kw" translate="no">white_space</code> property</th>
<th><code class="kw" translate="no">pattern_white_space</code> property</th>
<th><a href="https://infra.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a> (HTML)</th>
<th>CSS whitespace</th>
<th>ECMAScript</th>
<th>XML</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="uname" translate="no">U+0009 (horizontal tab)</span></td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+000A (line feed)</span></td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>✓</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+000B (vertical tab)</span></td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+000C (form feed)</span></td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+000D (carriage return)</span></td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+0020 SPACE</span></td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+0085 (next line)</span></td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+00A0 NO-BREAK SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+1680 OGHAM SPACE MARK</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2000 EN QUAD</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2001 EM QUAD</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2002 EN SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2003 EM SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2004 THREE-PER-EM SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2005 FOUR-PER-EM SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2006 SIX-PER-EM SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2007 FIGURE SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2008 PUNCTUATION SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2009 THIN SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+200A HAIR SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+200E LEFT-TO-RIGHT MARK</span></td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+200F RIGHT-TO-LEFT MARK</span></td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2028 LINE SEPARATOR</span></td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+2029 PARAGRAPH SEPARATOR</span></td>
<td>✓</td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+202F NARROW NO-BREAK SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+205F MEDIUM MATHEMATICAL SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+3000 IDEOGRAPHIC SPACE</span></td>
<td>✓</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span class="uname" translate="no">U+FEFF ZERO WIDTH NO-BREAK SPACE</span></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>✓</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

<p>Some specifications use the same definition as one of the columns above and are not listed in the table. For example, <a href="https://www.w3.org/TR/webdriver/#dfn-whitespace">WebDriver</a> uses the <code class="kw" translate="no">white_space</code> property and <a href="https://www.w3.org/TR/WGSL/#blankspace-and-line-breaks">WebGPU Shading Language</a> uses the <code class="kw" translate="no">pattern_white_space</code> property.</p>
</section>



Expand Down
24 changes: 23 additions & 1 deletion local.css
View file
Expand Up @@ -274,7 +274,29 @@ aside h4 {
margin-inline-start: 1em;
}


table.whitespace {
/* width: 300px; */
width: 100%;
border-spacing: 0;
margin: 1em 0;
}
table.whitespace th {
writing-mode: sideways-lr;
vertical-align: bottom;
}
table.whitespace td {
text-align: center;
vertical-align: middle;
}
table.whitespace th,
table.whitespace td {
border: thin solid rgba(0,0,0,.12);
padding: 6px;
}
table.whitespace caption {
padding: 10px;
caption-side: bottom;
}


.advisement + .links { margin-top: -1em; }
Expand Down

0 comments on commit 3e0bda5

Please sign in to comment.