Update to smart quotes with one line of code
As an engineer, I’m often passed a big block of text as either a PDF or Word document and asked if I can add it into a web application. The easiest way to do this is to copy and paste into a <p/> tag, but that’s not suitable for those with a good eye for typography. When copying and pasting text, single and double quotes will default to dumb quotes, which are not typographically correct.
“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. Below, you can see the difference between the two kinds of quotes in a few of the more popular font families.
It’s a massive pain to search through an entire set of web pages to find every “ or ‘. Fortunately there exists an incredible package — aptly named smartquotes — that will do the hard work for you. Now you can simply copy and paste from a Word or PDF document and add a single line in your code and voila — you have smart quotes throughout!
smartquotes() can be called upon load and will subsequently run over the entire document. And, even better, with smartquotes().listen() it will listen for changes throughout and update as needed.
// React
import smartquotes from 'smartquotes';useEffect(() => {
smartquotes().listen();
}, []);
As the creator of smartquotes writes in the documentation: “And now you have no excuse not to use smart quotes.”
