├── .editorconfig ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── dist ├── typebetter.js └── typebetter.min.js ├── example └── index.html ├── package.json ├── scripts └── build.sh ├── src └── typebetter.js └── typebetter.gif /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | 10 | [*.md] 11 | indent_style = tab 12 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to TypeBetter 2 | 3 | ## Install development dependencies 4 | 5 | TypeBetter's build process uses [npm](https://www.npmjs.com/) and [Node.js](http://nodejs.org/). If you're using a Mac, the easiest way to install npm and Node.js (and plenty of other great tools) is with [Homebrew](http://brew.sh/): 6 | 7 | brew install node 8 | 9 | If you're using a different operating system, use a different package manager, or prefer not to use Homebrew, check out the [Node.js Downloads page](http://nodejs.org/download/). 10 | 11 | ## Get set up to contribute 12 | 13 | Contributing to TypeBetter is pretty straightforward: 14 | 15 | 1. Fork the TypeBetter repo and clone your fork. 16 | 1. Install development dependencies by running `npm install` from the root of the project. 17 | 1. Create a feature branch for the issue or new feature you're looking to tackle: `git checkout -b your-descriptive-branch-name`. 18 | 1. _Write some code!_ 19 | 1. Commit your changes: `git commit -am 'Add some new feature or fix some issue'`. 20 | 1. Push the branch to your fork of TypeBetter: `git push origin your-descriptive-branch-name`. 21 | 1. Create a new Pull Request and we'll give it a look! 22 | 23 | ## "But what files do I change?!?" 24 | 25 | Excellent question. TypeBetter's source code is in the file `src/typebetter.js`. Make your changes here! 26 | 27 | When you're done working (and before you push your code or issue a pull request), run `npm run build` from the root of the project to recreate the files in the `dist` folder. This task will generate compiled and compressed versions of the project. 28 | 29 | **Do not directly edit the files in the `dist` folder!** 30 | 31 | ## Code Style 32 | 33 | Code styles are like opinions: Everyone's got one and yours is better than mine. TypeBetter's coding styles are defined in the `.editorconfig` file which uses the [EditorConfig](http://editorconfig.org/) syntax. There are [a number of great plugins for a variety of editors](http://editorconfig.org/#download) that utilize the settings in the `.editorconfig` file. 34 | 35 | Basically, follow along with the conventions present in the existing code as best you can. 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Vox Media Inc., Yuri Victor. 2 | 3 | BSD license 4 | 5 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 8 | 9 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 10 | 11 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 12 | 13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TypeBetter 2 | 3 | Fixes typography while a user types. Making dumb quotes smart again. 4 | 5 | ![GIF showing type being corrected live!](typebetter.gif) 6 | 7 | [See it live!](http://yurivictor.com/smartquotes/) 8 | 9 | Perpetually a work in progress. Currently succeeds more than it fails. 10 | 11 | ## Replacements 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
BeforeAfter
Smart Quotes"Foo"“Foo”
'Foo'‘Foo’
ApostrophesFoo'sFoo’s
Primes and Double Primes
(feet, inches, latitude, and longitude)		2' 4"2′ 4″
Abbreviated Years'76’76
EllipsesSo...So…
Em Dash--—
58 | 59 | ## Contributors 60 | 61 | - [Yuri Victor](https://github.com/yurivictor/) 62 | - [Jason Santa Maria](https://github.com/jasonsantamaria) 63 | - [Scott Kellum](https://github.com/scottkellum) 64 | - [Jeremy Keith](https://github.com/adactio) 65 | - [Jason Garber](https://github.com/jgarber623) 66 | 67 | If you'd like to contribute to TypeBetter, check out [CONTRIBUTING.md](CONTRIBUTING.md) for details. 68 | 69 | ## License 70 | 71 | TypeBetter is © 2014 [Vox Media Inc.](http://www.vox.com/), Yuri Victor. 72 | 73 | Additional legal information can be found in the [LICENSE](LICENSE) file. 74 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typebetter", 3 | "description": "Fixes typography while a user types. Making dumb quotes smart again.", 4 | "version": "0.0.1", 5 | "main": "dist/typebetter.js", 6 | "license": "BSD", 7 | "ignore": [ 8 | "**/.*", 9 | "package.json", 10 | "typebetter.gif", 11 | "example" 12 | ], 13 | "keywords": [ 14 | "typography" 15 | ], 16 | "authors": [ 17 | "Yuri Victor (http://yurivictor.com/)" 18 | ], 19 | "homepage": "https://github.com/yurivictor/typebetter", 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/yurivictor/typebetter.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /dist/typebetter.js: -------------------------------------------------------------------------------- 1 | var TypeBetter = TypeBetter || {}; 2 | 3 | TypeBetter = { 4 | input: "", 5 | init: function(input) { 6 | this.input = input; 7 | this.bindUIActions(); 8 | }, 9 | bindUIActions: function() { 10 | if (this.input.addEventListener) { 11 | var actions = [ "propertychange", "change", "input", "paste" ]; 12 | for (var i = 0, j = actions.length; i < j; i++) { 13 | this.input.addEventListener(actions[i], this.handleQuotes, false); 14 | } 15 | } 16 | }, 17 | handleQuotes: function() { 18 | var start = this.selectionStart, end = this.selectionEnd; 19 | var new_value = TypeBetter.input.value.replace(/(\W|^)"/g, "$1“").replace(/(\u201c|"[^"]*)([^"]*)(\u201c|"[^"]*)/g, "$1$2”").replace(/(\W|^)'(\S)/g, "$1‘$2").replace(/(\W|^)\u2032(\S)/g, "$1‘$2").replace(/(\W|^)\u2019(\S)/g, "$1‘$2").replace(/([a-z])'([a-z])/gi, "$1’$2").replace(/((\u2018[^']*)|[a-z])'([^0-9]|$)/gi, "$1’$3").replace(/(\B|^)\u2018(?=([^\u2019]*\u2019\b)*([^\u2019\u2018]*\W[\u2019\u2018]\b|[^\u2019\u2018]*$))/gi, "$1’").replace(/(\u2019|')([0-9]{2}[^\u2019]*)(\u2018([^0-9]|$)|$|\u2019[a-z])/gi, "’$2$3").replace(/'''/g, "‴").replace(/("|'')/g, "″").replace(/'/g, "′").replace(/(\u2032|′)("|”|“)/g, "′”").replace(/(\u2019|\u2018)("|”|“)/g, "’”").replace(/(\.\.\.)/, "…").replace(/\u2013\u2013|--/g, " — ").replace(/(\s)(\u2018|')(n)(\u2019|')(\s)/gi, " ’n’ "); 20 | TypeBetter.input.value = new_value; 21 | this.setSelectionRange(start, end); 22 | } 23 | }; -------------------------------------------------------------------------------- /dist/typebetter.min.js: -------------------------------------------------------------------------------- 1 | var TypeBetter=TypeBetter||{};TypeBetter={input:"",init:function(e){this.input=e,this.bindUIActions()},bindUIActions:function(){if(this.input.addEventListener)for(var e=["propertychange","change","input","paste"],t=0,u=e.length;u>t;t++)this.input.addEventListener(e[t],this.handleQuotes,!1)},handleQuotes:function(){var e=this.selectionStart,t=this.selectionEnd,u=TypeBetter.input.value.replace(/(\W|^)"/g,"$1“").replace(/(\u201c|"[^"]*)([^"]*)(\u201c|"[^"]*)/g,"$1$2”").replace(/(\W|^)'(\S)/g,"$1‘$2").replace(/(\W|^)\u2032(\S)/g,"$1‘$2").replace(/(\W|^)\u2019(\S)/g,"$1‘$2").replace(/([a-z])'([a-z])/gi,"$1’$2").replace(/((\u2018[^']*)|[a-z])'([^0-9]|$)/gi,"$1’$3").replace(/(\B|^)\u2018(?=([^\u2019]*\u2019\b)*([^\u2019\u2018]*\W[\u2019\u2018]\b|[^\u2019\u2018]*$))/gi,"$1’").replace(/(\u2019|')([0-9]{2}[^\u2019]*)(\u2018([^0-9]|$)|$|\u2019[a-z])/gi,"’$2$3").replace(/'''/g,"‴").replace(/("|'')/g,"″").replace(/'/g,"′").replace(/(\u2032|′)("|”|“)/g,"′”").replace(/(\u2019|\u2018)("|”|“)/g,"’”").replace(/(\.\.\.)/,"…").replace(/\u2013\u2013|--/g," — ").replace(/(\s)(\u2018|')(n)(\u2019|')(\s)/gi," ’n’ ");TypeBetter.input.value=u,this.setSelectionRange(e,t)}}; -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | type better example 7 | 8 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typebetter", 3 | "version": "0.0.1", 4 | "description": "Fixes typography while a user types. Making dumb quotes smart again.", 5 | "keywords": [ 6 | "typography" 7 | ], 8 | "homepage": "https://github.com/yurivictor/typebetter", 9 | "bugs": { 10 | "url": "https://github.com/yurivictor/typebetter/issues" 11 | }, 12 | "license": "BSD", 13 | "author": "Yuri Victor (http://yurivictor.com/)", 14 | "main": "dist/typebetter.js", 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/yurivictor/typebetter.git" 18 | }, 19 | "scripts": { 20 | "build": "./scripts/build.sh" 21 | }, 22 | "devDependencies": { 23 | "uglify-js": "^2.4.16" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scripts/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | uglifyjs src/typebetter.js --beautify 'indent-level=2' --output dist/typebetter.js 4 | uglifyjs src/typebetter.js --compress --mangle --output dist/typebetter.min.js 5 | -------------------------------------------------------------------------------- /src/typebetter.js: -------------------------------------------------------------------------------- 1 | var TypeBetter = TypeBetter || {}; 2 | 3 | TypeBetter = { 4 | 5 | input: '', 6 | newValue: '', 7 | characters: [], 8 | deletions: [], 9 | deletedChars: {}, 10 | betterType: ['\u201c', '\u201d', '\u2018', '\u2019', '\u2032', '\u2033', '\u2034'], 11 | dumbType: ['\"', "\'", '-', '.'], 12 | 13 | 14 | init: function(input) { 15 | // Set input field 16 | this.input = input; 17 | // Add events 18 | this.bindUIActions(); 19 | }, 20 | 21 | settings: { 22 | on: true || localStorage.getItem('typebetter-on') 23 | }, 24 | 25 | bindUIActions: function() { 26 | // Check for on off 27 | this.input.onkeyup = function(e) { TypeBetter.toggleType(e) }; 28 | // Check every input 29 | if (this.input.addEventListener) { 30 | var actions = ['propertychange', 'change', 'input', 'paste']; 31 | 32 | for (var i = 0, j = actions.length; i < j; i++) { 33 | this.input.addEventListener(actions[i], this.handleType, false); 34 | } 35 | } 36 | }, 37 | 38 | toggleType: function(e) { 39 | // If control and single quote are pressed together 40 | // toggle typebetter on and off 41 | if (e.which == '222' && e.ctrlKey == true) { 42 | TypeBetter.settings.on = ! TypeBetter.settings.on; 43 | // Save this update to localStorage 44 | localStorage.setItem("typebetter-on", TypeBetter.settings.on); 45 | } 46 | }, 47 | 48 | handleType: function() { 49 | // Don't do anything if typebetter is turned off 50 | if ( ! TypeBetter.settings.on ) { 51 | return false; 52 | } 53 | // get current cursor position 54 | var start = this.selectionStart, 55 | end = this.selectionEnd, 56 | tempValue = TypeBetter.input.value; 57 | 58 | TypeBetter.newValue = tempValue 59 | // beginning " 60 | .replace(/(\W|^)"/g, '$1\u201c') 61 | // ending " 62 | .replace(/(\u201c|"[^"]*)([^"]*)(\u201c|"[^"]*)/g, '$1$2\u201d') 63 | // beginning ' 64 | .replace(/(\W|^)'(\S)/g, '$1\u2018$2') 65 | .replace(/(\W|^)\u2032(\S)/g,'$1\u2018$2') 66 | .replace(/(\W|^)\u2019(\S)/g,'$1\u2018$2') 67 | // conjunction's possession 68 | .replace(/([a-z])'([a-z])/ig, '$1\u2019$2') 69 | // ending ' 70 | .replace(/((\u2018[^']*)|[a-z])'([^0-9]|$)/ig, '$1\u2019$3') 71 | // backwards apostrophe 72 | .replace(/(\B|^)\u2018(?=([^\u2019]*\u2019\b)*([^\u2019\u2018]*\W[\u2019\u2018]\b|[^\u2019\u2018]*$))/ig, '$1\u2019') 73 | // abbreviated years like '82 74 | .replace(/(\u2019|')([0-9]{2}[^\u2019]*)(\u2018([^0-9]|$)|$|\u2019[a-z])/ig, '\u2019$2$3') 75 | // triple prime 76 | .replace(/'''/g, '\u2034') 77 | // double prime 78 | .replace(/("|'')/g, '\u2033') 79 | // prime 80 | .replace(/'/g, '\u2032') 81 | // hack for prime end quote 82 | .replace(/(\u2032|′)("|”|“)/g, '′”') 83 | // hack for apostrophe end quote 84 | .replace(/(\u2019|\u2018)("|”|“)/g, '’”') 85 | // ellipses 86 | .replace(/(\.\.\.)/, '\u2026') 87 | // mdash 88 | .replace(/\u2013\u2013|--/g, ' \u2014 ') 89 | // rock 'n' roll 90 | .replace(/(\s)(\u2018|')(n)(\u2019|')(\s)/gi, ' ’n’ '); 91 | 92 | // Replace headline 93 | TypeBetter.input.value = TypeBetter.newValue; 94 | // Restore cursor position 95 | this.setSelectionRange(start, end); 96 | } 97 | 98 | }; 99 | -------------------------------------------------------------------------------- /typebetter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yurivictor/typebetter/f270b177682f6b99f218f8c96ae411a7956d130c/typebetter.gif --------------------------------------------------------------------------------