rubyann is a jQuery plugin which converts a simple custom syntax to ruby annotations in HTML (eg furigana)
CoffeeScript HTML CSS JavaScript TypeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
demo
dist
src
tests
ts
.editorconfig
.gitignore
LICENSE.txt
README.md
gulpfile.js
package.json
yarn.lock

README.md

rubyann

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).

NPM

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 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 rubyann, the custom syntax will render like this:

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

When 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

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

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