While redesigning one of my web sites, I started using CSS to adjust the line height of text objects. It occurred to me that part of the problem with the different browser engines might be that they each use a different "default" line spacing. Then I thought: what if we specify a line height for text; would that override the browser's default and perhaps give us a better, more consistent spacing across more browser platforms?
Some testing was in order. First, in WB I created a new CSS style and gave it a CustomStyle of line-height:16px.
Next, I created a test page consisting of three columns of text.
- Column 1 - A single large text object with our CSS style applied
- Column 2 - The same single text object with NO CSS
- Column 3 - The same text with each paragraph in a separate text object, all with CSS
At the bottom of each column is a horizontal line positioned one pixel below the baseline of the last line of text.
The goal of the test: by adding a CSS line-height specification, could we keep the text within the vertical space allotted by our design regardless of the browser used? In other words, can we keep the last line of text from crossing our horizontal line?
After running the page through browsershots.org, the answer appears to be: usually.
First of all, the good news. Depending on the operating system, rendering of WB pages can be very good. For example, all of the browsers under Windows did a good to excellent job of keeping the text within bounds. There was virtually no difference between the columns and the CSS settings made no difference under IE, Firefox, Safari, and Chrome.
However, when browsers under Mac's OSX 10, Ubuntu, FreeBSD, and others came into play, the CSS made quite a bit of difference.
For example, Safari 3.2.3 under Mac OSX 10.5 rendered both CSS columns (one single text object vs. separate text objects) the same while the block with no CSS came up short.
Under FreeBSD, Konqueror 3.5 had problems with the test page. Column one with CSS ran past the end of our boundary slightly. Column two with no CSS was the biggest offender, going twice as far past the boundary. But column three with CSS stayed within the boundary while sacrificing spacing between paragraphs. This latter condition appeared to be common with most of the fringe browsers. However, the text did NOT overlap and was completely readable.
So, the bottom line is that by applying the line-height style to your custom CSS, most (but not all) of the spacing problems with text rendering between browsers can be minimized. The result is not perfect--and probably never will be. But you'll sleep better at night knowing that someone viewing your site using CrackerJack 2.1.2 under the Cardboard 8.9 operating system will see pretty much what you (and everyone else) sees.
That should be worth something.
