https://github.com/curiositry/diaeresis

A lightweight (<1kb minified + gzipped) JavaScript library that lets you wield diæreses like C̶h̶u̶c̶k̶ Mary Norris:
https://github.com/curiositry/diaeresis

javascript javascript-library typography

Last synced: 3 days ago
JSON representation

A lightweight (<1kb minified + gzipped) JavaScript library that lets you wield diæreses like C̶h̶u̶c̶k̶ Mary Norris:

• Host: GitHub
• URL: https://github.com/curiositry/diaeresis
• Owner: curiositry
• License: mit
• Created: 2016-12-12T00:31:19.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T21:34:54.000Z (almost 8 years ago)
• Last Synced: 2023-10-20T19:08:40.700Z (about 1 year ago)
• Topics: javascript, javascript-library, typography
• Language: HTML
• Homepage: http://curiositry.github.io/diaeresis
• Size: 43 KB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Diaeresis.js

============

### A lightweight JavaScript library that lets you wield diæreses like ~~Chuck~~ Mary Norris.

## [→ Check out the Demo ←](https://curiositry.github.io/diaeresis)

### Usage:

All you need to do is include the script in your page and initialize it (in this example, using the RawGit CDN so you don’t even have to download it):

```html

  var d = new Diaeresis();

```

By default, it will run on the contents of `#diaeresis`, and use the small built-in dictionary. But you can change all that when you initialize it:

```javascript

var d = new Diaeresis({

  selector: "myCustomId",

  dictionary: {

    "bronte": "brontë",

    "find": "replace"

  }

});

```

In the above example, diaeresis will run on the element with the ID #myCustomId, which is handy if you don't want to change your markup to include the Diaeresis ID. And in the above example, we define additional dictionary entries. The dictionary object you give Diaeresis when you initialize it gets merged into the default dictionary, but it takes priority. So you can add new items, or overwrite existing items. (For example: if you think that reëlect should be spelled with a hyphen, you could add a rule like this: `"reelect": "re-elect"`, which would override the default rule that changes reelect to reëlect.)

You’ll probably want to run Diaeresis asynchronously, like this:

```html

  document.addEventListener("DOMContentLoaded", function(event) {

    var d = new Diaeresis();

  }

```

### Going wild

While the small, built-in dictionary only adds diaereses, the script itself is much more flexible. Here a few examples of other uses you could put it to:

* Converting "dumb" quotes to “smart” quotes, fake (--) em-dashes to real em-dases (—), and other ersatz punctuation marks to their respective Unicode characters.

* Adding other diacritical marks — such as acute (`´ `) and grave (`` ` ``) accents — to words that ought to have them but rarely do, such as “élite” and “résumé”.

* Converting ASCII smiley faces to Unicode emoticons, and other symbols to their official Unicode character.

* Adding fancy ligatures (diaeresis → diæresis, for example).

You can use diaeresis.js for any of the above just by adding custom rules to the “dictionary”:

```javascript

var d = new Diaeresis({

  dictionary: {

    "--": "—",

    "elite": " élite",

    "<3": "❤",

    "diaeres": "diæres"

  }

});

```

(And Diaeresis supports regular expressions, if you want to get fancy.)