Typographer is a plugin for the editor that automatically transforms text symbols, replacing straight quotes with typographic ones, converting (c) into ©, and enhancing text readability.
<!DOCTYPE html>
<html>
<head>
<title>Redactor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/redactor.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-folder/redactor.js"></script>
<script src="/your-folder/plugins/typographer/typographer.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['typographer']
});
</script>
</body>
</html>You can replace the plugin rules with your own like this:
Redactor('#entry', {
plugins: ['typographer'],
typographer: {
rules: [
{ pattern: /(\d+) ohm/g, replacement: (_, d) => `${d}Ω` }, // ohmSymbol
{ pattern: /(\d+) micro/g, replacement: (_, d) => `${d}µ` }, // microSymbol
]
}
});
You can add your own rules for the plugin like this:
Redactor('#entry', {
plugins: ['typographer'],
typographer: {
addRules: [
{ pattern: /1\/6/g, replacement: '⅙' }, // oneSixth
{ pattern: /5\/6/g, replacement: '⅚' }, // fiveSixths
{ pattern: /1\/8/g, replacement: '⅛' }, // oneEighth
{ pattern: /3\/8/g, replacement: '⅜' }, // threeEighths
{ pattern: /5\/8/g, replacement: '⅝' }, // fiveEighths
{ pattern: /7\/8/g, replacement: '⅞' }, // sevenEighths
]
}
});
Here's a list of all the default rules:
| Pattern | Replacement | Description |
|---|---|---|
| -- | — | Replaces double hyphen with an em dash |
| ... | … | Replaces three dots with an ellipsis |
| (^|\s)" | “Text | Replaces straight double quotes at the beginning of a word with an opening curly quote |
| "(\s|$) | Text” | Replaces straight double quotes at the end of a word with a closing curly quote |
| (^|\s)' | ‘Text | Replaces straight single quotes at the beginning of a word with an opening curly quote |
| '(\s|$) | Text’ | Replaces straight single quotes at the end of a word with a closing curly quote |
| <- | ← | Replaces '<-' with a left arrow |
| -> | → | Replaces '->' with a right arrow |
| (c) | © | Replaces '(c)' with the copyright symbol |
| (r) | ® | Replaces '(r)' with the registered trademark symbol |
| (tm) | ™ | Replaces '(tm)' with the trademark symbol |
| (sm) | ℠ | Replaces '(sm)' with the service mark symbol |
| 1/2 | ½ | Replaces '1/2' with the fraction ½ |
| 1/4 | ¼ | Replaces '1/4' with the fraction ¼ |
| 3/4 | ¾ | Replaces '3/4' with the fraction ¾ |
| 1/3 | ⅓ | Replaces '1/3' with the fraction ⅓ |
| 2/3 | ⅔ | Replaces '2/3' with the fraction ⅔ |
| 1/5 | ⅕ | Replaces '1/5' with the fraction ⅕ |
| 2/5 | ⅖ | Replaces '2/5' with the fraction ⅖ |
| 3/5 | ⅗ | Replaces '3/5' with the fraction ⅗ |
| 4/5 | ⅘ | Replaces '4/5' with the fraction ⅘ |
| +/- | ± | Replaces '+/-' with the plus-minus symbol |
| != | ≠ | Replaces '!=' with the not equal symbol |
| ~= or ≃ | ≈ | Replaces '~=' or '≃' with the approximately equal symbol |
| <= | ≤ | Replaces '<=' with the less than or equal symbol |
| >= | ≥ | Replaces '>=' with the greater than or equal symbol |
| << | « | Replaces '<<' with a left angle quote (guillemets) |
| >> | » | Replaces '>>' with a right angle quote (guillemets) |
| 2*2 | 2×2 | Replaces '*' or 'x' between digits with the multiplication symbol |
| ^2 | ² | Replaces '^2' with superscript ² |
| ^3 | ³ | Replaces '^3' with superscript ³ |
| ^4 | ⁴ | Replaces '^4' with superscript ⁴ |
| ^5 | ⁵ | Replaces '^5' with superscript ⁵ |
| ^6 | ⁶ | Replaces '^6' with superscript ⁶ |
| ^7 | ⁷ | Replaces '^7' with superscript ⁷ |
| ^8 | ⁸ | Replaces '^8' with superscript ⁸ |
| ^9 | ⁹ | Replaces '^9' with superscript ⁹ |
| ^10 | ¹⁰ | Replaces '^10' with superscript ¹⁰ |
| 15 deg | 15° | Replaces 'deg' after a number with the degree symbol |