Automatic typography substitution

After reading the series of Death to Typewriters articles on Meduim, I decided to have a go at implementing their automatic character substition rules in JavaScript. Following the guide provided at Death to Typewriters: Automatic replacement and clean-up, I created a simple function that can be called as you type, or when text is pasted, into a text area. Certain character combinations and locations are looked for and replaced with other characters such as correct quotes, arrows and ellipsis. I have put the code up on GitHub with a little bit of documentation.

Get code on GiHub

To try it out, type into the box below. Try typing some of these character combinations:

  • [colon][right bracket] is replaced with a smiley
  • [hyphen][hyphen][greater than] is replaced with a right arrow
  • [less than][hyphen][hyphen] is replaced with a left arrow
  • [full stop][full stop][full stop] is replaced with a an ellipsis
  • Hyphen is replaced with a [hair space][Em dash][hair space] between words, and an En dash between numbers
  • Correct single and double quotes will be inserted instead of ‘dumb quotes’
  • Quotes will be replaced with correct prime symbols (feet, inches) when inserted after a number

The full substitution rules can be found in Death to Typewriters: Automatic replacement and clean-up.

Posted toJavascript Web Design