Very cool. Me likes.

I’ve been looking for a good way to do these sort of quotations.

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.

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.

That example link screwed. It’s here:

Swooshy Quotes

”...shortly before you hit them.”

Brilliant! Love it!

@Bill: This works completely fine in Firefox 1.5. You either have styles disabled or had a bad page load ‘cause I’m seeing them just fine.

Bill O’ Reilly: Thanks. Fine on my copy, but I appreciate the feedback. Sorry to waste more of your time…

Dustin: Thanks, Sir. You’re a gent.

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.

Good article. I had the same issue as wrtlprnft but I suspect I could fix that on my own no problem.

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.

Nice one. Iam using this on my blog for sure.

The final design looks crap.

No offence, your other pieces of work are much better.

“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…

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

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.

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.

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.

“but why is this better thank just” should obviously read “but why is this better THAN just”...we need an edit button :P

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;

}

Lovely example of something I’ve fiddled with unsuccessfully before. Now, can anyone shed any light on why IE hides part of my opening curly when I combine the above with some rounded boxes based on 456bereastreet’s demos?

And a happy New Year to you all!

Curly Quotes meet Rounded Box. Rounded:Curly

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 :-)

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.

No dice. Neither example looks good in Firefox on Linux. Screenshots from my Firefox browser:

article example and posted update

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.

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.

Very nice technique! I wrote something today about creating CSS Curly Quotes using the :before and :after pseudo-elements—although it only works in modern browsers.

Nice example JR, looks nice even in my browser.

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.

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 :)

Sadly it’s doesn’t look right on Chrome (Version 30.0.1599.101 m) either. Both quotes are displayed after the text.

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…