npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery.rubyann

v1.1.0

Published

rubyann is a jQuery plugin which uses a simple custom-syntax to create ruby annotations (eg furigana) in HTML

Downloads

5

Readme

jquery.rubyann

(jquery.rubyann is a rename of the original 'rubyann' - this was to be able to distinguish between jquery and non-jquery versions, which are planned)

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

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 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:

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