News Archive
PhpRiot Newsletter
Your Email Address:

More information

Background color for inline text

Note: This article was originally published at Planet PHP on 11 October 2011.
Planet PHP

In searching for a solution to a CSS problem I had I stumbled over anotherAinteresting problem, similar to mine. Most people seemed to agree that it
was impossible to do in pure CSS. The effect those people were afterAis commonly used in magazines where text with a background color is putAover an image. A simple effect hard to achieve.

One solution was to surround each line of text using styled span elements. AnotherAsolution usedAaa teeny weeny jquerya to solve the problem. I'm sure it's a solid solution but using jquery andAjavascript to be able to style text is, well, wrong. ForcingAeditors to add invisible span elements in text is also not a good idea. But -Athe effect can actually be achieved using css only and still keep the html simpleAand semantically correct.

If you use a block element, like

, and set the background color, it will be Aa filled square behind the text. By setting the css display property to inlineAyou get Aclose to the effect wanted.

So far it is simple. The problem then is that using padding on inline text willAonly affect the horisontal padding (text indentation) on the first and lastAline of text. You get the following effect.

In order to get the effect we want we need to add two elements. A surroundingAblock element (div) surrounding the paragraph and an inline element (span)Asurrounding the text inside the paragraph. Both of which is semanticallyAwithout meaning.

First we add a left border on the surrouding block element. Then we move theAtext in the span element slightly to the left. The background color is setAon the paragraph and does not move. Using this neat little trick we simulateAtext padding or indentation on each line of text.

Finally we need to fix the vertical padding and line height to get rid of theAspacing between the text lines. The end result is not perfect. There are stillAproblems when the user resize text and you need to be careful with the spacingAin Internet Explorer. But it's a good start.

Chrome sometimes change line height seemingly in a random fashion when insertingAhtml
. Setting white-space to pre-line fix this behaviour.AIf not for Internet Explorer it could be simplifed further. Internet Explorer doesAnot seem to support white-space: pre-line. So Internet Explorer still needs manuallyAadded html breaks.

The full source

div#column { border-left: 6px solid #000; } p.subs { display: inline; font: bold 14px/18px arial; color: #fff; background: #000; padding: 1px 0 1px 0; white-space: pre-line; /* Not understood by IE, use manual br for IE */ } p.subs span { position: relative; left: -3px; } p.subs br { display: none; }

Ground round
salami pig, meatball short loin frankfurter
short ribs pork hamburger rump
strip steak beef ribs T-bone salami ham hock.

Truncated by Planet PHP, read more at the original (another 2093 bytes)