Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

Typographic glyphs

via

Shortcuts and proper use

name glyph mac other description
curly single quotes ‘ ’ Option+] and Shift+Option+] ALT-0145 and ALT-0146 hover for description
curly double quotes “ ” Option+[ and Shift+Option+[ ALT-0147 and ALT-0148 -
apostrophe Option-Shift-] ALT-0146 -
hyphen - - - hover for description
en-dash Option-Hyphen ALT-0150 hover for description
em-dash Option-Shift-Hyphen ALT-0151 hover for description
ellipsis Option-Semicolon ALT-0133 hover for description
back-tick ` Option-Tilde ALT-96 hover for description

Credits and bonus :

/* Note: dling stand for extended ligatures */
body {
-moz-font-feature-settings:"liga=1, dlig=1";
-moz-font-feature-settings:"liga", "dlig"; /* EDIT: new syntax for FF 15+ */
-ms-font-feature-settings:"liga", "dlig";
-o-font-feature-settings:"liga", "dlig";
-webkit-font-feature-settings:"liga", "dlig";
font-feature-settings:"liga", "dlig";
}
// ligature.js v1.0
// http://code.google.com/p/ligature-js/
ligature = function(extended, node) {
if (!node) {
ligature(extended, document.body);
}
else {
if (node.nodeType == 3 && node.parentNode.nodeName != 'SCRIPT') {
node.nodeValue = node.nodeValue
.replace(/ffl/g, '')
.replace(/ffi/g, '')
.replace(/fl/g, '')
.replace(/fi/g, '')
.replace(/ff/g, '')
.replace(/ij/g, 'ij')
.replace(/IJ/g, 'IJ');
if (extended) {
node.nodeValue = node.nodeValue
.replace(/ae/g, 'æ')
.replace(/A[Ee]/g, 'Æ')
.replace(/oe/g, 'œ')
.replace(/O[Ee]/g, 'Œ')
.replace(/ue/g, '')
.replace(/st/g, '');
}
}
if (node.childNodes) {
for (var i=0; i < node.childNodes.length; i++) {
ligature(extended, node.childNodes.item(i));
}
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment