When redesigning the site last JanuaryAnd no, I’m still not done., I wanted to make sure that the marginalia to the left of the main narrative floated clear of one another. In the old design, that hadn’t been the case — each margin note was just a span of text anchored to the main text but pushed off to the left, and I had to be careful to leave plenty of room before inserting the next margin note, or they’d quite simply overwrite each other. The old design thus mashed up form and content, which I hated, but I loved the ability to add margin notes more.
I had found a clever little solution that provided exactly the intended effect — a wide left margin for the main container, and then a combination of negative margins, float:left, and clear:left applied to the marginalia — and it worked in every major browser except for my own favorite, Safari. Sure, it would render, but links went all funny and text was no longer selectable. In short, it was unworkable, and I had to surrender to the old status quo.
Until today. I was reading Roger Johansson’s Safari wishlist, where he encounters the same problem:
After a little bit of fiddling with the CSS I found that adding
position:relativeto the rules for any floated elements that also have negative margins fixes the problem. It shouldn’t be necessary though, right?
No, Roger, it shouldn’t. Thanks to you, however, I can now write my marginalia with abandon, secure in the knowledge that should it get too verbose, my earlier scribblings will accomodate these later intrusionsUpdate: June 2 / Well, clearly there is now a problem with IE, but it’s way too late to figure out what all that is about. Tomorrow..
Update: June 6 Okay, that took way more effort than is healthy, but now I’ve cobbled together some extra CSS markup just for IE that gives it the same functionality. As a test, here are three margin comments placed very close together: Margin comment 1
, margin comment 2 and margin comment 3. See how they no longer overlap in IE? It took a display:block and some fancy margin adjustments to do the trick.
If you’re using Firefox or Safari, you’ll notice how hovering over a certain margin comment now highlights it and its context in the main narrative. Discrete but useful, is the idea. This particular feature doesn’t work with IE because that browser can’t recognized the :hover pseudo-class. None of this works for Netscape, BTW, but given my latest stats, nobody should be noticing any longer. (I’ve got a simplifed HTML/CSS example here, in case anyone is interested in taking this further.)
Mmm…There is now a problem with Firefox, too, unless that overlapping text at the end was ironically intended.
FWIW, I think your metatext at left concept is an excellent use of the medium. Is anybody else doing it? Your innovation, or did you take it from someone else?
I feel sure that metacommentary – whether your way, which is the best I’ve seen yet, or some other – will be a standard feature of future web publishing platforms. Mickey Kaus’ (ed: blah blah blah…) interjections were a clever way of doing it in straight text (if he’s the originator; I don’t know – he’s just the first user of that convention I know of). But it is starting to feel tired.
Bruce can you confirm that? My Firefoxes (Mac, PC) render it fine, but you have to refresh so that the new style sheets load.
I wrote about how I came to the marginalia idea here.
I haven’t seen anybody else use it, until a few weeks ago when I saw Ben Hammersley had some marginalia up on the right of his posts.
There is certainly more room for improvement. I’ve been thinking of using some of CSS’s counting abilities to maybe number them, but that would of course never work in IE. Or else color-coordinate comments with words in the main narrative.
And I know its terrible to have to hedge your comment like that, but no, I wasn’t being ironic. Not here either. Nor here.
Anyway, solving the IE problem is going to have to wait until after the weekend. I am off to Skärgården.
Sorry, my bad. There’s no overlapping at the default text size. The text only overlaps if you make it larger.
Hi. I found your entry on marginalia via Google. Thanks. I’m trying now to adapt it to my site.
There are thousands of texts published before 1900 that use marginalia extensively, and I’ve been looking for several years for a way to use CSS to achieve the same effect. I figured it could be done, but I don’t know enough CSS to do it myself. And it looks like we really had to wait for the more recent browsers to present it properly.
Your approach looks promising. I’m going to try it, and I have various issues to consider. In my site I have three columns, the middle one with a fluid width. Ideally, I’d like to incorporate marginalia, to appear in the right column. For integrity with the rest of the site, the left “column” can be empty, but I still would like to have a fluid “middle” column.
If I have to, I’ll do it more simply and then hope to work up to the full production. (It can take me months and years to see this sort of thing through, but marginalia have been an abiding interest of mine for awhile, and it’s nice to see this going another step further.)