February 27, 2021
Hot Topics:

Fix a Broken Page by Breaking the String

  • By Scott Nelson
  • Send Email »
  • More Articles »

This is such a common problem; I'm surprised that every language doesn't have a native library to deal with it. A web designer or client has data they want to present, and they don't want side scrolling, which is a perfectly understandable desire. The decision is made that data must fit within a certain width using a defined font size. The width is discussed for however long and a final decision is made...without ever checking the data to see if all of it fits. The initial page layout will include an example such as this:

Figure 1: A Standard Table with Scrolling

(Please pardon the lack of styling, I only have so much time to write these articles and I am a visual developer, not a visual designer, so thinking up something pretty takes me longer than coding something pretty that someone else came up with.)

As you see, everything lines up perfectly with the designer's representative text. The page is built and the stubs return similar dummy text and everything still works fine. Then, you start getting the live data and you see something like this:

Figure 2: Don't You Hate when This Happens?

You all know what happens next: More meetings with designers and/or clients. I've never met a developer who likes meetings, so the developer may not even be in these meetings, although he/she will be used as an absolute authority by the team lead that there is nothing that can be done (even if that isn't what they said). It is very common that the person that writes the CSS and the one who writes the dynamic page code are different people, with different perspectives and agreement that this cannot be fixed. Design changes are made to accommodate and the client and/or designer is dissatisfied. Not a happy ending. I know; I have been that team lead and both dynamic coder and CSS developer.

If It Is Broke, You Must Fix It

Then came the project where the client did me the ultimate favor. They refused to change the design. For those who don't know why that is a favor, I will elaborate. On almost every project, there is a time line, and missing that time line has consequences, ranging from very long hours, to unemployment, and several subtle degrees in between. The experienced developer know that once the end of the time line has been set, the only response to the question "can we do this?" that will allow them to avoid consequences is "no." The seasoned consultant who is hoping for another project will say "probably, but it will take a long time." The result of both these answers is that the client (who usually also has consequences of missed dates) will give in most of the time, and the times when they don't can generally be squeezed in with some extra hours if the seasoned developer wasn't seasoned enough to add in some extra time in estimating because these things always happen. Sometimes, that "no" or "will take a long time" is the absolute truth. These are the times when the client insists on doing it anyway; the developer gets to stretch themselves and either learn or create something new. For developers who do it because they like it, this is a good thing.

So, here you are faced with an immovable layout and an irresistible string. How can you fix this? The easy answer is to count characters and stick a space in at every n character to allow it to wrap. However, because character sizes vary, this can be less exact than you would think. It would be less visually pleasing or accurate to have a line break when it doesn't have to. So, instead, you can combine string parsing with CSS and create the opportunity for the line to break without the necessity for it.

The Simple Solution

First, you begin with the CSS. It looks like this:

.stringBreak_nbsp{font-size : 1px;letter-spacing : 0px;}

Although you would prefer that the font size be 0 pixels, some browsers ignore this as an invalid value, thus creating a full-sized space. If you were to manually break up your problem string, for example purposes, it would look like this:

This<span class="stringBreak_nbsp"> </span>
Is<span class="stringBreak_nbsp"> </span>
Some<span class="stringBreak_nbsp"> </span>
Real<span class="stringBreak_nbsp"> </span>
Important<span class="stringBreak_nbsp"> </span>
Database<span class="stringBreak_nbsp"> </span>

You use a space because of the different browser behaviors. If there were no space, some browsers won't allow the text to break. If you were to use the &nbsp; notation, you either get too large of a gap or a forced break, again depending on the browser. The result of this approach in all browsers would look like this:

Figure 3: Repairing Alignment with CSS

Page 1 of 3

This article was originally published on October 13, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date