Re: The Prellipsis

On 13/2/16 10:46, Connor Egbert wrote:
> To all who have a say in CSS standards:
>
> Often us developers of the web come across a simple problem: Our line of
> text is too long to fit in its space.
>
> The solution is a simple yet elegant truncate + ellipsis combo.
> Everything fits and users come to the obvious conclusion that there is
> more if they care to dig in.
>
> Lovely.
>
> However, many times the most important part of a line of text is not
> what is at the beginning, but what is at the end. A file path, for
> example. It is not very important that the file exists in
> C://Users/Documents/…
>
> In most cases the user would rather know that the file path is
> .../Pictures/CoolPicOfSpace.jpg
>
> “Simple” we say. Let’s just truncate from the front in throw in our
> beloved triple dots. Easy.
>
> False.

Something like this works pretty nicely in Firefox, AFAICS:

<style>
   .filepath {
     width:15em;
     border:1px solid red;
     text-overflow:ellipsis;
     direction:rtl;
     overflow:hidden;
     white-space:pre;
   }
   .filepath>span {
     direction:ltr;
   }
</style>
<div class=filepath>
   C://Users/Documents/Pictures/CoolPicOfSpace.jpg
</div>

I notice that in Safari and Chrome, it behaves differently: it truncates 
the text at the end, even though it puts an ellipsis at the left. IMO, 
that's a bug in their implementations.

JK

Received on Wednesday, 24 February 2016 18:51:40 UTC