2

I really dislike "smart quotes" for one simple reason - when I copy text containing them, it no longer has the original "" as was typed, instead I end up with Unicode symbols.

The smart quotes are a visual improvement, so shouldn't really be "baked into" the text, so.. I was wondering, it is possible to display the smart quotes using CSS?

Basically, the text would be displayed as..

This is an “example”

..but viewing the source, or copying and pasting would show:

This is an "example"
3
  • Actually the smart quotes require semantic context, which is reasonable for a word processor with some natural-language smarts but a heavier burden on the average HTML client, which isn't interacting with the user. Anyway, lsquo and rdquo are available in iso-8859-1 encodings, so they don't require special handling in most European non-Unicode scenarios. Good plaintext editors don't have any problem with the symbols anyway; in HTML they reduce to & ldquo; and & rsquo; named entities when you're not using a unicode encoding.
    – JasonTrue
    Jul 6, 2009 at 19:18
  • sorry, typo: & rdquo; rather than & rsquo;
    – JasonTrue
    Jul 6, 2009 at 19:19
  • Why do people refer to them as smart quotes? They're not smart quotes or curly quotes for that matter. The proper name for them is quotes. What you call quotes ( " ) is in reality a prime. We can blame the typewriter for the confusion but using a prime for a quote is typographically incorrect.
    – Mood
    Dec 29, 2012 at 11:27

2 Answers 2

3

In theory HTML has <q> element to solve that problem.

Unfortunately in practice you'll get either no quotes copied at all (IE doesn't support it, Gecko doesn't copy quotes) or smart quotes copied.

0

If you style the "s with font-style: italic they appear to closely mimic the smart-quotes, but I'm not sure that you'd be any happier surrounding each and every instance with <em> and </em>.

.magic-quotes {font-style: italic; }

<span class="magic-quotes">"</span>quoted-text<span class="magic-quotes">"</span>

Or, possibly if you use the :before and :after psuedo-classes,

    .stuff-to-magic-quote:before
       {content: '"';
        font-style: italic; }

    .stuff-to-magic-quote:after
       {content: '"';
        font-style: italic; }

<span class="stuff-to-magic-quote">this text would be quoted</span>.

But then you're not going to get the quotes in the copy & paste.

I think you might need some form of JS to achieve what you want; to style the quotes automatically, and allow for their being copy & pasted in non-magic-quoted format.

Edited to add that I share your dislike of magic-quotes and their copy & paste issues. And later edited to amend the heinous <em> tags, and make them, instead, <span>s.

...it occurs to me, now, that perhaps you could go a little further, but it might be too much typing for too little -real- reward.

.original-quotes-open {margin: 0 -2em 0 0;
                       z-index: 0; }

.original-quotes-close {margin: 0 0 0 -2em;
                       z-index: 0; } /* the idea of the -2em and z-index is to position the original non-magic quotes behind the text, but not remove them from the document */

span.quoted-text {z-index: 2; /* or higher than the .original-quotes... classes */

span.quoted-text:before {content: "“"; }

span.quoted-text:after {content: "”"; }

<span class="original-quotes-open">"</span><span class="quoted-text">This text is quoted</span><span class="original-quotes-close">"</span>

But, honestly, I'm not seeing a positive outcome from the extra effort.

5
  • 5
    Why emphasize quote? Using semantic element for non-semantic hack is just as bad as abuse of presentational element. In this case <i> is appropriate. You only want to change looks, not meaning!
    – Kornel
    Jul 6, 2009 at 19:34
  • Well, yes. Agreed; I'll change that. Honestly? It was just less typing... =/ Jul 6, 2009 at 21:48
  • 2
    In Opera this gives "“This text is quoted”". Unselectable GC in Gecko/WebKit is only implementation issue and should not be relied upon.
    – Kornel
    Jul 7, 2009 at 18:15
  • @pornel: upvoted, I never thought to check in Opera. Plus generated content is unreliable, at best, in IE, so while my answer was the best I could come up with, I certainly don't recommend using my methods. Jul 7, 2009 at 19:17
  • Italic does not resemble curly quotes to anyone with any eye for detail. Dec 29, 2012 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.