nhg-ruby

Web component to display japanese text with furigana.

Demo

Installation

npm install nhg-ruby --save

Then, import nhg-ruby into your element:

import 'nhg-ruby/nhg-ruby.js';

or in an html file:

<script type="module" src="/path/to/nhg-ruby.js"></script>

Usage

In your LitElement class:

static get properties() {
  return {};
}
 
constructor() {
  super();
}
 
render() {
  return html`
    <nhg-ruby
      furigana="きょう、にほんご、べんきょう"
      text="今日は日本語を勉強しましょう！">
    </nhg-ruby>
  `;
}

Notes

• furigana list can be separated by both japanese or romanji comma, but without spaces after the comma.

• Text can also be displayed from top to bottom and right to left by setting writing-mode CSS property to vertical-rl to nhg-ruby or any of its parents.