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 CSS with some specific targeting of IE. However I believe that the CSS rules and their roles in my solution are clearer to understand and thus change to reproduce the effect accordingly.

For the eager among you check out the demo page for the final results, then read how I executed it.

First the markup:

HTML:
  1. <pre class="code">
  2.     <span class="bqstart">&#8220;</span>I'm a blockquote and I'm loving the big curly quotes I have.<span>&nbsp;</span><span class="bqend">&#8221;</span>
  3. </blockquote>

The only addition here is the span before the closing quotation mark, which contains a single non-breaking space character.

The CSS

CSS:
  1. blockquote {
  2.     position: relative;
  3.     text-indent: 2em;
  4. }
  5.  
  6. .bqstart,
  7. .bqend { font-size: 300%; }
  8.  
  9. .bqstart {
  10.     text-indent: 0;
  11.     position: absolute;
  12.     top: -0.2em;
  13.     left: 0;
  14. }
  15.  
  16. .bqend {
  17.     position: absolute;
  18.     margin-top: -0.2em;
  19.     right: 0;
  20.     text-indent: 0;
  21. }

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:

CSS:
  1. blockquote {
  2.     position: relative;
  3.     text-indent: 2em;
  4. }
  5.  
  6. .bqstart,
  7. .bqend { font-size: 300%; }
  8.  
  9. /* apply IE specific rules first */
  10. .bqstart {
  11.     text-indent: 0;
  12.     margin: -0.6em 0 -2em 0;
  13.     float: left;
  14. }
  15.  
  16. blockquote> .bqstart {
  17.     /* add extra non-IE rules */
  18.     position: absolute;
  19.     top: -0.2em;
  20.     left: 0;
  21.     /* remove IE specific rules */
  22.     float: none;
  23.     margin: 0;
  24. }
  25.  
  26. .bqend {
  27.     position: absolute;
  28.     margin-top: -0.6em;
  29.     right: 0;
  30.     text-indent: 0;
  31. }
  32.  
  33. blockquote> .bqend {
  34.     margin-top: -0.2em;
  35. }

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 &nbsp; 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).

Comments

There have been 9 comments so far, join the discussion.

Pages: « 116 17 18 19 20 21 22 23 24 25 [26] Show All

1251. viagra - 3rd Dec 2016 - 12:27 am

http://discount-viagra.gdn/#1123 retail price of viagra,

1252. elimite - 3rd Dec 2016 - 12:45 am

http://buyelimite.site/#4656 elimite cream over the counter,

1253. how can i get cialis - 3rd Dec 2016 - 1:30 am

http://cialis-cost-per-pill.party/#7335 cialis,

1254. citalopram hbr 10 mg tablet - 3rd Dec 2016 - 1:58 am

http://citalopram-online.party/#8355 related site,

1255. augmentin prices - 3rd Dec 2016 - 2:51 am

http://augmentin-generic.science/#1604 augmentin,

1256. buy seroquel cheap - 3rd Dec 2016 - 3:54 am

http://buyseroquel.site/#4611 buy seroquel cheap,

1257. acyclovir - 3rd Dec 2016 - 4:02 am

http://acyclovir800mg.date/#7058 acyclovir,

1258. medrol 4 mg - 3rd Dec 2016 - 4:11 am

http://medrol-16-mg.trade/#1210 medrol cost,

1259. colchicine - 3rd Dec 2016 - 5:05 am

http://colchicine-online.science/#8893 colchicine,

1260. clomid - 3rd Dec 2016 - 5:15 am

http://clomidcost.date/#5946 learn more,

1261. flagyl - 3rd Dec 2016 - 5:33 am

http://flagyl-online.us/#8768 flagyl online,

1262. cialis 5mg price - 3rd Dec 2016 - 5:59 am

http://cialis-online.science/#6827 buy generic cialis online canada,

1263. generic viagra - 3rd Dec 2016 - 7:36 am

http://generic-viagra.cricket/#9636 generic viagra,

1264. allopurinol - 3rd Dec 2016 - 7:45 am

http://allopurinol-247.top/#2268 allopurinol,

1265. albuterol - 3rd Dec 2016 - 8:02 am

http://albuterolnebulizer.gdn/#5801 albuterol,

1266. clomid steroid - 3rd Dec 2016 - 8:45 am

http://buy-clomid-online.gdn/#6004 clomid,

1267. rimonabant online - 3rd Dec 2016 - 9:02 am

http://rimonabantonline.date/#4433 rimonabant online,

1268. generic viagra online canada - 3rd Dec 2016 - 9:28 am

http://pfizerviagra100mg.date/#6684 where can you get viagra over the counter,

1269. go here, - 3rd Dec 2016 - 9:37 am

http://buy-ventolin.space/#9047 ventolin,

1270. wellbutrin - 3rd Dec 2016 - 9:45 am

http://genericwellbutrin.date/#4969 generic wellbutrin,

1271. viagra - 3rd Dec 2016 - 11:05 am

http://vigara.date/#5493 viagra,

1272. zoloft - 3rd Dec 2016 - 11:49 am

http://generic-for-zoloft.cricket/#3652 zoloft,

1273. viagra online - 3rd Dec 2016 - 12:06 pm

http://viagra-online.trade/#9323 viagra,

1274. prednisone 40 mg - 3rd Dec 2016 - 12:24 pm

http://prednisonesteroid.date/#3573 prednisone steroids,

1275. where can i buy flagyl - 3rd Dec 2016 - 12:50 pm

http://flagyl-online.us/#8420 flagyl online,

1276. viagra soft - 3rd Dec 2016 - 1:17 pm

http://buy-viagra-soft.gdn/#5549 viagra soft,

1277. singulair chewable tablets - 3rd Dec 2016 - 1:43 pm

http://singulairforallergies.date/#3306 singulair chewable tablets,

1278. fluoxetine - 3rd Dec 2016 - 2:27 pm

http://buy-fluoxetine.space/#5933 fluoxetine 20mg,

1279. albuterol - 3rd Dec 2016 - 3:03 pm

http://buy-albuterol.site/#5817 albuterol,

1280. viagra - 3rd Dec 2016 - 5:07 pm

http://discount-viagra.gdn/#7476 viagra,

1281. sildalis without prescription - 3rd Dec 2016 - 6:19 pm

http://buy-sildalis.gdn/#8857 sildalis,

1282. acomplia 20mg rimonabant - 3rd Dec 2016 - 6:28 pm

http://buy-rimonabant.site/#5961 rimonabant,

1283. citalopram - 3rd Dec 2016 - 7:30 pm

http://citalopram2011.top/#8911 check out your URL,

1284. viagra - 3rd Dec 2016 - 8:32 pm

http://cheap-viagra.party/#1594 cheap viagra,

1285. crestor - 3rd Dec 2016 - 8:50 pm

http://crestor-generic.cricket/#9345 crestor cost,

1286. sildenafil citrate 100mg - 3rd Dec 2016 - 9:25 pm

http://sildenafil-citrate-100mg.science/#2152 sildenafil citrate 100mg,

1287. ampicillin - 3rd Dec 2016 - 9:34 pm

http://buy-ampicillin.site/#9761 buy ampicillin,

1288. diclofenac 50mg - 3rd Dec 2016 - 9:43 pm

http://diclofenac-50mg.party/#7356 diclofenac 50mg,

1289. amitriptyline - 3rd Dec 2016 - 10:11 pm

http://buyamitriptyline.site/#6710 elavil 25mg,

1290. find out more - 3rd Dec 2016 - 10:38 pm

http://buy-medrol.space/#9462 iv solu-medrol,

1291. zoloft online - 3rd Dec 2016 - 10:55 pm

http://zoloft-online.cricket/#1462 zoloft,

1292. sildalis without prescription - 3rd Dec 2016 - 11:13 pm

http://sildalis-online.science/#8016 sildalis,

1293. singulair - 3rd Dec 2016 - 11:22 pm

http://singulair-10-mg.science/#7016 singulair 10 mg tablet,

Pages:« 116 17 18 19 20 21 22 23 24 25 [26] Show All

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)