Inline 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.

This entry was posted on Tuesday, November 21st, 2006 at 5:28 pm and is filed under css, tech. You can feed this entry. You can leave a response, or trackback from your own site.

45 Responses

  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 - November 22nd, 2006 at 4:16 am

  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 - November 22nd, 2006 at 4:42 am

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

    Ben Darlow - November 22nd, 2006 at 7:20 am

  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 - November 22nd, 2006 at 7:32 am

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

    Andrea - November 23rd, 2006 at 3:28 am

  6. […] Easy and quick. […]

    davidbisset.com » CSS Inline image quotes - November 23rd, 2006 at 9:39 am

  7. 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 - November 24th, 2006 at 8:58 am

  8. 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://notes.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 - November 24th, 2006 at 12:29 pm

  9. 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 - November 24th, 2006 at 6:06 pm

  10. […] Url.Site.HTML.Creativity.inline quotes […]

    Myglobalblog » Blog Archive » life is making inline quotes - November 24th, 2006 at 11:31 pm

  11. nice one..

    bonskijr - November 25th, 2006 at 2:23 am

  12. Really like the way this works!

    Drukwerk - November 26th, 2006 at 8:54 am

  13. […] Grazie a Natalie Downe che ha scritto un piccolo articolo in CSS possiamo inserire i simboli delle citazioni in formato grafico nelle nostre pagine con contrassegno della parte si apertura e chiusura, come succede nelle pagine dei giornali. […]

    Inserire citazioni (blockquote) grafici con i CSS » RankLab Studio - SEO - Web Design - November 26th, 2006 at 11:09 am

  14. […] Inline image quotes […]

    Max Design - standards based web design, development and training » Some links for light reading (27/11/06) - November 26th, 2006 at 4:09 pm

  15. Hi,

    Nice simple clean CSS technique to display a good quote.
    Its worth to read.

    Regards,

    K . S . Karthick Murari
    http://www.verdurethought.com
    +freshness in every pixel+

    Verdure Thought - November 27th, 2006 at 3:19 am

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

    Vesa Virlander - November 27th, 2006 at 3:47 am

  17. […] I have been meaning to write about this technique for some time now. The aim is a block quote, with speech marks at the front and termination of the text but without the nastiness of inline images. http://notes.natbat.net/2006/11/21/inineimagequotes/ […]

    cssdesign.dk » Arkiv CSS Quicklinks (07/2006) - November 27th, 2006 at 10:03 am

  18. 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 - November 27th, 2006 at 3:16 pm

  19. 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 - November 28th, 2006 at 4:51 am

  20. 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 - November 28th, 2006 at 6:08 am

  21. 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 - November 28th, 2006 at 6:19 am

  22. 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 - November 28th, 2006 at 7:31 am

  23. 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://notes.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 - November 28th, 2006 at 7:40 am

  24. 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 - November 28th, 2006 at 7:51 am

  25. 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 - November 28th, 2006 at 10:23 am

  26. […] Hoy he descubierto, gracias a Natalie Downe, que, en realidad, conseguir unos blockquote con estilo es tan simple como sacar ventaja de nuestros amados estándares y las hojas de estilo en cascada. […]

    Webmaster Libre » Archivo del weblog » Comillas con imágenes para los blockquote - November 28th, 2006 at 12:54 pm

  27. 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 - November 28th, 2006 at 2:11 pm

  28. […] Hoy he descubierto, gracias a Natalie Downe, que, en realidad, conseguir unos blockquote con estilo es tan simple como sacar ventaja de nuestros amados estándares y las hojas de estilo en cascada. […]

    Comillas con imágenes para los blockquote « Cosas sencillas - November 29th, 2006 at 5:05 am

  29. 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 - December 4th, 2006 at 7:15 am

  30. 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 - December 5th, 2006 at 3:08 pm

  31. It doesn’t working under IE 7 and XHTML 1 transitional

    vlado - December 7th, 2006 at 11:53 am

  32. […] Aggregated from banksean by Asian Blogger Community […]

    the web hottest from slashdot, digg, reddit and del.icio.us » Blog Archive » Natalie Downe » Blog Archive » Inline image quotes - December 14th, 2006 at 10:56 am

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

    fabio - December 29th, 2006 at 12:46 pm

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

    JasonM - February 1st, 2007 at 10:56 am

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

    Jan - February 3rd, 2007 at 5:20 pm

  36. When “inline” was added - it doesn’t wotk under IE7

    vlado - February 21st, 2007 at 6:19 pm

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

    3DCADResources - February 22nd, 2007 at 2:21 pm

  38. 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 - March 4th, 2007 at 3:38 am

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

    decimus - August 7th, 2007 at 12:40 pm

  40. 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 - September 6th, 2007 at 4:38 pm

  41. […] Using images for blockquotes, but not using inline images in CSS./a> Tags: CSS […]

    CSS: Inline Image Quotes | David Bisset: Web Designer, Coder, Wordpress Guru - November 21st, 2007 at 8:13 am

  42. 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 - January 10th, 2008 at 2:32 am

  43. 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 - February 3rd, 2008 at 7:03 pm

  44. 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 - February 3rd, 2008 at 7:43 pm

  45. Andrea,

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

    Jonathan - March 13th, 2008 at 8:52 pm

Leave a Reply

« The continued adventures of the Permalink slideshow
Still testing those blockquotes »