How to fit text to a
/ of width X px / height Y px

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have a <span> of width X px and height Y px. I want to read the text
of an article, which is stored in a mySQL table, and pass to that
<span> only just enough text to fit in it, along with a 'read more'
hyperlink which will take the user to the full article. I do not want
any overflow scroll bars to show. The font-size is set by external
stylesheet in em's.

How can I determine how much text is enough?

Approaches I've thought of:

-just set a semi-arbitrary number of characters, rounded to the
nearest full word, which allows the text to fit in the given space in
all browsers. Of course this approach won't take into account if the
user sets his browser's font size larger than usual.

-establish a table with em values for each character in a given font.
Calculate the width of each line of text by adding up the em values,
character by character, including letter spacing. Convert to pixels.
Compare to the allowed pixel width of each line. Do the same for
height, using line height instead of character width. Sounds like a
lot of work, though!

I've googled endlessly and haven't come up with very many ideas on how
to work this through...

anyone have any bright ideas? thx in adv

Re: How to fit text to a
/ of width X px / height Y px wrote:
Quoted text here. Click to load it

You can't.  For that to work, you would have to control the font size on  
the user's browser.  And you can't do that with PHP.  For instance, I'm  
getting old, so when I use a high-res monitor, I am often using a larger  
font size than the default - which on Firefox also overrides any font  
size you set.

Better would be to just pick a certain number of characters and let the  
span adjust to fit them.

Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.

Re: How to fit text to a
/ of width X px / height Y px

On or about 10/24/2007 12:08 PM, it came to pass that  
Quoted text here. Click to load it
Not in PHP but with Javascript on the client sidte if that's allowed on  
your page
function TextResize(el)
var e = document.getElementById(el)
if (e.scrollHeight > e.clientHeight) = e.scrollHeight + 'px';

Site Timeline