Background color for inline text

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

One solution was to surround each line of text using styled span elements. Another solution used ”a teeny weeny jquery” to solve the problem. I’m sure it’s a solid solution but using jquery and javascript to be able to style text is, well, wrong. Forcing editors to add invisible span elements in text is also not a good idea. But - the effect can actually be achieved using css only and still keep the html simple and semantically correct.

If you use a block element, like <p>, and set the background color, it will be  a filled square behind the text. By setting the css display property to inline you get  close to the effect wanted.

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

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

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

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

Chrome sometimes change line height seemingly in a random fashion when inserting html <br>. Setting white-space to pre-line fix this behaviour. If not for Internet Explorer it could be simplifed further. Internet Explorer does not seem to support white-space: pre-line. So Internet Explorer still needs manually added html breaks.

The full source

<pre>
<html>
  <head>
  <style type="text/css">
  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;
  }
  </style>


  <!--[if IE ]>
    <style type="text/css">
      p.subs br {
      display: inline;
    }
    </style>
  <![endif]-->
  </head>
  <body>
    <div id="column">
      <p class="subs"><span>Ground round <br />
salami pig, meatball short loin frankfurter <br />
short ribs pork hamburger rump <br />
strip steak beef ribs T-bone salami ham hock.</span></p>
    </div>
  </body>
</html>
Tagged with: ,
Posted in Web
72 comments on “Background color for inline text
  1. Hi there, its good article about media print,
    we all know media is a fantastic source of facts.

  2. Marvelous, what a weblog it is! This web site gives useful
    information to us, keep it up.

  3. Remember, blur or distorted photos might not exactly look elegant once you copy
    them in CDs or photo albums. Dress the scene up in beautiful light making it dramatic.
    Detail and depth of field are both increased by longer
    exposure times, so try to use the greatest F-stop value (22
    on many cameras) whenever possible.

  4. Youtube.com says:

    Visualizing works for anything and it is useful when used
    for a muscle. This is due in part to a higher proportion of Lycra in the
    fabric, which causes muscles to vibrate less frequently. While you might think a bit of dirt can harm
    the connection it does cause major problems.

    My webpage :: Youtube.com

  5. You really make it seem so easy with your presentation but I find this topic to be actually something which I
    think I would never understand. It seems too complicated and very
    broad for me. I’m looking forward for your next post,
    I will try to get the hang of it!

  6. Hey I know this is off topic but I was wondering if you knew of any widgets I
    could add to my blog that automatically tweet my
    newest twitter updates. I’ve been looking for a plug-in like this for quite
    some time and was hoping maybe you would have some experience
    with something like this. Please let me know if you run into
    anything. I truly enjoy reading your blog and I look forward to your new updates.

  7. Hal pertama yang perlu dilakukan ialah melakukan pendaftaran di web agency, bila telah menjadi
    anggotanya barulah kita request pada mereka agar membuatkan account di bandar sbobet.
    5 lines spacing to make the release easier to read. After the
    Allied victory in World War II, Roosevelt’s successors continued his policies.

  8. I’m gone to say to my little brother, that he should
    also visit this website on regular basis to get updated from latest reports.

    Feel free to visit my web blog :: system asset management software

  9. Refugia says:

    The rent to own basically adheres the owner to sell; it will probably not bind the customer
    to buy. The United States of America was built on the sweat, commitment and integrity of the working class.
    Shubhkamna Group is a highly reputed and reliable name in the field of real estate group residential property in Noida, Gurgaon.

  10. When someone wries an adticle he/she keeps the idea
    of a user in his/her brain that how a user can know it. Thus that’s why this post iss perfect.
    Thanks!

    Here iss my website Seo Stevenage

  11. Hello my family member! I wish to say that this post is awesome, nice written and
    include approximately all vital infos. I’d like to peer more posts like this
    .

    My weblog: linden method review (hospitablejar5674.jux.com)

  12. Hi there! Quick question that’s entirely off topic.
    Do you know how to make your site mobile friendly?
    My website looks weird when viewing from my iphone
    4. I’m trying to find a theme or plugin that might be able to resolve this problem.
    If you have any suggestions, please share.
    Cheers!

  13. Marla says:

    Never before heard of a steam shower enclosure up until I discovered this site, so glad
    I did would like one right now and finances allowing
    will likely be buying one before long

    Feel free to visit my page; corner steam shower – Marla,

  14. Feel free to visit my web blog … ea theme park game online free – http://alturl.com/uoxbj,

  15. Link exchange is nothing else except it is just placing the other person’s
    website link on your page at appropriate place and other person will also do same in favor of you.

  16. customised says:

    I’m truly enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it
    much more pleasant for me to come here and visit more often.
    Did you hire out a developer to create your theme? Great work!

  17. We are like to sharing. Every day we share Many file,image,text,image,video,audio etc
    with our friends. Some file or image,text,image,video,audio Are Collected in difficult way but we do not get any credit.

    Now i am going to tell a Way to earn from file or image,text,image,video,audio share.

    There are many site to earn money from ppd. But
    toady i am telling a trusted site to earn from ppd.For more: Click here

  18. Hello, I would like to subscribe for this webpage
    to take hottest updates, so where can i do it please assist.

  19. hosting says:

    I’m gone to inform my little brother, that he should also pay a visit this web site on regular basis to take updated from
    most recent news.

  20. Hello, this weekend is pleasant in support of me,
    for the reason that this point in time i am reading this fantastic educational post here at my home.

  21. reviewing says:

    I think this is among the most significant info for me. And i am glad reading your article.
    But wanna remark on few general things, The website
    style is great, the articles is really great : D. Good job, cheers

  22. Spot on wih this write-up, I really believe that thiks wesite needs a
    great deal more attention. I’ll probably be returning to
    see more, thaanks for the info!

2 Pings/Trackbacks for "Background color for inline text"
  1. [...] Background Color for Inline Text - This tutorial shows how to add a background color to text using only CSS. [...]

  2. [...] Background Color for Inline Text - This tutorial shows how to add a background color to text using only CSS. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>