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

On Wed, Feb 16, 2011 at 9:57 AM, 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.
>
> Many non latin scripts use something else than 3 dots for the same effect as an ellipsis.
>
> 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.
>
>
> 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.
>
> 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>
>
> You could argue that that could be achieved with CSS, true, but it's about covering more valid use cases, and in the case of websites where users produce content, like wikis, editing CSS is less likely.
>
> Perhaps I'm thinking too much ahead already, but I hope you understand the idea.

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).

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.

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.

~TJ

Received on Wednesday, 16 February 2011 18:22:13 UTC