Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[e] (0) Provide advice to authors regarding styling editing regions
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=13011

git-svn-id: http://svn.whatwg.org/webapps@6570 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Sep 23, 2011
1 parent e01cdd4 commit 61e4c8b
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 26 deletions.
61 changes: 50 additions & 11 deletions complete.html
Expand Up @@ -239,7 +239,7 @@

<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>Web Applications 1.0</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 22 September 2011</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 23 September 2011</h2>
</hgroup><dl><dt>Multiple-page version:</dt>
<dd><a href=http://www.whatwg.org/specs/web-apps/current-work/complete/>http://www.whatwg.org/specs/web-apps/current-work/complete/</a></dd>
<dt>One-page version:</dt>
Expand Down Expand Up @@ -969,9 +969,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<li><a href=#contenteditable><span class=secno>8.5.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
attribute</a></li>
<li><a href=#making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.5.2 </span>Making entire documents editable: The <code title=dom-document-designMode>designMode</code> IDL attribute</a></li>
<li><a href=#user-editing-actions><span class=secno>8.5.3 </span>User editing actions</a></li>
<li><a href=#editing-apis><span class=secno>8.5.4 </span>Editing APIs</a></li>
<li><a href=#spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</a></li>
<li><a href=#user-editing-actions><span class=secno>8.5.4 </span>User editing actions</a></li>
<li><a href=#editing-apis><span class=secno>8.5.5 </span>Editing APIs</a></li>
<li><a href=#spelling-and-grammar-checking><span class=secno>8.5.6 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#dnd><span class=secno>8.6 </span>Drag and drop</a>
<ol>
<li><a href=#introduction-9><span class=secno>8.6.1 </span>Introduction</a></li>
Expand Down Expand Up @@ -44676,9 +44677,9 @@ <h6 id=e-mail-state><span class=secno>4.10.7.1.5 </span><dfn title=attr-input-ty
<p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
of RFC 5322, which defines a syntax for e-mail addresses that is
simultaneously too strict (before the "@" character), too vague
(after the "@" character), and too lax (allowing comments, white
space characters, and quoted strings in manners unfamiliar to most
users) to be of practical use here.</p>
(after the "@" character), and too lax (allowing comments,
whitespace characters, and quoted strings in manners unfamiliar to
most users) to be of practical use here.</p>

<p>A <dfn id=valid-e-mail-address-list>valid e-mail address list</dfn> is a <a href=#set-of-comma-separated-tokens>set of
comma-separated tokens</a>, where each token is itself a
Expand Down Expand Up @@ -54747,7 +54748,7 @@ <h4 id=downloading-resources><span class=secno>4.12.4 </span>Downloading resourc

<p class=example>For example, this could involve removing
characters that are not legal in file names, or trimming leading
and trailing white space.</p>
and trailing whitespace.</p>

</li>

Expand Down Expand Up @@ -71761,10 +71762,48 @@ <h4 id=making-entire-documents-editable:-the-designmode-idl-attribute><span clas
</div>


<h4 id=best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</h4>

<p>Authors are encouraged to set the 'white-space' property on <a href=#editing-host title="editing host">editing hosts</a> and on markup that was
originally created through these editing mechanisms to the value
'pre-wrap'. Default HTML whitespace handling is not well suited to
WYSIWYG editing, and line wrapping will not work correctly in some
corner cases if 'white-space' is left at its default value.</p>

<div class=example>

<p>As an example of problems that occur if the default 'normal'
value is used instead, consider the case of the user typing
"<kbd>yellow&#9251;&#9251;ball</kbd>", with two spaces (here
represented by "2423;") between the words. With the editing
rules in place for the default value of 'white-space' ('normal'),
the resulting markup will either consist of
"<samp>yellow&amp;nbsp;&nbsp;ball</samp>" or
"<samp>yellow&nbsp;&amp;nbsp;ball</samp>"; i.e., there will be a
non-breaking space between the two words in addition to the regular
space. This is necessary because the 'normal' value for
'white-space' requires adjacent regular spaces to be collapsed
together.</p>

<p>In the former case, "<samp>yellow&#9085;</samp>" might wrap to
the next line ("&#9085;" being used here to represent a
non-breaking space) even though "<samp>yellow</samp>" alone might
fit at the end of the line; in the latter case,
"<samp>&#9085;ball</samp>", if wrapped to the start of the line,
would have visible indentation from the non-breaking space.</p>

<p>When 'white-space' is set to 'pre-wrap', however, the editing
rules will instead simply put two regular spaces between the words,
and should the two words be split at the end of a line, the spaces
would be neatly removed from the rendering.</p>

</div>



<div class=impl>

<h4 id=user-editing-actions><span class=secno>8.5.3 </span>User editing actions</h4>
<h4 id=user-editing-actions><span class=secno>8.5.4 </span>User editing actions</h4>

<p class=XXX>This section will be removed shortly. What remains
here is simply what has not yet been merged into Aryeh's spec.</p>
Expand Down Expand Up @@ -71839,7 +71878,7 @@ <h4 id=user-editing-actions><span class=secno>8.5.3 </span>User editing actions<
</div>


<h4 id=editing-apis><span class=secno>8.5.4 </span>Editing APIs</h4>
<h4 id=editing-apis><span class=secno>8.5.5 </span>Editing APIs</h4>

<p>The definition of the terms <dfn id=active-range>active range</dfn>, <dfn id=editing-host>editing
host</dfn>, and <dfn id=editable>editable</dfn>, the user interface requirements
Expand Down Expand Up @@ -71868,7 +71907,7 @@ <h4 id=editing-apis><span class=secno>8.5.4 </span>Editing APIs</h4>



<h4 id=spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</h4>
<h4 id=spelling-and-grammar-checking><span class=secno>8.5.6 </span>Spelling and grammar checking</h4>

<div class=impl>

Expand Down
61 changes: 50 additions & 11 deletions index
Expand Up @@ -243,7 +243,7 @@

<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 22 September 2011</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 23 September 2011</h2>
</hgroup><dl><dt><strong>Web developer edition</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -969,9 +969,10 @@
<li><a href=#contenteditable><span class=secno>8.5.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
attribute</a></li>
<li><a href=#making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.5.2 </span>Making entire documents editable: The <code title=dom-document-designMode>designMode</code> IDL attribute</a></li>
<li><a href=#user-editing-actions><span class=secno>8.5.3 </span>User editing actions</a></li>
<li><a href=#editing-apis><span class=secno>8.5.4 </span>Editing APIs</a></li>
<li><a href=#spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</a></li>
<li><a href=#user-editing-actions><span class=secno>8.5.4 </span>User editing actions</a></li>
<li><a href=#editing-apis><span class=secno>8.5.5 </span>Editing APIs</a></li>
<li><a href=#spelling-and-grammar-checking><span class=secno>8.5.6 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#dnd><span class=secno>8.6 </span>Drag and drop</a>
<ol>
<li><a href=#introduction-9><span class=secno>8.6.1 </span>Introduction</a></li>
Expand Down Expand Up @@ -44543,9 +44544,9 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H
<p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
of RFC 5322, which defines a syntax for e-mail addresses that is
simultaneously too strict (before the "@" character), too vague
(after the "@" character), and too lax (allowing comments, white
space characters, and quoted strings in manners unfamiliar to most
users) to be of practical use here.</p>
(after the "@" character), and too lax (allowing comments,
whitespace characters, and quoted strings in manners unfamiliar to
most users) to be of practical use here.</p>

<p>A <dfn id=valid-e-mail-address-list>valid e-mail address list</dfn> is a <a href=#set-of-comma-separated-tokens>set of
comma-separated tokens</a>, where each token is itself a
Expand Down Expand Up @@ -54614,7 +54615,7 @@ fur

<p class=example>For example, this could involve removing
characters that are not legal in file names, or trimming leading
and trailing white space.</p>
and trailing whitespace.</p>

</li>

Expand Down Expand Up @@ -71657,10 +71658,48 @@ interface <dfn id=navigatorstorageutils>NavigatorStorageUtils</dfn> {
</div>


<h4 id=best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</h4>

<p>Authors are encouraged to set the 'white-space' property on <a href=#editing-host title="editing host">editing hosts</a> and on markup that was
originally created through these editing mechanisms to the value
'pre-wrap'. Default HTML whitespace handling is not well suited to
WYSIWYG editing, and line wrapping will not work correctly in some
corner cases if 'white-space' is left at its default value.</p>

<div class=example>

<p>As an example of problems that occur if the default 'normal'
value is used instead, consider the case of the user typing
"<kbd>yellow&#9251;&#9251;ball</kbd>", with two spaces (here
represented by "2423;") between the words. With the editing
rules in place for the default value of 'white-space' ('normal'),
the resulting markup will either consist of
"<samp>yellow&amp;nbsp;&nbsp;ball</samp>" or
"<samp>yellow&nbsp;&amp;nbsp;ball</samp>"; i.e., there will be a
non-breaking space between the two words in addition to the regular
space. This is necessary because the 'normal' value for
'white-space' requires adjacent regular spaces to be collapsed
together.</p>

<p>In the former case, "<samp>yellow&#9085;</samp>" might wrap to
the next line ("&#9085;" being used here to represent a
non-breaking space) even though "<samp>yellow</samp>" alone might
fit at the end of the line; in the latter case,
"<samp>&#9085;ball</samp>", if wrapped to the start of the line,
would have visible indentation from the non-breaking space.</p>

<p>When 'white-space' is set to 'pre-wrap', however, the editing
rules will instead simply put two regular spaces between the words,
and should the two words be split at the end of a line, the spaces
would be neatly removed from the rendering.</p>

</div>



<div class=impl>

<h4 id=user-editing-actions><span class=secno>8.5.3 </span>User editing actions</h4>
<h4 id=user-editing-actions><span class=secno>8.5.4 </span>User editing actions</h4>

<p class=XXX>This section will be removed shortly. What remains
here is simply what has not yet been merged into Aryeh's spec.</p>
Expand Down Expand Up @@ -71735,7 +71774,7 @@ interface <dfn id=navigatorstorageutils>NavigatorStorageUtils</dfn> {
</div>


<h4 id=editing-apis><span class=secno>8.5.4 </span>Editing APIs</h4>
<h4 id=editing-apis><span class=secno>8.5.5 </span>Editing APIs</h4>

<p>The definition of the terms <dfn id=active-range>active range</dfn>, <dfn id=editing-host>editing
host</dfn>, and <dfn id=editable>editable</dfn>, the user interface requirements
Expand Down Expand Up @@ -71764,7 +71803,7 @@ interface <dfn id=navigatorstorageutils>NavigatorStorageUtils</dfn> {



<h4 id=spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</h4>
<h4 id=spelling-and-grammar-checking><span class=secno>8.5.6 </span>Spelling and grammar checking</h4>

<div class=impl>

Expand Down
47 changes: 43 additions & 4 deletions source
Expand Up @@ -49876,9 +49876,9 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
<p class="note">This requirement is a <span>willful violation</span>
of RFC 5322, which defines a syntax for e-mail addresses that is
simultaneously too strict (before the "@" character), too vague
(after the "@" character), and too lax (allowing comments, white
space characters, and quoted strings in manners unfamiliar to most
users) to be of practical use here.</p>
(after the "@" character), and too lax (allowing comments,
whitespace characters, and quoted strings in manners unfamiliar to
most users) to be of practical use here.</p>

<p>A <dfn>valid e-mail address list</dfn> is a <span>set of
comma-separated tokens</span>, where each token is itself a
Expand Down Expand Up @@ -61674,7 +61674,7 @@ fur

<p class="example">For example, this could involve removing
characters that are not legal in file names, or trimming leading
and trailing white space.</p>
and trailing whitespace.</p>

</li>

Expand Down Expand Up @@ -81678,6 +81678,45 @@ interface <dfn>NavigatorStorageUtils</dfn> {
</div>


<h4>Best practices for in-page editors</h4>

<p>Authors are encouraged to set the 'white-space' property on <span
title="editing host">editing hosts</span> and on markup that was
originally created through these editing mechanisms to the value
'pre-wrap'. Default HTML whitespace handling is not well suited to
WYSIWYG editing, and line wrapping will not work correctly in some
corner cases if 'white-space' is left at its default value.</p>

<div class="example">

<p>As an example of problems that occur if the default 'normal'
value is used instead, consider the case of the user typing
"<kbd>yellow&#x2423;&#x2423;ball</kbd>", with two spaces (here
represented by "&#x;2423;") between the words. With the editing
rules in place for the default value of 'white-space' ('normal'),
the resulting markup will either consist of
"<samp>yellow&amp;nbsp;&nbsp;ball</samp>" or
"<samp>yellow&nbsp;&amp;nbsp;ball</samp>"; i.e., there will be a
non-breaking space between the two words in addition to the regular
space. This is necessary because the 'normal' value for
'white-space' requires adjacent regular spaces to be collapsed
together.</p>

<p>In the former case, "<samp>yellow&#x237D;</samp>" might wrap to
the next line ("&#x237D;" being used here to represent a
non-breaking space) even though "<samp>yellow</samp>" alone might
fit at the end of the line; in the latter case,
"<samp>&#x237D;ball</samp>", if wrapped to the start of the line,
would have visible indentation from the non-breaking space.</p>

<p>When 'white-space' is set to 'pre-wrap', however, the editing
rules will instead simply put two regular spaces between the words,
and should the two words be split at the end of a line, the spaces
would be neatly removed from the rendering.</p>

</div>



<div class="impl">

Expand Down

0 comments on commit 61e4c8b

Please sign in to comment.