Citations intelligentes sans "casser" copier et coller?

Question

Je n'aime vraiment pas les "citations intelligentes" pour une raison simple - quand je copie du texte les contenant, il n'a plus l'original "" comme il a été tapé, au lieu je me retrouve avec des symboles Unicode. Les citations intelligentes sont une amélioration visuelle, donc ne devrait pas vraiment être "cuit" dans le texte, alors .. Je me demandais, il est possible d'afficher les citations intelligentes en utilisant CSS?

En gros, le texte sera affiché comme ..

This is an “example” 

..mais voir le code source, ou copier-coller montreraient:

This is an "example" 

Answer 1

Si vous le style de la « s avec font-style: italic ils semblent imiter de près les citations intelligentes, mais je ne suis pas sûr que vous seriez plus heureux entourant chaque instance avec <em> et

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

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

Ou, peut-être si vous utilisez les :before et :after classes, Psuedo

.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>. 

Mais vous n'êtes pas allez obtenir les citations dans la pâte de copie &.

Je pense que vous pourriez avoir besoin d'une forme de JS pour réaliser ce que vous voulez; pour styliser les citations automatiquement, et permettre leur copie & collé dans un format non-magic-quoted.

Edité pour ajouter que je partage votre aversion pour les citations magiques et leurs problèmes de collage &. Et plus tard édité pour modifier les étiquettes <em> haineux, et les rendre, à la place, <span> s.

... il me semble, maintenant, que vous pourriez peut-être aller un peu plus loin, mais il se peut que ce soit trop de dactylographie pour trop peu de récompense -real-.

.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> 

Mais, honnêtement, je ne vois pas un résultat positif de l'effort supplémentaire.

Answer 2

En théorie HTML a <q> élément pour résoudre ce problème. Malheureusement, en pratique, vous ne recevrez aucun devis (IE ne le supporte pas, Gecko ne copie pas de guillemets) ou des citations intelligentes copiées.