In the last years, it has been trendy to use contrast background in the headings. For example, it looks like this:



Though the task looks pretty simple, it is not: if you think that all you need is to add some padding, that doesn't work because the indent is added only in the beginning and in the end of the text, and the text wrap is ignored.



The best solution was found some time ago by akella, who added border for the parent element. But that solution isn't perfect as there is no indent in the end of the first line (where the text wraps). The solutions sent to my Twitter account by other guys have the same drawback: you have to specify exactly where the text wraps.

In the simplest case, when you need to add a simple indent, the solution proved to be extremely primitive: There is a "parasitic" CSS property that web coders are used to get rid of: outline. Its peculiarity is that all web browsers (at least those I tested: Safari 4, Firefox 3.5, Opera 10, IE8) the outline exactly matches the text element's edges. Here's a line of code that meets all our needs:

span.uniform-bg {
	outline: red solid 0.3em;
}

However, there's a fly in the ointment, for which Firefox is to blame. First, sometimes it draws the outline with a slight gap between it and the text border; secondly, it draws it between the lines, partly covering the text:



The first problem can be solved easily: just "pull in" the outline using the CSS property outline-offset (or, specially for Firefox, -moz-outline-offset). To solve the second one, add one more wrapper with position:relative to place the text above the outline.

Here's the final solution:

<style type="text/css">
	.uniform-bg {
		background:red;
		position:relative;
		outline: red solid 0.3em;
		-moz-outline-offset:-0.04em;
	}

	.uniform-bg span {
		position:relative;
	}
</style>
<h2><span class="uniform-bg"><span>Hello everyone</span></span></h2>

It doesn't work in IE 6 and 7 as they don't support the outline property. However, all we need is to get nice-looking results, so we can just combine it with akella's method and create an almost perfect solution.

One of my readers, Roman, pointed out the glitch in drawing the background in the word wrap location, which occurs in IE 6 and 7. Nonetheless, adding just a little touch makes quite a good solution (see the example).

Actually, I find this solution imperfect due to the limitations on line height (make the height big enough, and you get issues between the lines) and on the outline thickness (if you make the outline too thick, it looks very ugly). I guess my readers could help me find a more flexible solution; the coolest thing that I can think about is to do the same trick with a background image.

Method Two

Roman also offered another solution for the problem, which is based on shifting three layers against each other: For example, if the first indent is x, then the second layer is shifted by 2x (to the right), and the third one, by –x (to the left):



The method can be somewhat simplified if you remove one layer and add a left border to the container. This solution is more flexible than that with outline (which, by the way, has some unwanted side effects in Opera). Alas, when I wanted to use it as a basis for the background-image solution, I faced a problem: the background flows to the next line at word wrap, so that in the second line, the background starts in the same location it ends in the first line:



Thanks

Don't forget to Subscribe to our RSS feed and Follow us on Twitter - for recent updates.

Share this post if you like it