Let’s start with the obvious. There are more characters than keys on a keyboard. We’re all familiar with the shift key, which allows multiple characters to be accessible via one button. But again, that only scratches the surface.
I spent four years working for a publisher as a typesetter and designer. This company specialized in the ancient Near East and biblical studies. This meant typesetting in a number of languages (even hieroglyphics). When typing in Hebrew or Greek, for example, we’d simply use a font based on those languages. Other languages used primarily the same characters found in the modern day English alphabet, but with the occasional mark added above or below a letter.
Those special marks are called diacritics, and I’m going to explain how to easily access the most common diacritics on a Mac, on iOS, and in HTML.
Let’s get the easiest one out of the way first: iOS. When using the keyboard, simply press and hold down any letter. If there’s a special character available for that letter, it will appear in a fly out menu. Simple.
On the Mac, we mentioned how the shift key allows an extra character to be assigned to each key. So does the option key. The characters accessed by the option key are a bit more obscure, so the average person rarely uses it, apart from maybe the copyright symbol (option-g) or the registered symbol (option-r). If you play around with the option key, you’ll notice it acts a bit odd when combined with certain keys. For example, if you type option-e, a character appears, but it may have gray bar at the baseline. Or it may be highlighted in yellow. It depends on the application. The mark you initially see is a diacritic. But that bar or highlighting indicates you have the option of pressing a third key—the character to which you want to apply the diacritic. But note you can only assign a diacritic to certain characters. If you try to apply it to a character to which it does not belong, that character will simply appear after the diacritic. The diacritic will appear by itself and the gray bar or highlighting will disappear.
Let’s get more specific. Five of the most common special characters are the acute, grave, umlaut, circumflex, and tilde. As these are widely used, Apple has provided an easy way to access them:
- Acute (á): This is the basic diagonal line that we often see in the spanish language and is shaped like a forward slash. To use it, hit option-e, then release both keys. Next, hit the key to which you want the acute applied. You can apply it only to vowels (not including y)
- Grave (à): Pronounced grahv, this is just like the acute, only reversed (shaped like a backslash). And you’ll note it already has a key of its own, just below the ESC key. To use it, hit option-`, then release both keys. Next, hit the key to which you want the grave applied. You can apply it only to vowels (not including y)
- Umlaut (ä): This is the two dots that appear side by side above a letter. Often used in German, it usually appears over the letter u. And that makes it easy to remember that in order to use an umlaut, hit option-u, then release both keys. Next, hit the key to which you want the umlaut applied. You can apply it only to vowels, including y.
- Circumflex (â): This is a small angle or chevron shape that points up. Again, it appears above a letter and is used in a number of languages. Hit option-i, then release both keys. Next, hit the key to which you want the circumflex applied. You can apply it only to vowels (not including y)
- Tilde (ã): Used often in Spanish and Portuguese, the tilde is that little squiggle mark that appears over a letter (usually over n in Spanish, and over certain vowels in Portuguese). To use it, hit option-n, then release both keys. Next, hit the key to which you want the tilde applied. You can apply it only to the following letters: a, n, o.
There are many other special characters (cedilla, breve, caron, etc.), but most require activating an Extended keyboard, which you can implement via System Preferences (Language & Text > Input Sources). But apart from those who type in other languages, few will need to look beyond the diacritics outlined above.
When it comes to using these diacritics in html, it’s pretty simple. You can use a decimal code (such as À) or a hex code (such as À), but if you’re coding by hand like I do, the easiest solution is the HTML entity. Follow these steps:
- Start with an ampersand (&)
- Type the character to which you want the diacritic applied (case sensitive)
- Type out the name of the diacritic (if the name is longer than five characters, you’ll need to use the correct abbreviation)
- End with a semicolon (;)
I mentioned abbreviating diacritic names over five characters in length. So umlaut becomes “uml” and circumflex becomes “circ.” Here are some examples:
- À = À
- ü = ü
- á = á
- Î = Î
- ñ = ñ
