Skip to content

seangenabe/rubyfy

Repository files navigation

rubyfy

Easily write ruby annotations and output them as HTML.

npm node

Usage

import { rubyfy } from "rubyfy"

Convert a string by wrapping the ruby text in full-width parentheses ():

rubyfy('日(に)本(ほん)語(ご)')
// => <ruby>日<rp>(</rp><rt>に</rt><rp>)</rp></ruby><ruby>本<rp>(</rp><rt>ほん</rt><rp>)</rp></ruby><ruby>語<rp>(</rp><rt>ご</rt><rp>)</rp></ruby>

The type of the return value is an array of DOM Nodes, which should be compatible with libraries like bel.

Any string of numerals 0-9, CJK characters, and the characters and , will be captured.

rubyfy('今日(きょう)')
// => <ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>

Force a portion of the text to be the ruby body using double full-width parentheses (()):

rubyfy('((Alice))(アリス)')
// => <ruby>Alice<rp>(</rp><rt>アリス</rt><rp>)</rp></ruby>

Advanced usage

You can take the parser and the renderer to use for yourself:

import { parse } from "rubyfy/out/parser.js"
parse('漢(かん)字(じ)です')

Output:

[
  { "rb": "", "rt": "かん" },
  { "rb": "", "rt": ""},
  "です"
]

Render using the parse result:

import { render } from "rubyfy/out/render.js"
render(parseResult)

More details on the API documentation.