The Web Typography project continues to proceed, albeit at a glacial pace. One of the reasons for the slow progress is guidelines such as this:
to distinguish verse quotations from surrounding prose, they should be [...] centered on the longest line.
An uncommon request, but it sounds straightforward enough. Don’t let that fool you. Centering a block is reasonably simple if you know how wide it is. Something like this normally does the job:
.verse {
width: 200px;
margin: 0 auto; }But if you don’t know how wide your block – perhaps you’re drawing text from a CMS – then things get tricky. The solution for Firefox and Safari proved relatively simple thanks to their understanding of display:table.
.verse {
display: table;
width: auto;
margin: 0 auto; }To get it to work with Internet Explorer (including IE7) proved more tricky. A solution was determined by the estimable Steve Marshall, who has been helping me move the site along a bit more quickly. Rather than bore you with the full explanation here, you can check it out at Indent or center verse quotations.
At this juncture I must also point out Steve’s new blog design. There’s some tasty typographical touches, especially evident when you turn on the baselines. Check out that vertical motion! The fleurons marking paragraphs are another nice touch.
Update. In the solution we worked out for Internet Explorer, we suggested that the IE-specific rules should be placed in a separate style sheet and called in using a conditional comment such as this:
<!-[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-lte-7.css" />
<![endif]->My current thinking is that conditional comments are the right way to feed workaround style sheets to Internet Explorer. Jens Meiert on the other hand would beg to differ. His main beef is that conditional comments are a proprietary solution and as such break the main tenet of web standards. He also claims, less reasonably, that providing CSS workarounds in this manner is inherently unmaintainable when working in a team, even when compared to using CSS hacks. I don’t buy that argument at all, but a lot depends on your team’s set up and your reliance upon separate style sheets for IE. As with all hacks, try to address the root problem first, and use them sparingly if you want to avoid maintenance or cross-team development nightmares. If you have your own argument over conditional comment, I recommend you continue the discussion on Jens’s site.
pauldwaite wrote:
Woo hoo! Glad to see separate IE stylesheets via conditional comments being used. Especially as the naming scheme is kinda similar to the one I’ve been using.
Rich wrote:
Yeah, I think they are extremely useful and the sensible approach. Jens Meiert would beg to differ though – he has some valid points, especially regarding maintainability.
pauldwaite wrote:
Excellent, I was hoping someone would come up with some drawbacks – I’ve been so enamoured with the technique, I knew I wouldn’t spot them.
Having said that, I think Jens has rather overstated his two points, but it’s good to have the debate.
Also great to see progress on Web Typography. I, for one, am not too bothered about every chapter containing techniques that work in Internet Explorer. It’s great to see, but the application of the principles of the web in general are more interesting to me than workarounds to browser bugs.
Seb wrote:
On a generic note, I just wanted to express my utter support for the Web Typography project. Even if it’s going a little slowly, you and Steve are doing a fantastic job of translating Bringhurst’s work for the uneducated masses.
Keep it up!
Rich wrote:
Thanks Seb – that’s much appreciated.
robert wrote:
The only practical solution to seperate the CSS for IE is the conditional comments hack ;-)
kb wrote:
Excellent. This is what I seek. Works in MSIE6/7, FF2, Opera9!
Sven Fischer wrote:
Hi,
verry thanks for this really good css. It works phantastic – fortunately also in the IE6 an IE7 too ;-)
Greets from Germany
Sven Fischer