Reflowing

Last month I rejiggered the publishing system here, making the text larger and wider and hyphenated and justified. Now more: a bit of cosmetic change, a significant stylesheet simplification, and a substantial gain in robustness. Plus, a lesson re-learned about the Web.

The Visible Effect · If you don’t notice the changes, that’s fine; I’m tinkering at the margins. If it all looks a little lighter, that’s even better; I removed some bold-face here and some sidebar clutter there. The big deal is that if you make the window you’re currently looking at really wide, you shouldn’t see any surprises. This blog used to look lousy in wide windows, which are increasingly common.

Also, the CSS that constructs the main column and sidebar is smaller and more modern and nicer; the first rework since the original 2003 rush job. That eight-year-old code was not terrible at the time it was written, but the state of the art, and what you can get away with, has moved way on since then.

Recent History · The commentary on my recent changes has been mostly negative. I’ve addressed some of the pain points, like the photo captions that turned into blocky squares and the comments that jammed right up against the edges of their shaded boxes. But still, most people who bother to comment seem to be in the ragged-right camp.

The justified column has still been pleasing my eye, but I realized that might be its mitigation of the ugliness when the previous CSS reacted poorly to any window much over a thousand pixels wide. So I decided to fix that first.

Why Now? · I’m extra-busy working mostly on Google IO 2011 and I don’t have much time for the contemplation of serious chunks of software. This project has the virtue that I can do it in bits and pieces and I don’t have to learn anything new.

Compatibility Nits · So far, there aren’t many, which is as it should be with basic layout wrangling in 2011. Firefox has some quirks about default margins that aren’t shared by either Safari or Chrome. But that’s about it; haven’t even had to do any extra work for IE. When I think of the egregious butchery it took to get the 2003 version limping along in the then-leading browsers, I see real progress and I smile.

How It’s Done · I’m not claiming the CSS technique here is optimal or even good. I didn’t plan hard or think deep, just tinkered till I got something that looked the way I wanted. But it matters that this is how the Web works; in 2011, amateurs can still achieve pleasing results without Application Architecture or Algorithm Analysis. On so many levels, the Web bends where other technologies break.

I am not by any measure a CSS wizard; one of those would have found a way to do what I’ve done with fewer <div>’s. In particular, every place there’s anything measured in px (which is most of them), that should really be in em or something else with typographical integrity.

All that granted, here’s how it works. The red labels are id= values, thus selected in the CSS with #body and #banner and so on. Of course, the real CSS is immensely larger, in order to a bunch of coloring and shading and indenting. These are just the parts that do the layout.

My production CSS contains amusing “junk DNA”, leftover constructs for styling code that hasn’t been generated since 2006 or whenever. I bet there’s lots of that out there; It’s harder than you’d think to work through a typical publishing system and convince yourself that some id= or class= value is no longer ever used.

Next Steps · I may experiment with going back to ragged right in this context, although the pages currently please my eye. But I’m pretty sure, once I get through Google IO, I’m going to allow myself the chancy fun of picking a new typeface.

---

---

Contributions

---