I’ve been reading the 24 ways to impress your friends web developer tips on the run up to Christmas and the 21st article, Swooshy Curly Quotes Without Images, was quite timely for me as it is an effect I was going to include in my current project.
At first it looked quite promising, but upon experimentation it proved, for me at least, to be a little bit hit and miss to get it right in all browsers, and I must admit I gave up trying to tweak the margins and paddings quite quickly. But I liked the idea of not having to resort to using images for the large quotes, as I have done on previous attempts and began adding my own thoughts to the mix.
As simon stated:
I must admit that the heights, margins and spacing don’t make a lot of sense if you analyze them. This was a real trial and error job. Get it working on Safari, and IE would fail. Sort IE, and Firefox would go weird.
My aim was to get the same effect, but with slightly clearer rules affecting the position of the quotation marks. My solution is not quite as clean as the original in the markup (added one span) and requires a little more
For the eager among you check out the demo page for the final results, then read how I executed it.
First the markup:
<pre class="code">
<blockquote>
<span class="bqstart">“</span>I'm a blockquote and I'm loving the big curly quotes I have.<span> </span><span class="bqend">”</span>
</blockquote>
The only addition here is the span before the closing quotation mark, which contains a single non-breaking space character.
The CSS
blockquote {
position: relative;
text-indent: 2em;
}
.bqstart,
.bqend { font-size: 300%; }
.bqstart {
text-indent: 0;
position: absolute;
top: -0.2em;
left: 0;
}
.bqend {
position: absolute;
margin-top: -0.2em;
right: 0;
text-indent: 0;
}
What this does is:
- For all browsers we are positioning the quotation mark span elements absolutely to the relatively positioned blockquote.
- For the opening quotation mark we fiddle with the top positioning value to ensure the quotation mark appears where we want.
- For the closing quotation mark we apply a negative top margin to make it appear in line with the text, note that this has the same value as the top positioning applied to the opening quotation mark.
- To ensure that the quotation marks don’t appear over the text itself a text indent is applied, which is removed from the quotation marks themselves. This is the reason for the extra span, to create the space for the final quotation mark.
The only values that need tweaking, to account for the size of the quotes for your given font family or the chosen scale of the quotes themselves, are the text-indent, top positioning and negative margin (remember these two have the same value).
This is enough for all browsers except IE to which we have to apply some extra rules. These additions mean we end up with the following as our final CSS:
blockquote {
position: relative;
text-indent: 2em;
}
.bqstart,
.bqend { font-size: 300%; }
/* apply IE specific rules first */
.bqstart {
text-indent: 0;
margin: -0.6em 0 -2em 0;
float: left;
}
blockquote > .bqstart {
/* add extra non-ie rules */
position: absolute;
top: -0.2em;
left: 0;
/* remove IE specific rules */
float: none;
margin: 0;
}
.bqend {
position: absolute;
margin-top: -0.6em;
right: 0;
text-indent: 0;
}
blockquote > .bqend {
margin-top: -0.2em;
}
The absolute positioning method was producing widely different results on the opening quote in each version of IE on the PC, it even removed the text-indent in IE 5.5 - which re-appeared when the following solution was applied.
So I returned to Simon’s solution to fix this. In this case as we’re only dealing with one family of browsers, and thankfully the results are the same in all three versions of IE on the PC, we only have to apply values to the top and bottom margins for IE.
These IE specific rules are then over-ridden using the child selector, so every other browser gets the original CSS in the cascade.
The closing quotation mark was, thankfully, appearing in the same place in all three versions of IE and in pretty much the same place as every other browser, so it was simply a matter of increasing the size of the negative top margin, note that this is again the same value applied to the opening quotation mark. If you’re not a perfectionist you could even get away with accounting for this tiny difference without loosing any sleep.
See the demo page for the final results.
Browser Support
Tested with:
PC : Firefox 1.5, Opera 8.5, NS 7.1, IE 5, 5.5, 6
Mac : Safari 2.0, Firefox 1.5
Notes:
- Firefox 1.5 on the Mac only the closing quotation mark overlaps the text where the last line is full width. This is because the text-indent is not been applied to the span that contains the and I can’t seem to make it apply it.
- In the demo when I added a background color the opening quotation mark disappeared in IE 5.5 and IE 6.0, this was solved by adding the ever useful IE CSS bug fixer known
position: relative;.
I’ve not had chance to test it on a Mac yet, but when I do I’ll post the results. Update: I’ve just tested on the Mac and have added the browsers above, I must also apologise to my Safari visitors as I noticed a bug with the code example areas - which I’ve now fixed.
Something a little weird is going on here for me, IE 5.0 is applying the rules within the child selector, I’m pretty sure that it shouldn’t but can’t explain why it is. Anyhow if this is a common occurrence the absolute positioning solution it ends up applying seems to work fine (go figure).