Repeat visitors (welcome back, both of you!) may notice a few things have been pushed about here on the site. I’ve been chipping away at this design for the better part of two months’ worth of spare time. So you’ll indulge me a bit of discussion. There’s just no way around it, boring as they may be, these sorts of posts are a necessary evil.
Less strict / Citation needed
I’ve decided to switch from XHTML to HTML 5. I was initially hesitant. HTML 5 felt like a cop-out. I’d spent all that time being strict, poring over validator messages. Was I willing to throw that time and effort away?
I guess I had never really understood why I was using XHTML vs. HTML. I suppose it was just because that’s what everyone else was using, and they probably knew better than me. Also, it was a badge of honor to know that my site validated against a stricter doctype.
I’ve lost track of the address, as it’s not on the WHATWG site as far as I can tell, but a little while back I read an article about why HTML 5 was being constructed. It made sense. The gist was that XHTML, particularly XHTML 2, was ill-suited to the purposes of many websites.
The real reason though, the real tipping point, was something incredibly small. One tag, actually. A tag most folks don’t even use regularly: <cite>. In contrast to the W3C, HTML 5 has a very clear definition for the use of <cite>. It’s for titles, and titles only. This is exactly what I wanted. The word “cite” might make sense for the source of quotes, but it’s a stylistic nightmare trying to determine which one gets italicized and which one doesn’t. So, that was it. I was going with the spec that had a better description of <cite>.
pre-cisely
Following the guidelines established in Richard Rutter’s A List Apart article on the subject I’ve set the font sizes in ems and done my best to maintain a steady vertical rhythm.1. Keeping the base font size as whatever the browser uses as a default — generally 16px — I calculated the desired size for text-containing elements such as <p>, <h1>, and the like. I tried not to set the font-size on any <div> containers. This kept me with a standard 16px em from which I could determine margins and paddings.
1 Within reasonable limits of my sanity. Certain elements just proved unwilling to concede at which point I ever so eloquently said “Fuck it! It’s good enough.” At least the text you read will be pleasantly configured.
Then I got to the <pre> element and things started acting funny. In one of my test cases I threw a bit of <code> inside a <pre> the way I would expect to do were I sharing some snippet. When I loaded this test in Firefox I was curious to see the text rendered quite a bit smaller than I had expected.
I didn’t set a font-family nor a font-size on the <pre> because I didn’t really see the need. It was just a box that honored line-breaks. I’d be filling it with <code> elements almost all of the time. I’d already set a font-family on those. Besides, if I changed the size that I wouldn’t be working from the standard 16px size and I’d have to refigure my margins and paddings. Using child selectors, I’ve set the size of <code> elements only if they are children of <pre> elements. It looks a bit like this:
pre code {
font-size: 0.875em; /* 16px x 0.875em = 14px */
}
Only, in Firefox, instead of 14px I was getting something in the neighborhood of 11px. After some consternation I realized that Firefox (and likely other browsers) sets up <pre> elements as fixed-width elements. By default, these have a font set at 13px. Sure enough, when I put plain ol’ text in there it came out at 13px.
I wanted a solution that didn’t involve setting a font-size on <pre> elements. After puttering about for a brief while, I came up with one.
pre {
font-family: inherit;
}
This little line caused the <pre> block to pick up whatever is set by its parent, either a <div> or the <body>. Text inside won’t be fixed width by default nor will it be 13px unless told explicitly to be so.
Relatively speaking
One of my favorite additions to this version of the site is the sidenote, seen above. In fact, that note is one of the major driving forces behind the redesign. I’d just become interested in adding notes of some kind to my writing. I’m not entirely happy with the idea of footnotes in HTML. They work in print because a print page is designed with a specific page size in mind. But where to put them at the bottom of an ever changing landscape? On a page that might have any number of disparate posts?
So, this site uses sidenotes. They’re floated off to the left using negative margins. Negative margins feel pretty solid to me. I’ve had the heebie-jeebies about absolute positioning for years. Absolute positioning, I feel, is best left to scripting. Notes are styled like so2:
2 Oh lordy! It looks so crazy here in public. I swear these numbers seemed reasonable at the time.
.note {
float: left;
font-size: 0.75em;
margin-left: -15.083em;
text-align: right;
text-indent: 0;
width: 13.3333em;
}Care to guess which major browser choked here?
Figure 1 Internet Explorer 6 with position: relative (left) and without (right).
What you see above is a series of screenshots of a very early version of the site on Internet Explorer 6. The shot on the left is what the note is supposed to look like. The shot on the right is what I actually got using the code above. The text of the note just dropped off the face of the earth in IE 6. Increasing or decreasing the text size didn’t do anything. Nor did altering the size of the browser window. It was just gone. Except for the index.
The note indices are relatively positioned a little bit above the baseline. I’m not using <sup> tags because those are presentational and discouraged. When I saw that little one sitting there amongst a missing note it didn’t take long to figure out that relatively positioned elements showed up just fine. Everything else was swept away.
The solution, of course, was simply to add position: relative; to the note styles. Notes are now floated left, and positioned relatively to themselves. But since we haven’t added any actually positioning, they don’t move.
.note {
float: left;
position: relative;
font-size: 0.75em;
margin-left: -15.083em;
text-align: right;
text-indent: 0;
width: 13.3333em;
}In summation
So, that’s the obligatory redesign post. I reserve the right to continue to discuss CSS and HTML, but I’ll try my darnedest to find some kind of hook, as I tried to do here. Don’t worry, I’ll get back to the cross stitchery as soon as feasible.
