So today I not/iced that someone at the office has been printing out the calendar pages and taking notes on them. I never use paper, but I've long since gotten used to the fact that other people do; but this was just incredibly bothersome because it's extra wasteful: there's that menu on the left, and the text all comes out as gray on white, and is pretty unreadable.

I know that if you've drunk the CSS kool-aid, it's possible to make things print sanely: change colors, leave certain items off the page, etc. So I started poking around with using CSS on the DNA pages. <LJ-CUT TEXT="It did not go well.">

I thought I'd start off with something simple: instead of using tables to do my headings, like

I should be able to just do

<H1>Contacting Us</H1>

and have it look the same once an appropriate style sheet was in place, right? "Here is how we render H1."

Wrong. As far as I can tell, that can't be done with CSS. The closest you can get is this:

Contacting Us

with the box going all the way to the edges of the page. As far as I can tell, there's no way to tell the size of the box to be based on the size of the text. You can tell it to be exactly 30% of the page width -- but that's not the same. The only way to do it is to wrap the H1 inside a TABLE!

So I can replace my table-based layout with... table-based layout?

I have learned (or in some cases reconfirmed) a few other things about CSS, too:

• Web designers, and especially blogging web designers, are self-important fuckheads. This might be tolerable if they were right, but by and large they're also dumbasses.

• Everybody who fancies themself a CSS expert uses pixel-based layout for everything. Their shining examples of elegance always include boxes that are exactly 400 pixels wide, and that specify font sizes in pixels (not even points!) This is better than auto-flowing auto-sizing table layout... why?

• Most of the time, these examples look like ass on my screen, presumably because I'm not running Windows and don't have the same fonts that they do. Or maybe because they're all using 50-inch monitors and sit with their noses on the glass, the only way those miniscule fonts could actually look readable to someone.

• They never measure in "em" units, so that their boxes might have at least some relation to the size of the text inside them.

• This may or may not be because "em" doesn't work consistently across various browsers.

• Oh, "em", a term from the world of physical typesetting, is supposed to be the width of a capital letter M, and used only for horizontal measure; the vertical measures are ascent, descent, leading, and sometimes "ex" (height of a lower case "x".) CSS defines "em" as being the height of an M instead (making it synonymous with "ascent"), which makes it generally about twice as big as you'd expect if you know anything about this stuff. Nice. That's like redefining "centimeter" because it seemed more convenient at the time. (Except sillier, since "em" is an older unit of measure than centimeter is.)

Really what I'd like to do is just leave my pages as-is, but insert something that says, "oh, if you're printing, change all the colors like so, and leave the menu out." But I'm not sure that's possible without going whole-hog into the CSS madness, or at least starting to tumble down that slippery slope.

And a slippery slope it is. Here's a great example: once you start doing anything with CSS font sizes, you can't ever use the FONT tag again.

Have you noticed that when you post to LiveJournal and do <FONT SIZE="-1">, the font actually gets bigger? Feel the love as the Mozilla people mark my bug report Resolved Invalid. This is because the FONT tag, when used to request a font "one tick smaller than the current size" has no knowlege of what the current CSS font size is -- and they claim this is the right and sensible thing! Like, HTML thinks the font size is "3" and then it sets it to "2", instead of noting that the font size is "14px" and then setting it to "12px". You get screwed if, as is often the case with LiveJournal, your "2" font is still bigger than whatever the font specified in the style sheet is.

Let me say that again, because I still can't really fathom it: they think that the current behavior, of asking for a smaller font and getting a bigger font, is the correct behavior.

This kind of crap, among other reasons, is why web sites should never, ever specify the font family or size of their default text. Just use the default, always. Web browsers let users pick their default font families and sizes for a reason. Are you listening, brad?

Update: scroll down...