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.
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):
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;
}