OCD Editor: Dealing With Weird Quotation Marks

OCD Editor: Dealing With Weird Quotation Marks

As an editor of online materials, I find myself with a curious problem: how to deal with single and double quotation marks. Because I suffer from a mild form of OCD, I like these always to be represented by the typewriter keys ' and ". Then I let WordPress, or whatever other content management system I’m using, convert these characters into the typographic symbols with left and right sides.

For example:

“The sky above the port was the color of television, tuned to a dead channel.”

And:

‘The sky above the port was the color of television, tuned to a dead channel.’

But as an editor, I get text in many forms. Rarely are single and double quotes delivered as ' and ". Instead, they are entered as ‘/’ and “/”, as well as ‘/’ and “/”.

If those last two sets are confusing you, they are just how HTML actual stores these right and left quotation marks. All you need to know is that writers actually do submit text with these symbols in the text and they are perfectly correct.

The problem is that I don’t like them. I like my text to be straight ASCII7, and so I like my straight ' and " keys. If I had to choose from the other sets, I would take ‘ over ‘.

The other day, I was talking to a fellow editor who was complaining about this. She didn’t mind ‘ so much, but ‘ drove her crazy. It’s understandable; they really do make the raw HTML harder to read.

Since I was no longer alone in my complaints, it occurred to me that I should write a program to fix this problem. At first, I thought I would write it in PHP, given that I really like its string (short for “text string” or more generally a collection of characters) library. But then I thought it would be downright trivial to do with JavaScript.

One great thing with JavaScript is that you don’t even need a server. You can just run the program locally on your machine. And a few minutes later, I had the following program:

Remove Annoying Quotation Marks

This program removes annoying special quotation marks and replaces them with normal ASCII7 characters. The characters are:

  • ”
  • “
  • ’
  • ‘

Text Box

Source Code

I often pine for the days when you had to really get inside a machine. But I have to admit that it’s pretty cool to be able to write a program that solves an annoying problem like this with almost no thought or time.

Here is the entire program. All you would have to do is put it in a file with an html extension and then run it in a browser on your computer.

<html>
  <head>
    <title>Remove Annoying Quotation Marks</title>
  <script>
function Clean() {
  var t1, t2;
  t1 = document.getElementById("text1").value;
  t2 = t1.replace(/”/g,"\"");
  t1 = t2.replace(/“/g,"\"");
  t2 = t1.replace(/“/g,"\"");
  t1 = t2.replace(/”/g,"\"");
  t2 = t1.replace(/‘/g,"'");
  t1 = t2.replace(/’/g,"'");
  t2 = t1.replace(/‘/g,"'");
  t1 = t2.replace(/’/g,"'");
  document.getElementById("text1").value = t1;
}
  </script>
  </head>
  <body>
    <h1>Remove Annoying Quotation Marks</h1>
    <p>This program removes annoying special quotation
    marks and replaces them with normal ASCII7 characters.
    The characters are:</p>
    <ul>
      <li>&rdquo;</li>
      <li>&ldquo;</li>
      <li>&rsquo;</li>
      <li>&lsquo;</li>
      <li>“</li>
      <li>”</li>
      <li>‘</li>
      <li>’</li>
    </ul>
    <h2>Text Box</h2>
    <div style="text-align: center;
    margin-left: auto;
    margin-right: auto;"><textarea rows="5"
    cols="50" id="text1"></textarea></div>
    <p style="text-align: center;"><input
    onClick="Clean();" type="button"
    value="Clean" /></p>
  </body>
</html>

You can download the program if you wish:

RmQuotes.html

Conclusion

I realize this is pretty arcane. It combines a number of things people don’t care about: computer programming, editing, and my neuroses. But I still think it’s interesting.

3 thoughts on “OCD Editor: Dealing With Weird Quotation Marks

  1. Nice program, Frank! It solves a problem for me.

    I created a website about six years ago and I’ve added dozens of pages since. It’s all hand-coded HTML; my editing tool is Notepad. (If I were to start all over again I’d use something like WordPress, but at the time I wanted to understand HTML and basic webpage design and now I’ve got too much legacy code to change.)

    I use Microsoft Word for most of my writing. Whenever I copy Word text into HTML I’ve got to convert all the smart quotes into dumb quotes(?) and your program makes this very easy!

    I can’t remember exactly why smart quotes are bad… I think it’s some combination of certain web browsers with certain settings that turns smart quotes into hieroglyphics. I’ve never reproduced the problem on my own computers but whenever I accidentally publish a page which includes smart quotes my Chief Editor (who is also my youngest daughter) sends me a strongly-worded e-mail of complaint.

  2. I’m not a big fan of smart quotes for writing. I hate it when the computer auto-anythings my text, except maybe for wrapping it at the edge of the box. Still, I enjoy the irony of there being all these computer people spending their days implementing stuff like smart quotes and the rest of us writing programs to undo all their hard work.

  3. A couple of thoughts – nothing’s wrong with your script, it works.

    It looks like you’re using two variable for the string so you can pass the string back and forth from one to the other. That kind of thing makes sense when it’s assembly language and you’re referring to a register. But in javascript, you can use the same variable on both sides of the = sign.

    It also looks like you’re replacing each type of quote character twice. Maybe I’m missing something.

    Finally, when you’re using a method of an object, the result is a modified copy of the object. This can be used to call another method, or the same method again. So you could do something like this:

    function Clean() {
    var t1 = document.getElementById(“myTextarea”).value;
    t1 = t1.replace(/”/g,”\””).replace(/“/g,”\””).replace(/‘/g,”‘”).replace(/’/g,”‘”); */
    document.getElementById(“myTextarea”).value = t1;
    }

    or even this:

    function Clean () {
    document.getElementById(“myTextarea”).value =
    document.getElementById(“myTextarea”).value.replace(/”/g,”\””).replace(/“/g,”\””).replace(/‘/g,”‘”).replace(/’/g,”‘”);
    }

Leave a Reply