PHP Programming - How to fit text to a <DIV>/<SPAN> of width X px / height Y px

Author

How to fit text to a <DIV>/<SPAN> of width X px / height Y px

rynato@gmail.com

2007-10-24, 7:02 pm

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

Jerry Stuckle

2007-10-24, 7:02 pm

rynato@gmail.com wrote:
> 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
>
>

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.
jstucklex@attglobal.net
==================

totalstranger

2007-10-29, 4:02 am

On or about 10/24/2007 12:08 PM, it came to pass that rynato@gmail.com
wrote:
> 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
>
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.style.height = e.scrollHeight + 'px';
}

Sponsored Links