How To Put a Multi-Line Indent on a Styled Blockquote

Multi-Line Blockquote IndentThis brief and easy tutorial provides a method to indent multiple lines of text around a background image on a styled <blockquote> element.

When I wrote the previous post, listing 25 classic web design articles, I included a styled <blockquote> for each of the listed articles. This is obviously nothing new; virtually all design blogs have a fancy blockquote styled with a double quotation mark in the background or something similar.

But when I was laying out the blockquote in Photoshop, I didn’t like the way it looked with the entire left side indented. Here is how I originally intended it to be:

Full Left Indented Blockquote

So I experimented a little bit and decided this looked better:

Partially Indented Blockquote

But CSS does not have a way to do a multi-line indent. So, with a little extra markup I came up with a simple solution. It’s actually quite easy and probably has been done before, but I have never seen it documented.

Here is the HTML code:

<blockquote><span></span>Metus sit morbi fames eget, quam, orci, eget ultri cies ac wisi
est. tincidunt vitae, quis, tincidunt Quisque placerat libero senectus mi egestas. egestas pharetra. ipsum
ante. volutpat. wisi. Mauris tristique sapien dapibus, id neque.</blockquote>

The only extra markup is the <span> tag pair at the very front of the quoted text.

Here is the CSS to style the <blockquote> and <span> elements:

blockquote {
  background: #f6e8e1 url(/images/bg_blockquote.gif) no-repeat 17px 18px;
  padding: 12px 15px 10px 15px;
  width: 329px;
  border: solid 1px #dcdcdc;
}

  blockquote span {
    display: block;
    float: left;
    width: 58px;
    height: 40px;
  }

First of all, I’ve styled the blockquote with a background color, a background graphic (offset slightly to harmonize with the padding on the next line), a border, and a set width. Nothing new here — you can obviously style yours how you want.

The second part of the CSS affects the extra <span> element. First, the span is converted to a block-level element (it’s in-line by default). Then it’s floated left, the same way you would float an image to allow text content to wrap around it. Then, the width and height of the span are adjusted according to the size of the quotation mark in the background, so it gives the impression that the quotation mark is actually causing the indented text. In fact, you could apply the quotation mark as a background on the span element itself, which would produce the same result. I just chose to do it this way.

When displayed, the blockquote now looks like the second example shown above, with a multi-line indent. Since you cannot indent multiple lines with the text-indent property in CSS, this slightly nonsemantic method provides a possible alternative.

And that’s basically it. Just include that extra span element, and your CSS will style all blockquotes the same way. Optionally, if you’re concerned about the extra markup, you could dynamically create the span element via JavaScript, using the createElement method, or an equivalent method provided by your favorite JavaScript library — and the CSS will style it accordingly.

If anyone has a simpler solution that doesn’t use extra markup, I’d love to hear it!

Web Tools Weekly

12 Responses

  1. I think the better way is to set padding-left and the image as background of the container.
    You don’t have to know what will be the height of the text-filled container.

  2. B A B U:

    It’s good, if u provide demo

  3. Ian:

    If you want to retain semantic truthiness in your markup, put the <span> around an actual quotation mark.

    <span>&quot;</span>

    then put another at the end, so the quotation is properly encased:

    <span>&quot;</span>

    apply your left-floating CSS to the beginning one, and do this to the second:

    [CSS]
    .endquot{display:none;}

  4. @httpwebwitch:

    I edited your comment to include the spans, which I believe is how you wanted it..?

    Yes, that seems like another option, but it limits font use for the “fancy quotes”, and still adds what some would consider extra markup. Also, wouldn’t you have to declare classes on the spans as well?

    Personally, I prefer a single empty span, as that is much less markup. Or else use JavaScript to create all the extras dynamically.

  5. Demo and downloadable files added. Thanks for the suggestion Babu.

  6. Gnossos:

    I’ve searched the web for the past hour looking for something like this. This is not quite what I need, but it comes closest.

    I have a left-float image with text wrapped around it. In the text I have a blockquote, which I want to typeset in the traditional way. According to the Chicago Manual of Style, this is with left and right indentation, perhaps a smaller type, and space above and below. This is much less fancy than your usage, but in some ways harder to implement. The problem is that if the text wraps on the right of the left-floated image, relative indentation doesn’t work with any of the standard html/css markup: blockquote, margin, padding, etc.

    Your method works because by floating thin left and right. The only problem is the heights of the depend on how much text is in the block quote, and there is no general way to know this ahead of time.

    Wouldn’t it be nice to have a jQuery plugin that figures out the dimensions of the and inserts them automatically before and after the blockquotes?

  7. John J.:

    With CSS2 you can do this much easier entirely within CSS. All major browsers including Internet Explorer (IE) 8 now support the :before pseudo-class that makes this all possible.

    blockquote
    {
    border : 1px solid #dcdcdc;
    margin : 1em 40px;
    padding: 0 5px;
    background-color: #faf8e9;
    }
    blockquote:before {
    content:url(‘images/bg_blockquote.png’);
    float:left;
    display:block;
    margin-right:5px;
    margin-top:3px;
    }

  8. John, that’s a great tip. Definitely a example of practical use for generated content in CSS. Thanks!

  9. Leon Amarant:

    Nice and simple. You can also insert the tag within every blockquote dynamically using jquery (or standard javascript for htat matter) in the onLoad event. This way, you would not require the programmer to add the markup manually.

  10. fb:

    The idea of placing the " in between is a very god idea unless it will not validate strict… Empty spans are not a good idea… Otherwise very well laid out article…

  11. Robsn:

    Actually, you can put negative values to text-indent.
    So:
    text-indent: -60px;
    padding-left: 60px;

    will do the job.

    Have a nice one. Robsn

  12. Loved your use of span and /span to do an indent within a blockquote. Exactly what I was looking for! Thanks.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.