Long Text and Ellipsis about ui_alchemy-rails HOT 6 CLOSED

http://polarblau.github.com/smarttruncation/

https://github.com/STRML/jquery.textFit

http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

http://dotdotdot.frebsite.nl/

from ui_alchemy-rails.

are you sure we need this? they all feel a bit heavyweight when we could just use modernizr

like in this gist https://gist.github.com/564334

from ui_alchemy-rails.

The issue with this is two fold:

• older browsers do not support this CSS
• For multi-line blocks, the CSS directives do not properly ellipsis

On Thu, Nov 29, 2012 at 5:57 AM, Andy Fitzsimon [email protected]:

are you sure we need this? they all feel a bit heavyweight when we could
just use modernizr

like in this gist https://gist.github.com/564334

—
Reply to this email directly or view it on GitHubhttps://github.com/ui-alchemy/alchemy/issues/62#issuecomment-10842847.

Go Pack and War Eagle,
Eric D. Helms

Ph.D. Student - North Carolina State University

from ui_alchemy-rails.

I agree. the low-fi nojs way I have done before would be to manually truncate our output based on an max char value

the html
<label>long long label with a<span>really long name</span></label>

and the CSS

label span{display: none}
label:hover span{ display: inline;}
label:after {content:"..."}
label:hover:after{content:""}

from ui_alchemy-rails.

@andyfitz I don't think this is good idea, since we use translations. The parts length will vary.

from ui_alchemy-rails.

You're part right, character length only ever has the same physical width with monospaced fonts and even then, translation can load differently sized monospaced fonts for different glyph styles.

I'm thinking of JS fallbacks for this behaviour and truncating at 12 - 22 characters will be within 100 pixels regardless of string type or translation. It would solve the problem of very large strings breaking out layout and still being interactively visible.

Yes the cop-out means we'll have various ellipsis ending around about the same area but not exactly the end of line.

For a js enhancement we could remove the span tags (which would remove the effect) and then use a polyfill or something similar to get the ellipsis happening at exactly the end of the border box.

Just thrashing about with ideas here.

from ui_alchemy-rails.