Re: [CSS3-UI] text-overflow:ellipsis (freshly rewritten/expanded and incorporated into editor's draft)

On Wed, Feb 16, 2011 at 09:57, João Eiras <joao-c-eiras@telecom.pt> wrote:
>
>> I've applied the filter of only documenting what appears to be
>> interoperably implemented, dropping things like the <string> value
>> that are not (I'm willing to consider such forward looking features
>> for CSS4-UI).
>
> Hi.
>
> I strongly suggest including <string> values in the specification. Else, it is not multi lingual.

Thanks for your suggestion.

Absent data I am considering this a theoretical request.

Please provide URLs of real world examples on the public web that
appear to need (or could use) text-overflow <string> values in order
to upgrade this from theoretical to real-world based.


In addition note that <string> values were included in a past CR (CSS3
Text 2003)

http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow-ellipsis


But no one implemented <string> values. For over 7 years.

That's why it got dropped when the feature was moved to CSS3 UI.


Before adding this feature to CSS4 UI, you will need to justify
how/why implementations will consider it differently than they have
for the past 7+ years (they ignored it). Otherwise it is pointless to
spend the time writing it up.


I have captured this request for CSS4-UI here:

http://wiki.csswg.org/spec/css4-ui#text-overflow-string



> Many non latin scripts use something else than 3 dots for the same effect as an ellipsis.

The current editor's draft allows implementations to use something
other than 3 dots:

"Implementations may substitute a more language/script-appropriate
ellipsis character."

from http://dev.w3.org/csswg/css3-ui/#text-overflow

FAQ recorded:

http://wiki.csswg.org/spec/css3-ui#text-overflow-for-non-latin-scripts


If you have suggestions of specific non-latin scripts and their
respective something else other than 3 dots for the same effect as an
ellipsis, please provide them with citations to style guides for those
non-latin scripts so that we may provide more precise implementation
guidance.


> A single 3-dot ellipsis is also not a bullet proof solution. The author might wish to use "(...)" for instance in citations, or use the vertical ellipsis in maths.

Recorded as theoretical use-cases.

http://wiki.csswg.org/spec/css4-ui#text-overflow-string

Please provide URLs of real world examples on the public web of
"(...)" in citations, or vertical ellipsis in maths in order to
upgrade this from theoretical to real-world based.


> However, the string value for text-overflow should have the same syntax as the content rule, which makes the subject complex.
>
> The author might want to use an image, css counters, or read an attribute.

Recorded as an extension to string value with theoretical use cases:

http://wiki.csswg.org/spec/css4-ui#text-overflow-string-plus


> Consider for instance, the case of a multi lingual document, with several truncated paragraphs with different scripts, and each script with its own ellipsis.
>
> <style>p.truncated {text-overflow:attr(data-ellipsis)}</style>
>
> <p class="truncated" data-ellipsis="…">Text in latin script</p>
> <p class="truncated" data-ellipsis="ฯ">Text in thai script</p>
> <p class="truncated" data-ellipsis="ຯ">Text in laotian script</p>
> <p class="truncated" data-ellipsis="⋯⋯">Text in chinese script</p>

Note that this suggested syntax is an abuse of HTML5 data-*
attributes, as those are supposed to be site/page specific and NOT
used in any standards, formats etc.


> Perhaps I'm thinking too much ahead already, but I hope you understand the idea.

Perhaps just a bit. Please consider providing URLs to real world
examples on the public web that demonstrate the need for new features
before proposing them.



On Wed, Feb 16, 2011 at 10:21, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>
> I'd like to at least start discussion on text-overflow improvements,
> because we've found that we want to use it (and thus want to implement
> it) in Webkit components, but the current version in UI3 is too weak.
>
> Here are some use-cases we've run into that we think can be solved by
> something like the older version of text-overflow that was in Text:
>
> 1. Hiding a timeline label entirely when the video control shrinks
> small enough to make it start overflowing.  It looks like this could
> have been achieved with "text-overflow: ellipsis-word '';", and
> wrapping the label in a <span style="display:inline-block;"></span> if
> it was multi-word (which it may be once internationalized).

This sounds complex enough that I don't understand it sufficiently to document.

Could you provide more details e.g.  diagrams showing the desired
affect (or say a URL to a real world public example that implements
the desired functionality in javascript) ?


> 2. Eliding the middle of a long url or filepath when it starts to
> overflow, keeping the important bits at either end visible as long as
> possible.  I don't think this was achievable in the old Text draft,
> but it's apparently very useful in application frameworks that provide
> this functionality.  Some provide a smarter version specialized for
> urls/filepaths, where it additionally tries to preserve content after
> the last / as long as possible.

This sounds very special purpose. Can you provide a theoretical (or
preferably real world with URL) example of a web application that does
this?

Or perhaps at least list the specific application frameworks that
provide this functionality that you're referring to, and what
mechanisms/syntaxes they use.


> 3. Providing a UI where several small sections have a max-height set
> and may or may not overflow.  If they do overflow, you want to
> indicate that there's more content "below the fold", so users know to
> click on the header or whatever to go the page showing the whole
> thing.  This was doable in the old Text version by providing a second
> string to text-overflow-ellipsis.

Collected:

http://wiki.csswg.org/spec/css4-ui#text-overflow-block-hint


On Wed, Feb 16, 2011 at 10:34, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On Feb 16, 2011, at 10:21 AM, Tab Atkins Jr. wrote:
>
>> 3. Providing a UI where several small sections have a max-height set
>> and may or may not overflow.  If they do overflow, you want to
>> indicate that there's more content "below the fold", so users know to
>> click on the header or whatever to go the page showing the whole
>> thing.  This was doable in the old Text version by providing a second
>> string to text-overflow-ellipsis.
>
> That sounds very similar to what iTunes App Store does for its app descriptions. I agree that would be a very good thing to be able to do that easily.

Thanks for the real world use case Brad.

So that I can properly understand the effect you are talking about,
could you provide more details or perhaps post screenshot snippets of
the effect as you see it on the iTunes App Store?

Thanks,

Tantek
editor, CSS3-UI (and collecting stuff for CSS4-UI)

-- 
http://tantek.com/ - I made an HTML5 tutorial! http://tantek.com/html5

Received on Thursday, 17 February 2011 01:38:45 UTC