More than 5 years have passed since last update.

Text Mesh Pro を使って日本語ルビをつけるのと、注意したいところ

Last updated at 2019-03-05Posted at 2019-02-27

ルビをつける

ふりがなふりたいですよね。
子供向けに作るコンテンツだと欲しくなると思います。

参考リンクにあるように Style Sheet の設定で実現可能です。（横書き）
リンク先の内容をもとに、自分の環境用に設定したのが以下の通り。

種類	Name	Opening Tags	Closing Tags
1文字用	p1	`<space=-2.8em><voffset=.85em><size=50%><mspace=4em>`	`</size></voffset></mspace>`
2文字用	p2	`<space=-3.6em><voffset=.85em><size=50%><mspace=4em>`	`</size></voffset></mspace>`
3文字用	p3	`<space=-6.7em><voffset=.85em><size=50%><mspace=4em>`	`</size></voffset></mspace>`
4文字用	p4	`<space=-7.5em><voffset=.85em><size=50%><mspace=4em>`	`</size></voffset></mspace>`
5文字用	p5	`<space=-8.5em><voffset=.85em><size=50%><mspace=4em>`	`</size></voffset></mspace>`
6文字用	p6	`<space=-11em><voffset=.85em><size=50%><mspace=4em>`	`</size></voffset></mspace>`

印刷物などだと、ルビの有無で行の位置が変わることはありませんが、
この方法で上揃えにした場合、ルビの有無で行の位置が変わってしまいます。

動的に差し替わるテキストフィールドで、ルビの有無が混在する場合に、
デザイン調整がしづらくなります。

挿入するテキスト文字列の冒頭に <line-height=1em> などを付与してtextプロパティに代入することで、
2行目以降の行についてはルビの有無に左右されずに行間が固定できます。
1行目は許容する形。

例

<line-height=1em>青<style=p2>あお</style>い空<style=p2>そら</style>

別案として、改行が無い、箇条書きみたいな文章であれば
テキストフィールドを分割して、下揃えにしてあげることでも解決できそうです。