[thelist] stopping text overflow in a div
Steve Lewis
nepolon at worlddomination.net
Mon Dec 13 15:08:12 CST 2004
getafixx at getafixx.com wrote:
> I am trying to figure out a way of figuring out if a div with formatted (or
> even unformatted) text has too much text for the div size and the current
> font size / formatting.
[...]
> I assume that I will be reading said text from a database, and I assume that
> I could put in some sort of page markers (strange characters) into the text,
> to be parsed as I read, but there must be some way of doing this without too
> much human intervention.
I think we need to touch on a few issues, just to get them out of the way.
First, I have to note: you are assigning a single id to many divs in
the same page. That is bad. You probably already know this so I will
move on to the stylesheet.
Here is the divs' 411:
#flow_control
{
float: left;
border: 2px solid #FFFFFF;
width:400px;
height:100px;
margin:10px;
/* font stuff */
font-size: 9pt;
font-style: normal;
font-family: Arial, Helvetica,sans-serif;
color: #FFFFFF; /*#E1E1e1;#E2FEBC; text-align:left;*/
text-align:left;
}
Second, I will note next that you are using a fixed font size in
points. Points are not a natural screen sizing mechanism. Pixels are
generally preferred.
Thirdly, by locking down the font size you are making it more
difficult for some folks to read your text. Using relative sizing is
generally better.
Fourth, (and now we really get into the answer) by locking the size of
the div to fixed pixel sizes you are making this problem more difficult.
The real challenge here is the design. The design is not very web
friendly. You cannot absolutely control the display of your dynamic
content, and attempts to do so will be frustrating. This could be
made easier if you did not lock down the size of the box height and
instead worked toward a desired height, so if your text doesn't fit
well, the design will not get in the way of the content.
The better way to do this, it seems to me, would be to increase the
height and width of the box and make other design changes to improve
usability and accessibility. When looking for page breaks, always try
to break at the end of a paragraph. If you break in the middle of a
sentence you will destroy readability. Breaking in the midst of a
paragraph is similar if less dramatic.
Given the design you have, your best bet is to estimate how many
characters you can fit in the box, then work backwards looking for
either a word break, or a character break. This depends on the font
but a good test could be a continuous stream of the character 'w'
which is usually one of the wider characters in most fonts. Since you
are using a fixed font size you can place more trust this measurement,
but even then, I expect it to fail in some cases.
> I could put in some sort of page markers (strange characters) into the text
I might recommend something along the lines of "<page-break />".
When the text is inserted/updated in(to) the DB you should perform the
box-breaking task before insert. (Remember: Perform computationally
complex tasks infrequently. Editing happens infrequently and viewing
happens frequently.)
HTH,
Steve Lewis
More information about the thelist
mailing list