Skip to content

Commit

Permalink
change text-overflow ellipsis to visual clipping per usability of mix…
Browse files Browse the repository at this point in the history 
…ed 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).
  • Loading branch information
Tantek Çelik committed May 4, 2011
1 parent 5076e82 commit 1785b81
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 100 deletions.
159 changes: 93 additions & 66 deletions css3-ui/Overview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -302,7 +301,7 @@ <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
by FredrikHoeglund - 14 Oct 2003
http://freedesktop.org/Standards/cursor-spec
</li>
<li>&lsquo;<code class=property>cursor</code>&rsquo; 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:
Expand All @@ -312,7 +311,7 @@ <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
implemented by Opera, Tasman v1 internal implementation
required (depended on) by DVB-HTML, ATSC standards
</li>
<li>&lsquo;<code class=property>resize</code>&rsquo; property
<li>'resize' property
implemented by Firefox 4 and Safari
</li>
-->
Expand Down Expand Up @@ -1687,7 +1686,7 @@ <h4 class="no-num no-toc" id=appearance-property-details><span
the UI control, then the UA must ensure that the <span
class=property>&lsquo;<code class=property>color</code>&rsquo;</span>
property is also used to influence the rendering. <!--
Similarly if <span class="property">&lsquo;<code class=property>color</code>&rsquo;</span> is used to influence the rendering, then <span class="property">&lsquo;<code class=property>background-color</code>&rsquo;</span> must be used to influence the rendering, and the other <span class="property">&lsquo;<code class=css>background-*</code>&rsquo;</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.
-->


Expand Down Expand Up @@ -2911,43 +2910,56 @@ <h3 id=text-overflow><span class=secno>9.2. </span> Overflow Ellipsis: the
<td>as specified
</table>

<p>This property specifies the behavior when text overflows its block
container element that has <span class=property>&lsquo;<code
class=property>overflow</code>&rsquo;</span> other than <span
class=value>&lsquo;<code class=property>visible</code>&rsquo;</span>. Text
may overflow for example when it is prevented from wrapping (e.g. due to
&lsquo;<code class=css><code>white-space:nowrap</code></code>&rsquo; 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>&lsquo;<code class=property>overflow</code>&rsquo;</span>
other than <span class=value>&lsquo;<code
class=property>visible</code>&rsquo;</span>. Text can overflow for example
when it is prevented from wrapping (e.g. due to &lsquo;<code
class=css><code>white-space:nowrap</code></code>&rsquo; 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>&lsquo;<code
class=property>direction</code>&rsquo;</span> of the element is <span
class=value>&lsquo;<code class=property>ltr</code>&rsquo;</span> (<span
class=value>&lsquo;<code class=property>rtl</code>&rsquo;</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 &lsquo;<code
class=property>direction</code>&rsquo;) 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 &lsquo;<code
class=css>ellipsis</code>&rsquo; as &lsquo;<code
class=css>clip</code>&rsquo;.
</ul>

<div class=example>
<p style="display:none">Example(s):</p>

Expand All @@ -2958,8 +2970,10 @@ <h4 class="no-num no-toc" id=text-overflow-examples>text-overflow examples</h4>

<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,
Expand Down Expand Up @@ -3043,6 +3057,14 @@ <h5 class="no-num no-toc" id=sample-css-for-a-div>sample CSS for a div:</h5>
</table>
</div>

<p class=note> Note: the side of the line that the ellipsis is placed
depends on the &lsquo;<code class=property>direction</code>&rsquo; 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>
Expand All @@ -3054,26 +3076,28 @@ <h5 class="no-num no-toc" id=sample-css-for-a-div>sample CSS for a div:</h5>
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.

<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.
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 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>
Expand Down Expand Up @@ -3330,8 +3354,10 @@ <h5 class="no-num no-toc" id=zooming-cursors>zooming cursors</h5>
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 &lsquo;<code class=property>zoom-in</code>&rsquo; and
&lsquo;<code class=property>zoom-out</code>&rsquo; respectively.
</dl>

<p>The UA may treat unsupported values as &lsquo;<code class=css><span
Expand Down Expand Up @@ -3840,10 +3866,10 @@ <h3 class="no-num no-toc" id=normative-references>Normative References</h3>
<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&#160;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>
<!---->

Expand Down Expand Up @@ -3898,9 +3924,10 @@ <h3 class="no-num no-toc" id=normative-references>Normative References</h3>
<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>
<!---->

Expand Down Expand Up @@ -3956,7 +3983,7 @@ <h3 class="no-num no-toc" id=informative-references>Informative References</h3>

<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>
Expand All @@ -3976,29 +4003,29 @@ <h3 class="no-num no-toc" id=informative-references>Informative References</h3>
<dt id=SVG11>[SVG11]

<dd>Erik Dahlstr&#246;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>
<!---->

Expand Down
Loading

0 comments on commit 1785b81

Please sign in to comment.