jquery.rubyann

(see also non-jquery rubyann)

jquery.rubyann is a jQuery plugin that allows you to write ruby annotations using a simplified (custom) markup syntax.

Ruby Characters (annotations) are small reading aids that are placed on top of characters (eg furigana with kanji in Japanese).

Example

Below, is the required HTML to render a simple sentence using ruby annotations.

(The goal of this HTML is to simply output the sentence "The word for Japanese language is 日本語" - adding hiragana characters above the kanji)

The word for 'japanese language' is <ruby><rb>日</rb><rp>(</rp><rt>に</rt><rp>)</rp></ruby><ruby><rb>本</rb><rp>(</rp><rt>ほん</rt><rp>)</rp></ruby><ruby><rb>語</rb><rp>(</rp><rt>ご</rt><rp>)</rp></ruby>

It renders Like this:

The word for 'japanese language' is 日 ( に ) 本 ( ほん ) 語 ( ご )

To do this using jquery.rubyann we wrap characters in a much simpler markup - using braces and commas - where the main character is first, and the annotated character (above it) is separated by a comma, both inside braces:

<div class="furiganaText">
  The word for 'japanese language' is {日,に}{本,ほん}{語,ご}
</div>

Without being rendered by jquery.rubyann, the custom syntax will render like this:

The word for 'japanese language' is {日,に}{本,ほん}{語,ご}

When jquery.rubyann is called in jquery/javascript as below:

$('.furiganaText').rubyann();

The same HTML shown above (eg <ruby>...) will be rendered instead.

So we've basically replaced a bunch of complex HTML markup with our own simple markup, which is then converted by running rubyann over the element.

See demo/demo.html in the source tree for a working example/demonstration.

Notes

All modern browsers support Ruby Annotations - see Ruby Annotation Browser Support

jquery.rubyann uses the 'fallback' syntax (xhtml 'rp' element) which puts the ruby text in brackets if the browser doesn't support ruby characters.

jquery.rubyann is written in coffeescript and includes a qunit test suite - also written in coffeescript.

Usage

braces used in the custom syntax can be replaced by delimeters of your choice. 2 characters must be specified (left/right) in a string

$('.furiganaText').rubyann({delimiters:"[]"});
$('.furiganaText').rubyann({delimiters:"@@"});

Contributions

This is a very small piece of code and I would be very happy to take any suggestions to improve it in any way.

Feel free to create an issue or drop me an email.

Build

Requirements

NodeJS

Run

npm install or yarn - installs the (NPM) dependencies (yarn is highly recommended)

npm run release transpiles all source and minifies the main plugin source to 'dist' directory

npm run test transpiles and runs the test suite