> I lack the web wizardry skills to fix this in a reliable fashion. I guess you’d have to insert invisible elements containing the quote characters you want copied, but I think at that point just give up and don’t even use the q element.<p>Oh, I know this one! We tried <q> for years on my website and gave up (<a href="https://gwern.net/design-graveyard#quote-syntax-highlighting" rel="nofollow noreferrer">https://gwern.net/design-graveyard#quote-syntax-highlighting</a>) for a variety of reasons, but mostly that it caused endless problems with all other kinds of styling or layout. It became clear that <q> is just too far off the CSS/browser happy path to risk using; no one thinks about it and no one will fix your bugs and you're on your own.<p>However, the copy-paste issue wasn't too bad. You would use a copy-paste listener: some JS which fires when the user does a copy-paste, and rewrites the the <q>s to literal Unicode/ASCII quotes. Since you will often wind up using a copy-paste listener for other things (in our case, to remove soft hyphens and replace rendered-math equations with the original LaTeX), this is not a dealbreaker.