NgPiaoLiangHanzi
Angular module to format Hanzi and Pinyin as coherent blocks.
Quickstart
- Install via npm
npm install ng-piao-liang-hanzi
- Import 'NgPiaoLiangHanziModule'
;@
- Use 'ng-piao-liang-hanzi' to display your Chinese characters and pinyin:
Features
Automatic pinyin
Pinyin is generated automatically by default:
Custom pinyin text
Custom text can override the pinyin:
Pinyin with numbers
By default the automatic pinyin will generate with tone symbols. To generate with pinyin numbering format, set [pinyinWithNumber]="true"
:
To enable pinyin with numbering format globally in your project, use the global flag ENABLE_PINYIN_NUMBER_FORMAT
:
;@
[pinyinWithNumber]="true"
is then no longer needed. It is also possible to disable the number format in specific
cases by setting [pinyinWithNumber]="false"
.
Skip pinyin for some characters
The pinyin is divided by single spaces. If the pinyin should not be entered for a character, just perform an extra space:
For clarity purposes, you can also use _
as a placeholder for empty pinyin:
Enable alphabet for pinyin
Non-Chinese characters are skipped for pinyin by default, including alphabetical characters. To enable alphabetical characters,
set [includeAlphabet]="true"
:
The alphabet can be enabled for pinyin globally with the ENABLE_ALPHABET
flag:
;@
[includeAlphabet]="true"
is then no longer needed. It is also possible to disable the alphabet in specific
cases by setting [includeAlphabet]="false"
.
Set pinyin below characters
Pinyin are displayed on top of the hanzi characters by default. To display them on the bottom,
set [bottomPinyin]="true"
:
This feature can be enabled globally with the ENABLE_BOTTOM_PINYIN
flag:
;@
It is still possible to override the global flag locally with [bottomPinyin]="false"
.
CSS styling
The Chinese characters and pinyin can have custom css styling with classes
ng-piao-liang-hanzi-char
and ng-piao-liang-hanzi-pinyin
respectively:
} }
⚠️ The css styling will only work in global styles.css!
For example: https://github.com/AlexanderTang/PiaoLiangHanzi/blob/master/src/styles.scss