@gengotech/ngx-furigana

Furigana for Angular

An Angular component that intelligently displays Furigana.

<!-- Kana between Kanji -->
<furigana word="日の人" reading="ひのひと"></furigana>

<!-- Kana between Kanji -->
<furigana word="あの日の人" reading="あのひのひと"></furigana>

<!-- Trailing kana -->
<furigana word="対抗する" reading="たいこうする"></furigana>

<!-- Kanji between kana  -->
<furigana word="ぶん回す" reading="ぶんまわす"></furigana>

<!-- Full kana  -->
<furigana word="稲葉曇" reading="いなばくもり"></furigana>

<!-- Full kana  -->
<furigana word="日" reading="にち"></furigana>

It was built in order to display Japanese text and readings programatically from sources such as JMdict.

Installation

npm install @gengotech/ngx-furigana --save

Add NgxFuriganaModule to your app.module.ts imports:

import { NgxFuriganaModule } from '@gengotech/ngx-furigana';

@NgModule({
 
  imports: [
    NgxFuriganaModule
  ],
  
})

Usage

<furigana [word]="対抗する'" [reading]="'たいこうする'"></furigana>

As you can see, the "する" part is automatically ignored even if it is present in the reading.

It can also handle words where there's kana on both ends:

<furigana [word]="'ぶん回す'" [reading]="'ぶんまわす'"></furigana>

API

If any of the inputs are changed, the component will automatically re-render.

Inputs

Name	Type	Default	Description
word	string		The main word that will be displayed.
reading	string		The reading for the word.
showFurigana	boolean	true	Optional switch to turn off furigana display.