Research e-Labs

For many users the way to insert a macron (ā,ē,ī,ō,ū) whilst writing is to find a page with one and copy/paste the needed character. Obviously there are easier ways, in this post I explore and experiment with a few methods to easily add macrons when entering content for the web.

If you have any comments or suggestions or have seen a similar solution to the below please leave a comment (no registration or login needed).

The Basics

To enter a macron into web page HTML, you can use the following HTML enities, I’ve also added unicode and UTF-8 for completeness.

Character	HTML Entity	UTF-8 byte sequence	Unicode
Ā	Ā	0xC4 0×80	U+0100
ā	ā	0xC4 0×81	U+0101
Ē	Ē	0xC4 0×92	U+0112
ē	ē	0xC4 0×93	U+0113
Ī	Ī	0xC4 0xAA	U+012A
ī	ī	0xC4 0xAB	U+012B
Ō	Ō	0xC5 0×8C	U+014C
ō	ō	0xC5 0×8D	U+014D
Ū	Ū	0xC5 0xAA	U+016A
ū	ū	0xC5 0xAB	U+016B

Web Content Editors

But what about if you’re not directly creating HTML content but rather entering it through a web application (content management system, blog, wiki, etc.)?

Most content creating web applications use editors, so the easiest way to add macron support is to add a button or keyboard shortcuts to the editor. To test this idea I wrote plugins for TinyMCE, a widely used WYSIWYG editor and for DokuWiki’s built in editor.

TinyMCE Plugin

I wrote a plugin to TinyMCE which adds a new button and some keyboard shortcuts for adding macrons. See it in action below. The plugin is available on SourceForge (the downloads are at the bottom of the page under ‘Attached Files’), extract it to the TinyMCE plugin directory to install. You can also view the page source of the demo below to see how it is included.

Enter text here
To add a macron click on the right-hand ā button or use the keyboard combinations:

• Ctrl + Alt + <vowel> - (lowercase)
• Ctrl + Alt + Shift + <vowel> - (uppercase)

DokuWiki

To add a macron button into DokuWiki:

1. Download userscript.js, macron.png, and icons.tar.gz (or if you prefer icons.zip)
2. Place userscript.js in your dokuwiki conf directory (if you already have a userscript.js append the downloaded code to the end).
3. Place macron.png into you dokuwiki lib/images/toolbar directory.
4. Uncompress the icons into your dokuwiki lib/images directory.

For more information on the DokuWiki toolbar see http://wiki.splitbrain.org/wiki:tips:toolbarbutton.

HTML Forms

For users to enter macrons into HTML forms to submit information I developed a very simple JavaScript toolbar (it uses the JQuery JavaScript library). See below for a demo, click in a text box and then on a macron from the toolbar.

Text Field:

Text Area:

The current version is lacking some features needed in a production website but it should still provide a good example of what can be achieved with the technology. Current features missing:

1. No Graceful Degradation - it should degrade into a plain text macrons which can be copied and pasted if JavaScript is disabled or unavailable.
2. The macron is only appended to the end of the text in the text field, which is usually OK but should instead insert at the cursor position.

Tags: macron, plugins, web editors

This entry was posted on Wednesday, May 7th, 2008 at 6:18 pm under Developer Resources, Standards & Compliance. You can leave a response, or trackback from your site.