AjaxLine

One of web-design fashionable trends of last years is designing the heading with contrast background. For instance, in this way:

Ex facte, the simple task is solved not so easy: the first thought "to add padding" faces the problem adding an indent solely at the beginning and at the end of the text skipping hyphenations:

The closest to have solved the problem was akella having added border of the parent element. Though the problem wasn`t 100% solved: at the end of the first line (place where words are carried over) all the same there is no indent. The other guys solutions which were sent to my twitter were given to the same problem: it`s necessary to point exactly the line tearing place.

In the easiest case when one needs to add a short indent the solution turned up to be painfully simple. There is one "parasitic" CSS-feature, of which the coders get rid, it is the outline feature. Its peculiarity is that in all browsers (at least in those which I have checked: Safari 4, Firefox 3.5, Opera 10, IE8) counter outline exactly repeats the borders of text element. Actually this code line completely solves our problem:

It wouldn`t do without a blot on the landscape: in this case the one to blame was Firefox. Firstly, sometimes it draws a counter with a short indent from the text borders, secondly, draws it between the lines overlapping the text itself:

The first problem is solved rather simply: it`s enough to "pull in" a little a counter with the help of CSS-feature outline-offset (whether -moz-outline-offset exclusively for Firefox), the second one by adding one more cover with position:relative in order to raise the text above the counter.

The concluding solution looks like this:

It doesn`t work in IE6-7, the outline-feature isn`t supported. But as we face the decorative task solely, we can combine it with the akella solution and get almost the perfect solution.

UPD: the Roman reader pointed out the bug in drawing the background in the line tearing place in IE6-7. some grinding and we`ll get quite passable solution (updated the example).

This mode doesn`t fit me per se as there are limits for the line height (if the values are big the problems appear among the lines) and for the counter width (too wide counter looks very homely). I suggest the readers to think with me about more flexible solution and also - a real toughness - to clinch the same deal with a background picture.

The second way

The same reader Roman suggested one more way to solve the task. It is based on shifting three layers relatively one to another: for instance, if an indent is equal x, than the second layer shifts 2x right, and the third shifts x left:

It can be simplified a little, taking away one layer and adding left border of the container. The mode is more flexible than the previous with outline (which as it turned out doesn`t have a liking for Opera) . I wanted to make a solution with a background picture on its base but I faced a problem: the background shifts as the lines are carried over, that is on the second line the background begins in the same place where it finishes on the first one:

About the author

This article was written by Sergey Chikuyonok front-end developer and author of Good Sense in Web Development blog.