Swooshy Curly Quotes Without Images

44 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Brandon Pearce

    I did a similar thing on my www.musicteachershelper.com website. The only difference is that the right-end quote is displayed directly after the text ends, instead of flush right.

    But it never looked perfect in IE (still doesn’t) because the last line always has some extra white-space above it, due to the enlarged font-size of the quote. It’s beautiful in Firefox, though.

    This article gave me hope that it still might be possible to get this effect looking good in IE with just a little more tweaking. Thanks for the great tip!

  2. Mats Lindblad

    There is just one problem, your code is invalid.

    Blockquotes can not contain text, text has to be wrapped inside a block element like "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del"

    But that’s easy to fix. Just wrap the sucker.

  3. Simon Collison

    Thanks for the feedback folks. I should say that I consider this technique experimental, and not 100% resolved, so I expected to see a few (more actually) error reports.

    The important thing is that more people start to think “Hang on, is this something that can be done WITHOUT images?”, which is a very healthy way to approach problems.

    Wrtlprnft: (Good name by the way). It looks fine on Mac Opera. Judging by the screenshot you linked to, a negative top margin on .bqend should pull it up a little.

    Brandon: The testimonials page on that site looks great. It was by chance that my curlies looked OK in IE – I didn’t do anything special. Stay hopeful…

    Mats: Ah. My stand-alone example ( which is here ) validates as Transitional or Strict. That does have the paragraph tags – which I seem to have left off this tutorial. Be sure to set paragraphs to margin: 0 and padding: 0.

  4. Martin Smales

    Why do blockquotes contain opening and closing tags as part of text as quotes are already defined semantically?

    We know that < blockquote >this is a quote< /blockquote > and specifying opening and closing quotation characters (such as ” ”) as part of text for the blockquote element is not really necessary, right?

    Clearleft’s testimonials are examples treating quotation marks as simply presentational.

  5. Simon Collison

    Martin: Look at the clear:left site without a stylesheet. How clear is it that the indented paragraph is a quote? Blockquote text is rendered exactly the same as normal paragraph text aside form the small default indent.

    Personally I feel that the addition of quote-marks would make it much more apparent that it’s a quote when styles are off, especially important in this case where it’s pretty much the first bit of information on the page.

    That said, Andy and co’s image-based quote-marks are beautifully applied…

  6. Simon Collison

    ShawnHartsock: Thanks Shawn. Hmm. It’s not even scaling the quote-marks to 700% is it? The Linux examples are so radically wrong it’s difficult to know where to start. Good old browsers…

  7. Scott

    Indeed, as Martin pointed out and as I recall from English class, quotation marks are not required for blockquotes, only for inline quotes.

  8. Dustin Diaz

    Cool Stuff Colly. Looks great. Now get Jeremy to spruce this up with his DOM Scripting blockquotes :) and append those quotes auto-magically.

    Other than that, I’ve actually been looking for something cool like this as it hadn’t occurred to me to just blow up the quotes like that. Thanks for sharing Colly. I’ll tell Papá.

  9. patrick h. lauke

    hmmm..looks just like that linux/opera screenshot on my IE6/PC and FF1.5/PC.

    i’d echo martin’s comment: the fact that unstyled blockquotes do not get quotes by default is on par with IE’s lack of quotes around the Q element…a shortcoming in the browser default stylesheets and thus not my personal concern. but yeah, if i had to do it, this would be an interesting way around the issue.

  10. patrick h. lauke

    part of the issue may well be that verdana’s quotes just look like daggers. i’ve had better results (at least closer to your images) with

    font-family: Helvetica, Arial, sans-serif;

    font-weight: bold;

    the margin/padding is still off though, so it may also need some tweaking for PC.

  11. whiteinge

    Simon, I do like the visuals of your technique, however Martin and Scott are correct that blockquotes should not contain quotation marks.

    From the Chicago Manual of Style section 11.11:

    [Q]uotations may be either run in … or set off from the text as block quotations, or extracts. Block quotations are not enclosed in quotation marks and always start a new line. They may be indented or set in smaller type of a different font from the text; they may have unjustified right-hand margins or less space between lines.

    If blockquotes are not immediately apparent as a quotation it is the fault of the typographer or perhaps another method of quotation should be used. I agree with you that the default unstyled presentation of blockquotes is sorely lacking.

    Cheers.

  12. Simon Collison

    whiteinge, I do agree now. Thanks for the clarification. Regarding blockquotes, you are correct.

    Still, many, many designers continue to use image-based quote-marks for quotes, comments and so on, and if they still wish to enhance blockquotes that way, this method becomes useful.

    My main reason for writing this article was to show that irregular characters can be used as drop caps, where many of us had previously found it too difficult. Bring on the exclamation marks, question marks, colons, hashes and so on.

    I hope designers will at least reconsider using images in such situations.
  13. rossh

    Well, if you are going to use them they should be hung, not indenting the line like that. Typography 101 ;)

    But I still prefer images. They look better, and they are (rightly so) a visual element as opposed to a (technically illegitimate) semantic element.

  14. blueshade

    “Secondly, images don’t resize, so scaling text will have no affect on your graphic curlies.”

    ahem… mind you, they do – in selected browsers though…

    i always wondered why Firefox people can’t follow Opera’s example on this one…

  15. michael

    “Secondly, images don’t resize, so scaling text will have no affect on your graphic curlies.”

    I think people should know what they’re talking about before they say things like this.

    Images WILL scale with text if you code them in a way that will allow them to do so.

    Here are some links to help ‘em’lighten you and your readers.

    http://www.wats.ca/resources/relativesizing/20

    http://host.sonspring.com/em-image/

  16. Robin

    I think the quotes should really be hung, as rossh above commented.

    All it took was:

    .bqstart {

    …margin-left: -50px;…

    }

    .bqend {

    …margin-right: -50px;…

    }

    Pull-quotes Example

    Tested to work on: Fx1.5/Win ; IE6/Win ; Opera 7.54/Win ; Opera 8.51/Win ; Opera 9.0 Preview 1/Win

  17. David Spurr

    I liked the idea of this and it was quite timely for me as I was just about to apply this effect within my current project.

    However as Simon stated playing around with the margin, padding and height values and getting it to work cross-browser was quite hit and miss.

    So I ended up playing around a bit more, with absolute positioning, text-indent and an extra span I have a solution which, I think, is easier to implement.

    I’ve explained my solution on my site and added a demo of the final result.

    This works on Firefox 1.5, IE 5, 5.5, 6, NS 7.1 and Opera 8.5 on Windows. I haven’t had chance to test on a Mac yet.

  18. Mike S.

    Typographically speaking, I think I’m more in favor of hung quotes than ones that flow with the text. But that’s not what I want to discuss.

    From a CSS-purist point of view, I would argue that it’s most important to consider the semantics of the blockquote element. As Martin mentioned, the blockquote element alone conveys the fact that the contents have been quoted. Thus, having quotation marks inside the blockquote is redundant.

    whiteinge made the following observation: If blockquotes are not immediately apparent as a quotation it is the fault of the typographer… This distinction between the content and its typography is part of what makes (X)HTML+CSS so powerful—its ability to separate content and presentation.

    Whether a blockquote should have quotation marks or not has nothing to do with the content of the quotation itself; the marks are decorations used by typographers to set the quotation apart from normal text. The presentational nature of such decorations, be they special colors, italics, margins, or quotation marks, means that they should exist in the CSS.

    Quotation marks exist as boundaries to the content of a quotation. There are CSS pseudo-elements that exist to create exactly these items: :before and :after. If you read up on the W3C docs on generated content, you’ll find that the current recommendations for generated content deal specifically with ordinary text, numbering schemes, and the correct presentation of [ta-da] quotations.

    I would argue that the semantically correct way to display quotation marks around blockquote elements is to use CSS blockquote:before and :after rules. The problem is that not all browsers support these rules. IE ignores them completely. Firefox doesn’t support them fully (positioning is missing, which limits what you can do). I don’t know about other browsers, as I don’t have access to them.

    Right now, you can’t use :before or :after and expect them to display correctly across all browsers. In some circumstances, that can be okay, but how much cutting-edge CSS to use and which browsers to support is a different debate that I won’t get into here. You can sleep peacefully, though, knowing that your markup is semantically sound, you’ll be able to change the presentation of your site at a whim without changing its content, and that, maybe someday, browser makers will fully support CSS generated content.

  19. leslie

    Nice write up Simon. It brings up a lot of interesting ideas.

    Don’t let the semantic police get you down. While they have a point or two, this is a fun exercise to play around with css and have some fun with a current fad in web design. You managed to marry the big text fad with the curly quote fad in a way that teaches us a little something about css. Good job I say and hats off to ya.

  20. priya

    not to sound dense or anything – but why is this better thank just using an image for the pullquote (blockquote)? As far as testing the million browsers it seems like a lot of work for a simple thing.

    I understand the need to go css-all-the-way (or as much as one can) but my problem has always been the bad rendering in some browsers – when I have paying customers I nearly always go “traditional” since it gives me hella lot of control no matter what browser is being used. So apart from the browser-upgrade-project-vision is there any other reason to use css to do this?

    I’d appreciate your comments as I am looking for reasons to get more css-ified. Thanks.

  21. AndyM

    Simon thanks for an interesting article. I’ve been playing around with this as a learning exercise. One thought – if the aim is to handle text resizing why not specify the margins and padding in ems – and keep a consistent relationship between the line and the quote? (Works fine on Safari – but Firefox is still way off on the close quotes).

  22. JR

    I ran into this exact problem while putting together my portfolio for university. Of course the use of curly quotes to demarcate blockquotes is a stylistic function completely removed from the proper use of English grammar, but as anyone familiar with William Shakespeare will tell you, “pedantic” isn’t a dialect of the english language (his grammar was so poor he even spelled his own name 4 different ways).

    The curly quote style, specifically as Simon attempts it, is a visual reflection of print media employed in the use of selected word-bites quoted from the main article as a visual draw through the flow of the article itself. And damnit they are simply more appealling in some circumstances than straight blockquoted, undemarcated text.

    I didn’t find a way to successfully position the curly quotes as I’d like them in IE (that is behind the text). And so decided to use images, this gave me the added benefit of keeping the font face I wanted to use. Although as michael rightly pointed out, an image can be scaled, I couldn’t do this as i had chosen to use the background property in favour of adding yet more markup, but frankly the large quotes looked fine with any sized text. Given that the only way to include an endquote is by adding extra markup, I don’t see why it is so unreasonable to make the jump to a background image. The semantics are impure either way.

    Here’s my example of curly quotes:

    http://www.truthinertia.com/bsu/html/docs/usability.htm

    Here it is without author style sheets:

    http://www.truthinertia.com/bsu/html/docs/cssoff/usability.htm

    and here is the markup (Note: I used 2 types of curly quote since there was a quote within a quote so I needed to display not just double quotes but single quotes as well, also the additional markup for the endquote is only added as a div around the last paragraph of the blockquote. I could have used child selectors but as we then IE wouldn’t have handled that either hmph):

    ‹blockquote class=”q1”› ‹p›...‹/p›

    ‹blockquote class=”q2”› ‹div class=”endquote2”› ‹p›...‹/p› ‹/div› ‹/blockquote›

    ‹div class=”endquote”› ‹p›...‹/p› ‹/div› ‹/blockquote›

    And lastly the CSS:

    blockquote {

    margin: 20px;

    border-top: 0px;

    border-right: 1px solid #eee;

    border-bottom: 0px;

    border-left: 1px solid #eee;

    }

    .q1 {

    background: url(../html/pics/blockbga.gif) no-repeat 5px -5px;

    font-size: 90%;

    line-height: 90%;

    padding: 2em 40px 0px;

    }

    .endquote {

    background: url(../html/pics/blockbgb.gif) no-repeat right bottom;

    margin: 0px -40px 0px 0px;

    padding: 7px 40px 2em 0px;

    }

    .q2 {

    background: url(../html/pics/qwinqa.gif) no-repeat left -5px;

    font-size: 100%;

    line-height: 90%;

    padding: 1em 40px 0px;

    }

    .endquote2 {

    background: url(../html/pics/qwinqb.gif) no-repeat right bottom;

    margin: 0px -40px 0px 0px;

    padding: 7px 40px 2em 0px;

    }

  23. Bastiaan T.

    One of your arguments is that images don’t scale… Well, your technique doens’t scale (well) either. Because you are using pixel values to offset the quotes, they’ll end up in the weirdest places.

    I also think the added markup is just not worth it. I consider the visual quotes an extra, not an essential. The blockquote element already shows the user (in text-only or speech browsers, orcourse) that they are dealing with quoted text.

  24. Frode Danielsen

    JR: Why the extra div? You only need two elements to hang your start- and endquotes on, so I’d think you could do just as well with the blockquote and p elements. I see that you use some margin/padding-adjustments on the divs, but they could probably be done in the images themselves, although sacrificing a few extra bytes maybe. Just a thought :-)

  25. david

    I appreciate the time you took to show this. whether people agree or disagree i wish the decsentors would not be so rude. ( not all but some ) i mean if you disagree then disagree but can we keep this polite? you would think that these people know you personally and you drink beers regularly :)

  26. Treo

    @ David Spur

    I used the example you made for the opening quote on my treo site and it works great. I think the absolute positioning helps with IE.

  27. flanagan!

    I just wanted to thank you for the definition of what “speech marks” are.

    I started to think that I was the only one who got pissed off when people does this “quoation move” with their fingers.

    I’d chop them all!

    Congratulations from Barcelona for your 24 ways. Can’t wait til next year.

Impress us

Be friendly / use Textile