[thelist] counting rendered lines of text
David Kaufman
david at gigawatt.com
Thu Jun 14 14:56:01 CDT 2007
Hi Sam,
sbeam <sbeam at syxyz.net> wrote:
> Say you have a container of a fixed width with some text in it. Is
> there any way to count the number of lines in the text, as rendered?
>
> ie.
> <div id="wrapper" style="width: 300px;">
> Here is a bunch of text that may be short, may be very long, we don't
> know because it comes from user input.
> </div>
>
> Basically the design requires this fixed-size block for a list of
> preview items, but the request is to only show the first 4 lines, with
> an ellipsis and "more" link if needed. AFAIK this isn't possible, we
> can only count characters and words, right? which given the variation
> in font size and letter width is not reliable...
You mean like the book descriptions I did for the left column of
http://www.workman.com/?
We had the exact same requirement - these rotate randomly over several
thousand titles, so we had to come up with an algorithm to figure our
how many characters (on average) we could fit into 4 lines at that
column width, that font and that size (minus the "...More" link), and
clip the strings to that length. Taking care, of course, not to clip a
word in half... It was stupid but it works (most of the time).
I want to make it perfect, of course, but don't have time (yet). I
think the perfect solution is to (on the back-end, which is perl) use
TTF metrics tables to actually KNOW how wide the characters are, predict
where the text will wrap, and truncate the text at the exact right place
to make it fit perfectly.
That would be a new holy grail in web design: we already have "Pixel
Perfect". this would be "Point Perfect" (or "Print Perfect", since
"Word Perfect" is trademarked and "Typeset Perfect" just lacks...
something.)
-dave
PS. Please ignore the clipped-in-half third line of the titles in the
scroller -- I'm trying to fix that right now.
More information about the thelist
mailing list