{"id":2168,"date":"2011-09-27T16:42:52","date_gmt":"2011-09-27T23:42:52","guid":{"rendered":"http:\/\/www.eaf.net\/mvp\/?p=2168"},"modified":"2013-12-14T20:08:58","modified_gmt":"2013-12-15T04:08:58","slug":"justify-a-headline-with-css","status":"publish","type":"post","link":"https:\/\/www.eaf.net\/mvp\/2011\/justify-a-headline-with-css\/","title":{"rendered":"Justify a Headline With CSS"},"content":{"rendered":"

So you want your headline to run the width of the body text.<\/p>\n

That seems easy enough to do. Just use the text-align:justify<\/i> CSS property on your H1<\/i>. Like this, for instance: <\/p>\n

How to Justify a Headline With CSS<\/h2>\n

Ooooops!<\/i> \ud83d\ude2f What went wrong?!?! \ud83d\ude25<\/p>\n

Well, justification is used for multiple lines of text…with the last line being left-justified rather than stretched out like the others.<\/p>\n

A headline is…well…a single line. And it gets the same treatment as the last line of a block of text. Thus, no justification.<\/p>\n

So what to do to achieve a fully-justified headline?<\/b><\/p>\n

Ben Clay came up with a slick solution he christened Ben Justification<\/i>. I have tinkered with Ben’s work plus expanded it with a little SEO bonus.<\/p>\n

First, here’s the CSS:<\/p>\n

div.headline {\r\n  height: 30px;\r\n  display: block;\r\n  overflow: hidden;\r\n}\r\n\r\nh1.headline {\r\n  font-size: 20px;\r\n  text-align: justify;\r\n  width: 100%;\r\n  display: block;\r\n}\r\n\r\nspan.headline {\r\n  font-size: 1px;\r\n  word-spacing: 1000px;\r\n}\r\n<\/pre>\n
And then the HTML:<\/p>\n
<div class=\"headline\">\r\n<h1 class=\"headline\">\r\nHow to Justify a Headline With CSS\r\n<span class=\"headline\"> Tweak a single line into justifying <\/span>\r\n<\/h1>\r\n<\/div><\/pre>\n
Will it work this time? Well, let’s take out the line breaks in the above HTML so that’s all run together and we’ll see…<\/p>\n
\n
How to Justify a Headline With CSS Tweak a single line into justifying <\/span><\/h2>\n<\/div>\n
It worked!<\/i><\/p>\n
Besides allowing you to justify a single line of text (such as a headline), this includes a browser-hidden-but-seo-visible line (or more?) that says, in this case, “Tweak a single line into justifying”<\/i>!<\/p>\n
And all it takes to achieve this SEO-enhanced headline justification is only a div, an h1, and a span.<\/p>\n
I call this Ben Justification, Markified<\/b>.<\/p>\n
Pretty catchy, eh? \ud83d\ude44<\/p>\n
Confession: I only tested this in Firefox 6.0.2 and IE 7.<\/p>\n
Additional reading on the subject of CSS:<\/p>\n