[thelist] stopping text overflow in a div

[Steve Lewis]

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