two years agoInline image quotes

I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images.

To be a valid blockquote there must be an inner block level containing element such as a paragraph or div. You can use this to your advantage in order to apply the two background images. The top one you can apply to the block quote itself using a text indent to make space for the image.

blockquote {
	text-indent: 25px;
	background: url(quotes1.png);
	background-position: 0 2px;
	background-repeat: no-repeat;
}

For the second image on the bottom right, you are going to be doing something a bit clever with the containing paragraph. Set it to be display inline, set padding on the right to be a bit more than the width of your image, then put the background image of the end quote mark on the bottom right of the paragraph.

blockquote p {
	display: inline;
	margin: 0;
	padding-right: 24px;
	background: url(quotes2.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}

And there you have it, inline image quotes.

Posted at 12:28 am on the 22nd of November 2006. 35 Comments

35 comments

  1. I can't remember where I saw it (or even if I did - it may have been a dream) but I tend to use the following method:

    I set the blockquote to display: list-item and give it a list-style-image with the opening quote.

    Then I apply padding to the right hand side of the blockquote and apply a background of the second quote, positioned bottom-right.

    You may or may not have to mess around with list-style-position - I can't remember.

    Anyway, this lets you use multiple block level elements inside the blockquote.

    Pete Lambert 22nd November 2006 11:16permalink.

  2. Very nice. I use very nearly the same system myself on our new site, with one modification (read: compromise).

    To allow multiple paragraphs to be quoted at once, I have the closing quote styled using blockquote p:last-child as the selector. That doesn't work in Internet Explorer, but you still get the open quote so I'm happy with it.

    I'm considering expanding it a bit, perhaps using blockquote > *:last-child to be more flexible, and then have override rules for situations such as blockquote > table:last-child where I wouldn't want to indent the right hand edge, and instead push the quote mark down below the table (or even perhaps use blockquote > table:last-child::after).

    I love CSS.

    Pete's method sounds interesting though, list-item related styling is never in the front of my mind but that sounds pretty neat.

    Ben Ward 22nd November 2006 11:42permalink.

  3. Genius. I'm stealing this technique right now.

    Ben Darlow 22nd November 2006 14:20permalink.

  4. A slight variation. I've got several paragraphs within a single blockquote, so rather than each one of them having an endquote I've changed the rule to only apply to the last-child. I've also removed the inline display mode, as the technique is highly dependent upon your image size being smaller than the actual text line height (rather than line-height) if you use inline. Plus I think it works slightly better for my layout if the final closing quote is effectively right-aligned.

    Doesn't work in IE7 though (no last-child selector? gasp!).

    Ben Darlow 22nd November 2006 14:32permalink.

  5. Works great in IE6 too, that's why it's so cool :)

    Andrea 23rd November 2006 10:28permalink.

  6. Finally! I hate seeing blockquotes with only opening quotes, because that's wrong grammatically and incredibly distracting. I keep waiting for that closing quote.

    The better way to do it would be to put the beginning image on the paragraph and the ending image on the blockquote. New paragraphs within a quote are started by reopening the quotes, but only the last paragraph would have the closing quote. The closing quote may not sit at the end of the line, but it's better than forever waiting for an ending that never happens.

    Rebeka 24th November 2006 15:58permalink.

  7. There are some very interesting ideas there, I especially like the display as list item one, though I am wary of using last child because of browser issues, though it would be great if worked reliably.

    I have published an update to this post here: http://natbat.net/2006/11/22/blockquotesagain/ where I try out various ideas on multiple paragraphs, not grammatically correct perhaps but it is just an experiment.

    Regarding swapping the images around Rebeka, the main point with this technique is that it works well on single paragraph quotes where the two quotemarks appear as inline to the text, though i do see your point about multiple paragraphs and the gramatics of it.

    natbat 24th November 2006 19:29permalink.

  8. I like the indent- I hadn't thought of that and I was using padding to move the whole quote over from the image. Since I often have more than one paragraph I set up a div within the blockquote to handle the end quote image. The main drawback is that I have to remember to insert the div tags whenever I use blockquote.

    annie 25th November 2006 01:06permalink.

  9. Hi, Nice simple clean CSS technique to display a good quote. Its worth to read. Regards, K . S . Karthick Murari www.verdurethought.com +freshness in every pixel+

    Verdure Thought 27th November 2006 10:19permalink.

  10. Thanks for writing this, have to try this one!

    Vesa Virlander 27th November 2006 10:47permalink.

  11. Another elegant solution is to use the :before and :after pseudo-elements.

    blockquote:before { content: url(quotes1.png); }
blockquote:after { content: url(quotes2.png); }

    Work fine with Firefox and Opera but unfortunately this is not supported by IE (not even IE7).

    Ciprian Amariei 27th November 2006 22:16permalink.

  12. Hi, sorry to be such a nerd, but i made a copy-paste with your code in my blogger html/css code, and only the first image appears...the quotes open, but don't close... can you help me ? thanks regards.....Lomig

    lomig 28th November 2006 11:51permalink.

  13. Lomig, I'd be happy to help you, I had a quick look at your blogger homepage and you seam to have fixed the issue with the second quotemark appearing, though I notice that your source is apparing really close to your quote, Im not sure if this is what you were after but you might want to enclose that in a seperate paragraph tag (perhaps with a class) and set display:block on that so it appears below the quote. Let me know if you are still having problems, Natalie

    natbat 28th November 2006 13:08permalink.

  14. Lomig, I think I have just found the blockquotes you meant earlier with just the opening quotemarks showing. I believe this is because you have styled the paragraph inside a blockquote to have the end quotes but these examples just have strong and no p container.

    natbat 28th November 2006 13:19permalink.

  15. What happens if you have multiple paragraphs? you would only want the end quote on the last one. Could you use JS to apply a class to the last paragraph? Steve

    Steve 28th November 2006 14:31permalink.

  16. Yes there is the issue with multiple paragraphs, you would only want the end quotes on the last item. I experimented with a few things here : http://natbat.net/2006/11/22/blockquotesagain/ but as you point out this wouldn't make gramatic sence. JS is the best option here unfortunately. You pipped me to the post with this one, twas exactly what I was going to try next :)

    natbat 28th November 2006 14:40permalink.

  17. Well, i didn't fixed anything ... if you check my last post "Vive le libéralisme" on http://lomig.blogspot.com , you will see that the three blockquotes only appear with the opening mark, and nothing as a termination... In each of these 3 blockquotes, i have only ONE ... block, so there are no multiple paragraphs, are there ? maybe i'm really dumb, i don't understand why you say i have fixed my problem.... thanks, although, for your quick answering ! regards........Lomig

    lomig 28th November 2006 14:51permalink.

  18. Lomeg, the blockquote you're referring to contains a <p> element inside of a <strong> element (which isn't valid since <strong> is an inline element). Also, the <strong> element is being closed before the <p> element. Both of these issues combined are probably causing your problem.

    Thomas Higginbotham 28th November 2006 17:23permalink.

  19. hi thomas,

    thanks a lot...it seems to be working. Now i only have to fix my transparency problem, and i'll be ok = thanks to all of you for your kind, quick and respectfull answers to a newbie, bad english speaking french guy

    regards........Lomig

    lomig 28th November 2006 21:11permalink.

  20. im sorry to sound silly but where do i place this in my blogger template? or does this work per entry only? thank you for your time and i love the quote.

    anna 4th December 2006 14:15permalink.

  21. hi,

    there seems to be a problem : everything is fine in Mozilla, but not in IE 6 !

    do you know if there"s a way to ged rid of that pb ? (except using mozilla ;) )

    lomig

    lomig 5th December 2006 22:08permalink.

  22. It doesn't working under IE 7 and XHTML 1 transitional

    vlado 7th December 2006 11:53permalink.

  23. kinda cool! very simple and cheep in terms of code!

    fabio 29th December 2006 12:46permalink.

  24. Very nice work ... been looking for something like this for a while.

    JasonM 1st February 2007 10:56permalink.

  25. very nice. but perhaps it's not so much elegant, while I'm not sure a inside a blockquote to be semantically correct.

    Jan 3rd February 2007 17:20permalink.

  26. When "inline" was added - it doesn't wotk under IE7

    vlado 21st February 2007 18:19permalink.

  27. Excellent, will try it in one of the page in our site.

    3DCADResources 22nd February 2007 14:21permalink.

  28. You actually get a better result if you use display:block instead of inline. You have to tweak the positing a bit, but the results are better.

    Marshall 4th March 2007 03:38permalink.

  29. Hi, great post. I`d like to translate your article to Polish. Let me know if its ok?

    decimus 7th August 2007 12:40permalink.

  30. I was reading most of the entries with interest and I had a good idea of the issue but my problem is I need to put this in a template so any non CSS person can just copy paste things also there is a slight problem... I need to add the name of the person quoted from at the end of the paragraph after the closing quotes and after inside paragraph. Am I asking too much? :)

    I am getting used to this CSS...

    gultekin 6th September 2007 16:38permalink.

  31. I was looking for some tutorials on the net and dont know why but all tutorials ive found was about inline quotes ;))))

    regards!

    dotacje unijne 10th January 2008 02:32permalink.

  32. Thanks for this - I'm going to try it out on my blog. I currently use a theme that I've always liked, but my pet peeve with it is the method used for quoting. I like yours much better.

    Wayne 3rd February 2008 19:03permalink.

  33. btw, I've enabled this on my site and I modified it some so that the whole comment block would be indented (that's more visually appealing to me personally) by adding a margin: 25px to the main blockquote piece. I think that caused the right side quote to not display, because it's not honoring the margin: 0 line. When I check out the resulting CSS (via IE dev toolbar) on my page, the P tag doesn't have any margin lines. Checking out YOUR page, it has all the margin and margin- lines in the P tag.

    Do you have a suggestion as to how I can indent the entire quote block, and still have the inline quotemark images?

    This post has a blockquote as the second paragraph, if you need a working reference.

    Thanx much

    Wayne 3rd February 2008 19:43permalink.

  34. Andrea, Actually, it doesn't work in IE6 so I can't use it. So close though.

    Jonathan 13th March 2008 20:52permalink.

  35. Thank you very much, this just looks great.

    Marcus 21st March 2008 16:39permalink.

Comments are closed.

22nd November 2006

You are reading "Inline image quotes" written by Natalie Downe on the 22nd of November 2006 at 12:28 am.

Previously hosted at http://notes.natbat.net/2006/11/21/inineimagequotes/

Next: Still testing those blockquotes

Previous: The continued adventures of the Permalink slideshow