licentious radio

Sunday, May 25, 2003
[9:22:49 PM]

Further adventures of ....

For those of you just tuning in, licentious radio's NO JUSTIFICATION in HTML campaign is sweeping the web.

Why? Because justifying text without hyphenation typically leaves uneven. gaping holes between words, where a single, small space should be. Even though the right edge is nicely even, the gaping holes and running rivers (a hole at about the same place in several lines) make reading difficult. If you intend for people to read the text on your website, making it harder to read than normal is a bad idea.

Of course we can't say X without pondering the opposite of X. When could you justify text? Newspapers get away with it because of hyphenation and narrow columns. We postulate that with sufficiently narrow columns, the eye doesn't scan along the line as much, so irregular and large spaces between words wouldn't be such a big problem.

Not content to leave well-enough alone, we had to hack. Putting soft hyphens () in text is easy. Modern browsers will at least ignore the  -- we thought. Sigh. There's no end to the blundering of browsers. (We're complaining, not accusing. Browsers are hard and making browsers fast was harder, and all of this would have been fixed long since had the development pace kept up.)

WinIE 4+ will use  to hyphenate. Mozilla ignores them gracefully. Alas, MacIE 5x (on one Mac with OS X, anyway) displays a U with some queer accent for every .

Not content to leave bad enough alone, we hacked onward: write a script in Javascript to go through and remove the soft hyphen characters. (We had thought Javascript was finally stable enough to be useful....) Alas. Our simple-minded hack freaked MacIE out completely -- throwing margins off and twisting the font-family. (Why in the world didn't they test this?)

Reluctantly, we abandon the concept. (The coolest bit was we got to align headings to the right. You don't get to do that every day.)

Fact is, WinIE's hyphenation was pretty bad -- not hyphenating often enough -- and our view is that hyphens should hang -- be placed just beyond the right margin -- which WinIE doesn't do.

This design had very short lines... we might try again in a design where the lines are a more normal length and the server is smart enough only to give s to WinIE browsers.

[4:58:03 PM]
Tantek (Thursday) said it's too easy in CSS to wind up with columns of text overlapping each other. That's for sure. Rather a usability problem when that happens.

Using tables for page layout, the problem is a column stretching widely.

Example -- you put an image in a column that for one reason or another is bigger than the column woulda/shoulda been. With tables, the column becomes too wide. With CSS, the image blots out whatever is in the next column.

Many people keep designing as if they know how wide every reader's browser window is, and how big the fonts are.

It would sure be convenient if HTML and CSS made it *easy* to get things right, rather than making it so easy to get things wrong.

Even min-width and max-width -- where supported -- don't seem to be good enough. I'd want to be able to specify max-width as 100% of the browser window for narrow windows, and also as 33 ems for browser windows that are open wide.

Another problem is the way float works. Commonly, you get text columns that are much too wide or much too narrow, depending on the width of the browser window. Tables make it pretty easy to make a page that is wider than the window, while float makes it very difficult. In some cases it's fine if a third column of text or ads is completely off the right side of the window.

Rules: A column of text should never be wider than the window. A column of text should never be wider than some number of characters -- 33 ems is pretty good. A column of text should never be wider than a certain absolute distance -- four or five inches, maybe. For narrow windows, you might want the first column to be no more than 75% of the window, so the second column is visible. That is, if you have a narrow window, you may well want the columns to go off the right edge of the window (for left-to-right languages).

A technical consideration is that if you have nested divs, the width of the outer div doesn't constrain the width of the inner divs -- the way tables would.

Another technical consideration is that floating several columns to the left only works for the width of the window. Float is pretty convenient, until you would rather have a column be off the screen than below the other columns.

Float-left hack: For the right column, set a containing div to one pixel wide, then the contained div with the content can be any width -- it will go off the window to the right. But there has to be one pixel left going across. (The first trick is use float: left for all columns.)