CSS implementation woes, report

God knows, I like CSS. Implementations are another matter.

Now that NS4 is final and IE4 is getting there, I expected that we'd
soon be able to "put down our arms" of GIF-and-table hacks for basic
layout, browser-detect scripts, <font> "elements", etc. But it's not
so. I've had a rough two days trying to find a middle path between
the CSS implementations in NS4 and IE4b1, especially across
platforms. I can't.

After table-induced margins, perhaps the most common HTML typography
hacks on the Web are the elimination of "blank lines" between
would-be block-level elements, paragraph indentation, and leading. I
hoped to achieve these effects with standard markup and CSS in the
latest browsers. Here is a small GIF of a target rendering:

http://pdf.verso.com/test/ideal.GIF


Here's my failed attempt to arrive at this rendering in HTML/CSS:

http://pdf.verso.com/test/test.html


Finally, here are GIFs of the actual renderings of this HTML/CSS in
recent "CSS" browsers, across platforms. Note especially the
mild-to-gross inconsistencies between leading and inter-paragraph
spacing, and the mild-to-fatal rasterization discrepancies with the
popular cross-platform font Verdana, specified in both points and
pixels:

Netscape 4.0 for Windows:
http://pdf.verso.com/test/winns4.GIF

MSIE 4.0b1 for Windows:
http://pdf.verso.com/test/winie4.GIF

Netscape 4.0b5 for MacOS:
http://pdf.verso.com/test/macns4.GIF

MSIE 3.01 for MacOS:
http://pdf.verso.com/test/macie3.GIF


Regretfully, I conclude that it will be necessary to write
browser-detect scripts and serve up browser-specific stylesheets in
order to rely on CSS for the most common typographical effects.
Unless, of course, Netscape and Microsoft can agree on the precise
meaning of esoterica such as "margin", "line-height", "pixel", and
"point".

This is ridiculous. Do we need to use CSS-P to control vertical
whitespace? Or just keep making GIFs?

Before anybody explains that I shouldn't expect authors to have such
fine control over rendering, stop: I want this sort of thing for one
of my personal stylesheets.

Note: this stuff is not on a production server, and these materials
may change or become unavailable - make copies of anything you find
interesting.


________________________________________
Todd Fahrner
mailto:fahrner@pobox.com
http://www.verso.com/

The printed page transcends space and time. The printed page, the
infinitude of books, must be transcended. THE ELECTRO-LIBRARY.

--El Lissitzky, 1923

Received on Friday, 13 June 1997 21:38:15 UTC