Smart quotes without "breaking" copy and paste?

Question

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"

Answer 1

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.

Answer 2

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.