H1 won't justify. My goal is to set the with of h1 to the width of the body text.
My Thoughts
The logical thought for this type of request is to use the text-align:justify; CSS property. The problem is that justify is used for multi-line text blocks, and in most cases the last line is left-justified rather than stretched across as crossfields would like. The page layout that crossfields is looking for is common in print layouts. But Web layouts don't provide the same amount of rigidity that print does. For example, even if crossfields played with the font size and tracking on the headline his readers might end up viewing the page with a larger font than he intended, and then the layout would be ruined.
Some other things crossfields could try:
- play with the font-size of the headline. If you made it just a little bigger it might fit better
- while CSS doesn't use the terms leading and tracking, you can still adjust the leading and tracking with the following CSS style properties:
- line-height to adjust the leading
- letter-spacing and word-spacing to adjust the tracking
- You could also use an image for your headline (although I don't recommend that) and use image replacement techniques to work with SEO and accessibility
More Resources
- CSS Style Property: text-align - use this property to justify blocks of text
- Indenting, Outdenting, Letter Spacing, Word Spacing, Line Height, White Space - CSS properties to control white space on Web pages
- tracking - definition
- kerning - definition
- CSS Style Property: font-size - use this property to adjust the size of the text
Do you have any ideas on how to justify one line of text?
Do you justify your headlines? If you do it in your Web pages, how do you do it? Do you have any recommendations for crossfields on how to justify the headline? If you can help crossfields, you can post your ideas in the comments here or reply to the message in the forum.
I disagree fundamentally with a 1-line justify, and the notion that web layout is at all like print– there are too many variables to try to limit a string of text to one line, let alone to get it justified.
As the author stated, the last line of a paragraph of justified text typically gets left-justified. A one line paragraph is also the last line, which is why you’re seeing it left justified.
A hack you may want to try is this: Assume that your main body text is in a 1×1 table cell. Your headline would be in a separate cell above the body cell. Split the cell using a WYSIWYG editor to equal the # of words in your headline (or if you’re a hand coder, set the cells below the header to colspan=#). You shouldn’t have to worry about sizing the table cells individually; modern browsers will do it for you. Then, left justify the content in those cells that fall left of middle, and right justify content in those cells to the right. Put one word of the headline into each cell. Magically the text lines up on the left and the right, and is relatively uniformly spaced.
Good luck.
Make the heading in Wordart in Publisher or in Photoshop so you can stretch it to whatever size you want, save it as a picture, and then insert the picture.
crossfields really ought to rethink the design. Even if this was a print layout, which it isn’t, there’s no way to justify the headings without distorting the type or the letter spacing and compromising readabilty. In a web layout, of course, you never actually know whether the heading is going to display on one line or not as users change their font size and window width – unless, as suggested, you change the text to a graphic.
Justified text was invented only to squeeze more characters into a newspaper column and save printing costs. Web styling doesn’t squeeze more in, it just adds gaps between the characters. Ugh!!
When newspapers were hand-typeset, the space between letters and words were individually adjusted so that the resulting text was more or less pleasing to the eye. Now, with type being automatically adjusted programmatically, space between individual letters is never adjusted, and all justification is done between words. If you try to fully justify a heading, this will look either awful or ridiculous, rarely good.
The main problem is, you cannot control the width of the page that I set my browser to. If I maximize my browser to use a full-screen, but the type is set to small, I have more pixels available to me than you might have allowed for. The resulting headline then has grossly large spaces between words. If I use very large text and/or a smaller browser window, the text will wrap anyway.
My recommendation is to simply left-justify a one-line heading and leave it at that.
I try to make my headlines match the text width by rewording headlines sometimes but I more often use ~ or ! symbols to help the headline fit the width or just center it using the font that fits the majority of headlines in the columns and use it as my .
Planning and flexibility work best.
Benita
OK, why don’t you use the CSS property word-spacing or letter-spacing and calculate it with testing so it would fill up the width of the h1 ( then you will have to alter it again if you change the headline text), but eh well this is life, nothing is perfect.
Hope this helps
If all else fails and you are using a solid background color, put a regular line of text before your header and after your header where the text is the same color as the background. Then, justify all three lines. It’s a hack but it gets you what you want without doing a lot of calculating with word-spacing or letter-spacing.
My suggestion more or less follows along the line of Tom Ennis, except I was going to suggest setting the copy for the heading followed by a word space then a string of cap MMMMM’s, then change their color to match the background. The string of MMM’s will force the readable line to break at this point. Indeed, it’s a hack – and it adds extra line space before the paragraph!
Jackew: the only problem with this idea is that search engines will see the hidden text and could consider it spam.
Plus, if someone highlights the headline text and pastes it into another window, the Ms will show up and look strange.
If you want to do it this way, it’s better to use a non-breaking space.
I thought this was clever…
http://www.evolutioncomputing.co.uk/technical-1001.html
Yes, its so clever, its an amazing trick. I think its the best solution till now. However, it didn’t work in IE7&8
Have you any suggestions? Thanks for the share!
My page is now updated and “Ben Justification” now works in IE7&8.
I used Dave’s table hack to get the newsletter Volume-Number heading I wanted. I’ll put spaces in to keep the tags from doing anything:
Volume 1
Number 1
The table hack isn’t overly SEO friendly.
I agree with Tom Ennis and Jackew. In order to eliminate any search engine problems simply add a span with 25 m’s on the end of the single line you want to justify using javascript (jQuery is easier). Search engines don’t execute the javascript. I am splitting a paragraph in half and want to justify the last line. This is what I will be doing. I will make the m-word the same colour as the background using a class and css. I may adjust the number of m’s and the size of the font as well.
Thanks for the suggestions which got me thinking of a solution.
h1:after
{
content:”";
display:inline-block;
width:100%;
}
@cam: I’m not really sure how this justifies the text in the content block it follows. Plus IE doesn’t support the :after style property, so this won’t work in a good percentage of browsers anyway.
Here’s a cross-browser method that will work to justify just one line of text in addition to justifying the last line of text in a paragraph if you wish:
http://kristinbradley.com/blog/2011/07/09/cross-browser-css-justify-last-line-of-text/
Forgot to mention that the above method is CSS only. No extra non-semantic html markup required.
I tinkered a little with Ben Justification:
Justify a Headline With CSS
Blog link above to cross-browser method is broken. Here is the updated link: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justified-block-list/
This is a CSS only method that works in IE6+ and modern browsers. It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method.. No extra non-semantic markup required for the effect.
@Kristin: thanks for the updated link.