smartquotes.js

"Smart quotes are smart typography."

"Better than a 65'6" whale." – Captain Ahab
"It's my '#1' choice!" – 12" Foam Finger from '93

Download Now View on Github

What are smart quotes?

"Smart quotes," or "curly quotes," are the proper typographical way to represent quotation marks. Unfortunately, in order to save space on the keyboard, the dumb quote was created. Smartquotes.js is here to convert all your dumb quotes back to smart ones.

Why should I use smart quotes?

Smart quotes are the correct way. They increase legibility and professionalism. Dumb quotes are for the lazy person. Dumb quotes are unprofessional. And now you have no excuse not to use smart quotes.

What about measurements? What quotes do I use?

Measurements use what are called "primes." Smartquotes.js handles those too.

Okay, so what about a backwards apostrophe?

Technically, words that are shortened at the beginning require a backwards apostrophe. There's only so much a script can do by itself, though. Smartquotes.js tries to catch what it can, namely abbreviated years like '13 and places like the 'burbs, but in the cases that it can't—there's not much ’splainin' to do—just use &rsquo; or try wrapping the word in a <span> tag.

What do I need to change in my code?

Just include the script and initialize it, and smartquotes.js will detect all your dumb quotes and convert them to the respective smart versions. If you use jQuery, put this script after jQuery and smartquotes.js will use jQuery's onload event. Otherwise, smartquotes.js doesn't have any dependencies and can be used by itself.

An NPM package is also available to convert strings to smarter versions of themselves. Please consult the README for details on installing from NPM or Bower.


      // Use it via requiring in a script (i.e. Node, webpack or the like):
      const smartquotes = require('smartquotes');
      smartquotes('My "string" needs smart quotes.');

      // Or just include the script somewhere on the page, run it, and you're good to go.
      // Notice that quotes are not substituted in code blocks.

      <script src="smartquotes.js"></script>
      <script>smartquotes();</script>

      // For dynamically added elements, you can listen for changes:
      <script>smartquotes().listen();</script>
      

Additional Reading