nhg-ruby
v1.1.0
Published
Web component to display furigana.
Downloads
6
Maintainers
Readme
nhg-ruby
Web component to display japanese text with furigana.
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 tovertical-rl
tonhg-ruby
or any of its parents.