Clagnut

Menu

Centering text on the longest line

§ Typography · CSS techniques

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.