kellym / smartquotes.js

Smart quotes are smart typography, and now it’s just a ’script away.
https://smartquotes.js.org
MIT License
150 stars 30 forks source link

Single quotes don’t work when individual characters are wrapped in span tags #54

Open simonhrogers opened 3 years ago

simonhrogers commented 3 years ago

Hello! Firstly thank you so much for this package. It’s a thing of beauty and I’ve enjoyed tailoring it from project to project over the last couple years.

I’ve noticed it gets confused around tags, I don’t actually know if there is a workaround for this or not.

But with the following example, the correct quotes are incorrectly ‘corrected’ so that the front quote-mark also faces backwards.

  <span class="word">
    <span class="letter">‘</span>
    <span class="letter">Q</span>
    <span class="letter">u</span>
    <span class="letter">i</span>
    <span class="letter">c</span>
    <span class="letter">k</span>
  </span>
  <span class="word">
    <span class="letter">E</span>
    <span class="letter">x</span>
    <span class="letter">a</span>
    <span class="letter">m</span>
    <span class="letter">p</span>
    <span class="letter">l</span>
    <span class="letter">e</span>
    <span class="letter">’</span>
  </span>

Writing this up I can definitely see why it might seem unreasonable to even think this would be covered in the first place... but it begs the question whether there should be a tag / class that could be added to elements to have them ignored?

I can see this "ignore" suggestion was made previously, but rendered needless for that individual by a different bugfix.

And incase you’re at all curious as to why I’d want to do such a horrible thing with all those spans... the answer lies here: https://www.brightnotionmusic.com/

Thanks again for all your work on this!

kellym commented 3 years ago

Thanks for the positive note! This is actually a scenario the script should support, since it seems possible to have bold, emphasis, link tags and probably others that may be intertwined with quotes. I'll take a look and see what's going on.

kellym commented 3 years ago

I wrote a test for that code and it passed, but I think there's something else going on.

How are you implementing this? i.e. Is this code being dynamically added? If so, it could be that the code is iterating through the individually added nodes and not recognizing that they're actually siblings that should be treated as one. I'm betting this is the case.

There might be a way for you to work around this, but I'll see if I can come up with an efficient solution that can handle this scenario.