- From: Tantek Celik via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 04 May 2011 23:22:20 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-ui
In directory hutz:/tmp/cvs-serv17208
Modified Files:
Overview.html Overview.src.html
Log Message:
change text-overflow ellipsis to visual clipping per usability of mixed bidi scrolling use-case, apply to text and atomic inline element content, must not affect layout, additional ellipsing details, generalize scrolling to any source of scrolling (e.g. user or script).
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-ui/Overview.html,v
retrieving revision 1.20
retrieving revision 1.21
diff -u -d -r1.20 -r1.21
--- Overview.html 18 Feb 2011 18:45:35 -0000 1.20
+++ Overview.html 4 May 2011 23:22:18 -0000 1.21
@@ -55,12 +55,11 @@
src="http://www.w3.org/Icons/w3c_home" width=72> </a>
<h1>CSS Basic User Interface Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 February
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 May 2011</h2>
<dl>
<dt>This version:</dt>
- <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-ui-20110218">http://www.w3.org/TR/2011/ED-css3-ui-20110218</a></dd> -->
+ <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-ui-20110504">http://www.w3.org/TR/2011/ED-css3-ui-20110504</a></dd> -->
<dd><a
href="http://dev.w3.org/csswg/css3-ui/">http://dev.w3.org/csswg/css3-ui/</a>
@@ -302,7 +301,7 @@
by FredrikHoeglund - 14 Oct 2003
http://freedesktop.org/Standards/cursor-spec
</li>
- <li>‘<code class=property>cursor</code>’ property values: ew-resize | ns-resize | nesw-resize | nwse-resize
+ <li>'cursor' property values: ew-resize | ns-resize | nesw-resize | nwse-resize
implemented by Firefox and Safari
</li>
<li>pointer-events property:
@@ -312,7 +311,7 @@
implemented by Opera, Tasman v1 internal implementation
required (depended on) by DVB-HTML, ATSC standards
</li>
- <li>‘<code class=property>resize</code>’ property
+ <li>'resize' property
implemented by Firefox 4 and Safari
</li>
-->
@@ -1687,7 +1686,7 @@
the UI control, then the UA must ensure that the <span
class=property>‘<code class=property>color</code>’</span>
property is also used to influence the rendering. <!--
-Similarly if <span class="property">‘<code class=property>color</code>’</span> is used to influence the rendering, then <span class="property">‘<code class=property>background-color</code>’</span> must be used to influence the rendering, and the other <span class="property">‘<code class=css>background-*</code>’</span> properties should be used to influence the rendering as well.
+Similarly if <span class="property">'color'</span> is used to influence the rendering, then <span class="property">'background-color'</span> must be used to influence the rendering, and the other <span class="property">'background-*'</span> properties should be used to influence the rendering as well.
-->
@@ -2911,43 +2910,56 @@
<td>as specified
</table>
- <p>This property specifies the behavior when text overflows its block
- container element that has <span class=property>‘<code
- class=property>overflow</code>’</span> other than <span
- class=value>‘<code class=property>visible</code>’</span>. Text
- may overflow for example when it is prevented from wrapping (e.g. due to
- ‘<code class=css><code>white-space:nowrap</code></code>’ or a
- single word is too long to fit). Values have the following meanings:
+ <p>This property specifies rendering when inline content overflows its
+ block container element ("the block") that has <span
+ class=property>‘<code class=property>overflow</code>’</span>
+ other than <span class=value>‘<code
+ class=property>visible</code>’</span>. Text can overflow for example
+ when it is prevented from wrapping (e.g. due to ‘<code
+ class=css><code>white-space:nowrap</code></code>’ or a single word
+ is too long to fit). Values have the following meanings:
<dl>
<dt><dfn id=clip title="text-overflow:clip"><code>clip</code></dfn>
- <dd>Clip text as appropriate. Characters may be only partially rendered.
+ <dd>Clip inline content that overflows. Characters may be only partially
+ rendered.
<dt><dfn id=ellipsis
title="text-overflow:ellipsis"><code>ellipsis</code></dfn>
- <dd>Render an ellipsis character (U+2026) to represent clipped text
- replacing however many characters are necessary for the ellipsis to fit.
- Characters are dropped in reverse document source order: later characters
- are dropped first. If the <span class=property>‘<code
- class=property>direction</code>’</span> of the element is <span
- class=value>‘<code class=property>ltr</code>’</span> (<span
- class=value>‘<code class=property>rtl</code>’</span>) then
- the ellipsis is rendered to the right (left) of the remaining characters
- on the line. If there is insufficient space for the ellipsis itself to
- fit, then clip the rendering of the ellipsis itself. Implementations may
- substitute a more language/script-appropriate ellipsis character.
- Implementations may render three dots "..." instead if the ellipsis
- character is unavailable. The ellipsis is styled according to the element
- with text-overflow ellipsis (rather than any deeper descendants without
- text-overflow ellipsis).
+ <dd> Render an ellipsis character (U+2026) to represent clipped inline
+ content. Hide characters and atomic inline elements at the end edge of
+ the line as necessary to fit the ellipsis. Place the ellipsis immediately
+ adjacent to the end edge (per the block's ‘<code
+ class=property>direction</code>’) of the remaining inline content.
+ Implementations may substitute a more language/script-appropriate
+ ellipsis character, or three dots "..." if the ellipsis character is
+ unavailable. The ellipsis is styled and baseline-aligned according to the
+ block.
</dl>
<p> The term "character" is used in this property definition for better
readability and means "grapheme cluster" <a href="#UAX29"
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> for implementation purposes.
+ <h4 class="no-num no-toc" id=ellipsing-details>ellipsing details</h4>
+
+ <ul>
+ <li> Ellipsing only affects rendering and must not affect layout.
+
+ <li> If there is insufficient space for the ellipsis, then clip the
+ rendering of the ellipsis itself.
+
+ <li> Ellipsing occurs before relative positioning and other graphical
+ transformations.
+
+ <li>When the user is interacting with content (e.g. editing, selecting),
+ the user agent may treat text-overflow ‘<code
+ class=css>ellipsis</code>’ as ‘<code
+ class=css>clip</code>’.
+ </ul>
+
<div class=example>
<p style="display:none">Example(s):</p>
@@ -2958,8 +2970,10 @@
<h5 class="no-num no-toc" id=sample-css-for-a-div>sample CSS for a div:</h5>
- <pre><code class=css>div { width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif}
-</code></pre>
+ <pre><code class=css>div {
+ font-family:Helvetica,sans-serif;
+ width:3.2em; padding:.2em; border:solid .1em black; margin:1em 0;
+}</code></pre>
<h5 class="no-num no-toc"
id=sample-html-fragments-renderings-and-you>sample HTML fragments,
@@ -3043,6 +3057,14 @@
</table>
</div>
+ <p class=note> Note: the side of the line that the ellipsis is placed
+ depends on the ‘<code class=property>direction</code>’ of the
+ block. E.g. an overflow hidden right-to-left (<code>direction:rtl</code>)
+ block clips inline content on the <em>left</em> side, thus would place a
+ text-overflow ellipsis on the <em>left</em> to represent that clipped
+ content.</p>
+ <!-- insert RTL example diagram here to illustrate note. -->
+
<h4 class="no-num no-toc"
id=ellipsis-interaction-with-scrolling-inte>ellipsis interaction with
scrolling interfaces</h4>
@@ -3054,26 +3076,28 @@
the inline progression dimension of the text, and the browser provides a
mechanism for scrolling (e.g. a scrollbar on the element, or a touch
interface to swipe-scroll, etc.), there are additional implementation
- details that provide a better user experience.
+ details that provide a better user experience:
- <p> When a user scrolls an element, more of the element's content is shown.
- The value of text-overflow SHOULD NOT affect whether more of the element's
- content is shown or not. If text-overflow:ellipsis is set, then as the
- user manipulates the scrolling mechansim to scroll more content into view,
- implementations SHOULD show whatever additional content fits, only
+ <p> When an element is scrolled (e.g. by the user or DOM manipulation),
+ more of the element's content is shown. The value of text-overflow should
+ not affect whether more of the element's content is shown or not. If
+ text-overflow:ellipsis is set, then as more content is scrolled into view,
+ implementations should show whatever additional content fits, only
truncating content which would otherwise be clipped (or is necessary to
- make room for the ellipsis), until the user scrolls far enough to display
- the edge of the content at which point that content should be displayed
- rather than an ellipsis.
+ make room for the ellipsis), until the element is scrolled far enough to
+ display the edge of the content at which point that content should be
+ displayed rather than an ellipsis.
- <p> As the user is scrolling some content into view, it is likely that
- other content may scroll out of view on the other side. If that content is
- text whose block container element is the same that doing the scrolling,
- then implementations SHOULD render an ellipsis in place of the clipped
- text, with the same details as described in the value definition above,
- except that the ellipsis is drawn in the start (rather than end) of the
- block's direction (per the direction property), and the characters are
- dropped in document source order.
+ <p> As some content is scrolled into view, it is likely that other content
+ may scroll out of view on the other side. If that content's block
+ container element is the same that's doing the scrolling, then
+ implementations should render an ellipsis in place of the clipped content,
+ with the same details as described in the value definition above, except
+ that the ellipsis is drawn in the start (rather than end) of the block's
+ direction (per the direction property).
+
+ <p> If there is insufficient space for both start and end ellipses, then
+ only the end ellipsis should be rendered.
<h2 id=pointing-devices-and-keyboards><span class=secno>10. </span>Pointing
Devices and Keyboards</h2>
@@ -3330,8 +3354,10 @@
cursor:zoom-in"> zoom-in</span>, <span style="cursor:-moz-zoom-out;
cursor:-o-zoom-out; cursor:zoom-out"> zoom-out</span> </strong>
- <dd>Indicates that something can be zoomed (magnified) in or out
- respectively.
+ <dd> Indicates that something can be zoomed (magnified) in or out, and
+ often rendered as a magnifying glass with a "+" or "-" in the center of
+ the glass, for ‘<code class=property>zoom-in</code>’ and
+ ‘<code class=property>zoom-out</code>’ respectively.
</dl>
<p>The UA may treat unsupported values as ‘<code class=css><span
@@ -3840,10 +3866,10 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2010/WD-CSS2-20101207"><cite>Cascading Style
- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 December
- 2010. W3C Working Draft. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2010/WD-CSS2-20101207">http://www.w3.org/TR/2010/WD-CSS2-20101207</a>
+ href="http://www.w3.org/TR/2009/CR-CSS2-20090423"><cite>Cascading Style
+ Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23
+ April 2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2009/CR-CSS2-20090423">http://www.w3.org/TR/2009/CR-CSS2-20090423</a>
</dd>
<!---->
@@ -3898,9 +3924,10 @@
<dt id=UAX29>[UAX29]
<dd>Mark Davis. <a
- href="http://www.unicode.org/unicode/reports/tr29/tr29-9.html"><cite>Text
- Boundaries.</cite></a> 25 March 2005. Unicode Standard Annex #29. URL: <a
- href="http://www.unicode.org/unicode/reports/tr29/tr29-9.html">http://www.unicode.org/unicode/reports/tr29/tr29-9.html</a>
+ href="http://www.unicode.org/reports/tr29/tr29-17.html"><cite>Unicode
+ Text Segmentation.</cite></a> 8 October 2010. Unicode Standard Annex #29.
+ URL: <a
+ href="http://www.unicode.org/reports/tr29/tr29-17.html">http://www.unicode.org/reports/tr29/tr29-17.html</a>
</dd>
<!---->
@@ -3956,7 +3983,7 @@
<dt id=HTML401>[HTML401]
- <dd>David Raggett; Ian Jacobs; Arnaud Le Hors. <a
+ <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
@@ -3976,29 +4003,29 @@
<dt id=SVG11>[SVG11]
<dd>Erik Dahlström; et al. <a
- href="http://www.w3.org/TR/2010/WD-SVG11-20100622"><cite>Scalable Vector
+ href="http://www.w3.org/TR/2010/WD-SVG11-20100622/"><cite>Scalable Vector
Graphics (SVG) 1.1 (Second Edition).</cite></a> 22 June 2010. W3C Working
Draft. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2010/WD-SVG11-20100622">http://www.w3.org/TR/2010/WD-SVG11-20100622</a>
+ href="http://www.w3.org/TR/2010/WD-SVG11-20100622/">http://www.w3.org/TR/2010/WD-SVG11-20100622/</a>
</dd>
<!---->
<dt id=UAAG10>[UAAG10]
- <dd>Jon Gunderson; Ian Jacobs; Eric Hansen. <a
- href="http://www.w3.org/TR/2002/REC-UAAG10-20021217"><cite>User Agent
+ <dd>Ian Jacobs; Jon Gunderson; Eric Hansen. <a
+ href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/"><cite>User Agent
Accessibility Guidelines 1.0.</cite></a> 17 December 2002. W3C
Recommendation. URL: <a
- href="http://www.w3.org/TR/2002/REC-UAAG10-20021217">http://www.w3.org/TR/2002/REC-UAAG10-20021217</a>
+ href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/">http://www.w3.org/TR/2002/REC-UAAG10-20021217/</a>
</dd>
<!---->
<dt id=XFORMS10>[XFORMS10]
<dd>John M. Boyer. <a
- href="http://www.w3.org/TR/2009/REC-xforms-20091020"><cite>XForms
+ href="http://www.w3.org/TR/2009/REC-xforms-20091020/"><cite>XForms
1.1.</cite></a> 20 October 2009. W3C Recommendation. URL: <a
- href="http://www.w3.org/TR/2009/REC-xforms-20091020">http://www.w3.org/TR/2009/REC-xforms-20091020</a>
+ href="http://www.w3.org/TR/2009/REC-xforms-20091020/">http://www.w3.org/TR/2009/REC-xforms-20091020/</a>
</dd>
<!---->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-ui/Overview.src.html,v
retrieving revision 1.21
retrieving revision 1.22
diff -u -d -r1.21 -r1.22
--- Overview.src.html 23 Feb 2011 00:09:56 -0000 1.21
+++ Overview.src.html 4 May 2011 23:22:18 -0000 1.22
@@ -1537,47 +1537,64 @@
<td>as specified</td></tr>
</tbody></table>
-<p>This property specifies the behavior when text overflows
-its block container element
+<p>This property specifies rendering when inline content overflows
+its block container element ("the block")
that has <span class="property">'overflow'</span>
other than <span class="value">'visible'</span>.
-Text may overflow for example when it is prevented from wrapping
+Text can overflow for example when it is prevented from wrapping
(e.g. due to '<code>white-space:nowrap</code>'
or a single word is too long to fit).
Values have the following meanings:</p>
<dl>
<dt><dfn title="text-overflow:clip"><code>clip</code></dfn></dt>
- <dd>Clip text as appropriate. Characters may be only partially rendered.</dd>
+ <dd>Clip inline content that overflows. Characters may be only partially rendered.</dd>
<dt><dfn title="text-overflow:ellipsis"><code>ellipsis</code></dfn></dt>
- <dd>Render an ellipsis character (U+2026) to represent clipped text
-replacing however many characters are necessary for the ellipsis to fit.
-Characters are dropped in reverse document source order:
-later characters are dropped first.
-If the <span class="property">'direction'</span> of the element is
-<span class="value">'ltr'</span> (<span class="value">'rtl'</span>)
-then the ellipsis is rendered to the right (left) of the remaining
-characters on the line. If there is insufficient space for the
-ellipsis itself to fit, then clip the rendering of the ellipsis itself.
+ <dd>
+Render an ellipsis character (U+2026)
+to represent clipped inline content.
+Hide characters and atomic inline elements
+at the end edge of the line as necessary to fit the ellipsis.
+Place the ellipsis immediately adjacent to the end edge
+(per the block's 'direction')
+of the remaining inline content.
Implementations may substitute a more language/script-appropriate
-ellipsis character. Implementations may render three dots "..." instead
-if the ellipsis character is unavailable. The ellipsis is styled according
-to the element with text-overflow ellipsis (rather than any
-deeper descendants without text-overflow ellipsis).</dd>
+ellipsis character,
+or three dots "..." if the ellipsis character is unavailable.
+The ellipsis is styled and baseline-aligned according to
+the block.
+</dd>
</dl>
<p>
The term "character" is used in this property definition for better readability and means "grapheme cluster" [[!UAX29]] for implementation purposes.
</p>
+<h4 class="no-num no-toc">ellipsing details</h4>
+<ul>
+<li>
+Ellipsing only affects rendering and must not affect layout.
+</li>
+<li>
+If there is insufficient space for the ellipsis, then clip the rendering of the ellipsis itself.
+</li>
+<li>
+Ellipsing occurs before relative positioning and other graphical transformations.
+</li>
+<li>When the user is interacting with content (e.g. editing, selecting), the user agent may treat text-overflow ''ellipsis'' as ''clip''.
+</li>
+</ul>
+
<div class="example"><p style="display:none">Example(s):</p>
<h4 class="no-num no-toc">text-overflow examples</h4>
<p>These examples demonstrate setting the text-overflow of a block container element that has text which overflows its dimensions:
</p>
<h5 class="no-num no-toc">sample CSS for a div:</h5>
-<pre><code class="css">div { width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif}
-</code></pre>
+<pre><code class="css">div {
+ font-family:Helvetica,sans-serif;
+ width:3.2em; padding:.2em; border:solid .1em black; margin:1em 0;
+}</code></pre>
<h5 class="no-num no-toc">sample HTML fragments, renderings, and your browser:</h5>
<table border="1" cellpadding="5"><tbody>
<tr><th>HTML</th><th>sample rendering</th><th>your browser</th></tr>
@@ -1658,6 +1675,12 @@
</div>
+<p class="note">
+Note: the side of the line that the ellipsis is placed depends on the 'direction' of the block. E.g. an overflow hidden right-to-left (<code>direction:rtl</code>) block clips inline content on the <em>left</em> side, thus would place a text-overflow ellipsis on the <em>left</em> to represent that clipped content.
+</p>
+
+<!-- insert RTL example diagram here to illustrate note. -->
+
<h4 class="no-num no-toc">ellipsis interaction with scrolling interfaces</h4>
<p>
@@ -1667,32 +1690,40 @@
<p>
When an element with text-overflow:ellipsis has overflow of scroll
-in the inline progression dimension of the text, and the browser
+in the inline progression dimension of the text, and the browser
provides a mechanism for scrolling (e.g. a scrollbar on the element,
or a touch interface to swipe-scroll, etc.), there are
-additional implementation details that provide a better user experience.
+additional implementation details that provide a better user experience:
</p>
<p>
-When a user scrolls an element, more of the element's content is shown.
-The value of text-overflow SHOULD NOT affect whether more of
-the element's content is shown or not. If text-overflow:ellipsis is set,
-then as the user manipulates the scrolling mechansim to scroll
-more content into view, implementations SHOULD show whatever
+When an element is scrolled (e.g. by the user or DOM manipulation),
+more of the element's content is shown.
+The value of text-overflow should not affect whether more of
+the element's content is shown or not. If text-overflow:ellipsis
+is set, then as more content is scrolled into view,
+implementations should show whatever
additional content fits, only truncating content which would
otherwise be clipped (or is necessary to make room for the ellipsis),
-until the user scrolls far enough to display the edge of the content
-at which point that content should be displayed rather than an ellipsis.
+until the element is scrolled far enough to
+display the edge of the content
+at which point that content should be displayed
+rather than an ellipsis.
</p>
<p>
-As the user is scrolling some content into view, it is likely that
-other content may scroll out of view on the other side. If that content is
-text whose block container element is the same that doing the scrolling,
-then implementations SHOULD render an ellipsis in place of the clipped text,
+As some content is scrolled into view, it is likely that
+other content may scroll out of view on the other side.
+If that content's block container element is the same
+that's doing the scrolling,
+then implementations should render an ellipsis in place of
+the clipped content,
with the same details as described in the value definition above,
except that the ellipsis is drawn in the start (rather than end) of
-the block's direction (per the direction property), and the characters
-are dropped in document source order.
+the block's direction (per the direction property).
+</p>
+<p>
+If there is insufficient space for both start and end ellipses,
+then only the end ellipsis should be rendered.
</p>
Received on Wednesday, 4 May 2011 23:22:25 UTC