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