Re: Rework 'text-overflow' WAS: [css3-ui] Support cropping in the middle of texts using 'text-overflow'

On 14 August 2013 16:48, Brad Kemper <brad.kemper@gmail.com> wrote:

> On Aug 13, 2013, at 3:57 PM, Sebastian Zartner <sebastianzartner@gmail.com>
> wrote:
>
> On 13 August 2013 02:33, Brad Kemper <brad.kemper@gmail.com> wrote:
>
>> On Aug 12, 2013, at 2:06 PM, Sebastian Zartner <
>> sebastianzartner@gmail.com> wrote:
>>
>>
>> The use case I need that for are file names. In print doesn't have
>> dynamic text cropping, so I'm not sure what you want here.
>>
>>
>> I just can't imagine that there is much need for truncating the start
>> edge (ie left edge in Latin scripts), except when the element is too
>> narrow to show even a single character on the left. When would you ever
>> want "...ilename.pdf" instead of "filen...e.pdf" or "f...lename.pdf?
>> Left-side truncation seems unnecessary to me, as I've never seen it
>> anywhere, and never needed it (though it seems OK if a single character
>> won't fit there).
>>
>
> Discussing whether left-side truncation is needed or not is not part of
> this thread.
>
> Other use cases for text-overflow-min-width are samples of texts having
>> some kind of [more] link at the end, which can be seen on many pages.
>>
>>> Start and end truncation:
>>> …ome trunca…
>>>
>>>
>>> That looks pretty odd to me, and not readable.
>>>
>>
>> Well, truncating at both sides at the same time is not my invention.[1]
>>
>>
>> I never noticed that there, and don't think any UAs do that. It seems
>> bizarre to me. I don't know what the use case is.
>>
>
> Firefox already implements this.[1] Though this thread is also not about
> discussing two-side truncation.
>
>
> It is now, and is directly relevant to your proposal.
>

Ok, so then we're talking about changing more than just adding
middle-cropping to the property. Therefore I generalized the subject to
reflect that.
Throwing away two-sided truncation would make the definition somewhat
easier.

One related idea came from Mats Palmgren some time ago.[1] He described a
text-overflow-end-offset property. My question at that time was if somebody
would ever want to have an offset of e.g. 75%.

So I have another idea: If we want to get rid of two-sided cropping, we
could define a text-overflow-clip property, which could have one of the
three values start, center or end with end as default.

>   Middle truncation:
>>> This …text.
>>>
>>> For start/end truncation text-overflow-min-width would just need to hold
>>> one value, while for middle truncation you may want to define the min.
>>> width of the start and end part separately.
>>>
>>> That seems like overkill, and would result in more cases where the text
>>> is unable to be truncated further. What then? Wouldn't it be better to keep
>>> truncating in the middle than to, what, overflow the box on the right
>>>
>>
>> No. The purpose is to keep the text readable (or at least identifyable)
>> as long as possible. If you think there's an easier way to define the
>> minimal width of truncated text, I'd like to hear your idea.
>>
>>
>> I would define the min value for the end only.
>>
>> 1. The UA would insert keep the many characters on the right, insert
>> ellipses to the left of those, and as many characters from the starting
>> character on, as could fit, to the left of all that.
>>
>> 2. If it could fit less than one on the left, then include one and reduce
>> the number of characters on the right.
>>
>> 3. If the width was small enough, it would eventually would just be the
>> one starting character plus the ellipse.
>>
>> 4. If the ellipse also didn't my fit, then it would be treated the same
>> as 'text-overflow: clip'.
>>
>
>> Thus, text-overflow-min-width:0 would be the default starting value,
>> which means the ellipsis would be at the end.
>>
>
> Sorry, I don't get these steps. Some examples (maybe with mockups) would
> help here.
>
>
> <span>MMMMMMMMMMMMMMMM.MMM</span>
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> width:15em;
> text-overflow-preserve-end:0; /* default value */
> }
>
> MMMMMMMMMMMMMM…
>
> ------------------
>
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> width:15em;
> *text-overflow-**preserve-end**:10em;*
> }
>
> MMMM…MMMMMM.MMM
>
> -------------------
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> *width:11em;*
> *text-overflow-**preserve-end**:10em;*
> }
>
> M…MMMMM.MMM
>
> -------------------
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> *width:8em;*
> *text-overflow-**preserve-end**:10em;*
> }
>
> M…MM.MMM
>
> -------------------
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> *width:4em;*
> *text-overflow-**preserve-end**:10em;*
> }
>
> M…MM
>
> -------------------
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> *width:2em;*
> *text-overflow-**preserve-end**:10em;*
> }
>
> M…
>
> -------------------
>
> span {
> font-family:monospace;
> white-space:nowrap;
> overflow:hidden;
> text-overflow:ellipsis;
> *width:1em;*
> *text-overflow-preserve-end:10em;*
> }
>
> M
>

Thanks, that clarifies your proposal. And I begin to like it. I also
proposed the property with 'preserve' in its name in my initial
proposal[2], though with this usage it makes actually more sense to use
'preserve' instead of 'min'.

As I suggested my wiki article at the beginning of this thread the
text-overflow property should be turned into a shorthand for the other
properties.
So when we take the points from above into account and add a property for
the clip string, it'd cover these longhand properties:

text-overflow-type = type of overflow clipping (clip, ellipsis, <string>)
text-overflow-clip = clip position (start, center, end)
text-overflow-preserve = number of characters (or length) to keep at the
end as long as there is enough space; just applies when
text-overflow-clipis set to
center; may take two values for start and end

The names may not be perfect yet, though their function should be clear.

Example:
div {
  text-overflow: ellipsis center 10ch;
}

=> Would show an ellipsis in the middle of the string and preserve 10
characters at the end of it as long as there is enough space for them.

How about that?

 Sebastian

 [1] https://bugzilla.mozilla.org/show_bug.cgi?id=740910#c3
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=741743