ひらがなカタカナの表示


推奨文字で紹介している文字だけではなく、もちろんひらがなカタカナも弾幕・CAの制作に使用できます。
例えば、「フ」や「へ」などが使いやすいです。
また、キャラクターのセリフなどを作ることもあるでしょう。
ただし、ひらがなとカタカナには以下の注意したい点があります。


ひらがなとカタカナのカーニング

 一部の環境において、ひらがなとカタカナには特定の文字を連続して並べると文字と文字の間隔が狭まるという現象が発生します。
 なぜこのような現象が発生するかというと、ひらがなとカタカナにはカーニングという仕組みがあるためです。

 カーニングとは簡単に言うと、文章をより読みやすくするために文字と文字の間隔を適切に調節する仕組みです。

 例えば「デザイン」という文字列をそのまま等幅(すべての文字を同じ幅)で表示すると、「ザ」と「イ」、「イ」と「ン」の間隔が「デ」と「ザ」の間隔よりも広くなっているように見えます。
 そのため「ザ」と「イ」、「イ」と「ン」の間隔をほんの少しだけ狭くすると、より自然に、より美しく見えるようになります。

 このカーニングという仕組みは「文字のデザイン」においては重要な仕組みです。
 実際に通常のニコニコのコメントはこの仕組みのおかげで読みやすい表示になっています。

 しかし、厳密に幅を調整する必要のある弾幕・CAにおいては意図していない幅の誤差が発生し得る厄介な現象です。



カーニングの発生する環境と文字

Windows10 + Firefox

 ・「mincho」のみで発生。
 ・2文字以上の文字列で「該当文字」が後ろに来た場合に前の文字との間隔が狭まる。
 ・同カテゴリーの文字が文字列として並んでいなければ発生しない。
  例えば「メ█メ█メ」というように間に別カテゴリーの文字が挟まっている場合は発生しない。
 ・ひらがなとカタカナは別カテゴリーであるため「該当文字」同士を交互に並べても発生しない。
  例えば「ぎメぎメぎメ」となっている場合は発生しない。
 ・「該当文字」の直前に「U+200B」を挟むと発生しなくなる

 該当文字
ぎ・ざ・ど・ノ・メ・グ・ゾ・ダ・ヅ・ブ・プ
 ※次の文字は同じ文字を並べた場合には発生しないが、同カテゴリーで並べた場合に発生する。
げ・ム


※画像はカーニングの発生しない文字「あ」10文字との幅比較
 ・発生する文字「ぎ」(2行目)
 ・発生する文字「メ」(4行目)
 ・同カテゴリーの文字を並べた場合(6、8行目)
 ・別カテゴリーの文字を並べた場合(10行目)



Mac & iPhone

 ・「mincho」でも「gothic」でも発生する。
 ・「mincho」と「gothic」で「該当文字」が異なる
 ・同じ文字を並べた場合には発生するが、別の文字を並べた場合には発生しない場合がある。
 ・特定の文字列にした場合のみ発生する場合がある
 ・基本的には「該当文字」の直前に「U+200C」を挟むと発生しなくなる
 ・一部、直後にも「U+200C」が必要な「該当文字」が存在する。

 該当文字
 ●「mincho」「同じ文字を並べた場合でも発生」
く・へ・ぐ・べ・ぺ・イ・ク・ケ・タ・ノ
ヘ・メ・ル・ギ・グ・ゲ・ゼ・ダ・ベ・ペ
 ●「mincho」「同じ文字を並べた場合は発生しない」「文字列にした場合に発生し得る」
す・て・ず・で・イ・エ・ク・ケ・ス・タ
チ・ト・ニ・ヌ・ネ・ノ・ハ・ヒ・ヘ・ム
メ・モ・ユ・ル・グ・ゲ・ゼ・ダ・バ・ベ
パ・ペ・ヱ・ィ・ゥ・ェ・ォ・ャ・ュ・ョ・ヵ・ヶ

 ●「gothic」「同じ文字を並べた場合でも発生」
く・へ・べ・イ・ノ・ヘ・ル・グ・ゲ・ダ・ィ
 ●「gothic」「同じ文字を並べた場合は発生しない」「文字列にした場合に発生し得る」
つ・イ・ク・ケ・タ・ト・ノ・ハ・ヘ・ム
メ・ル・レ・グ・ゲ・ダ・バ・ベ・パ・ペ
ァ・ィ・ゥ・ェ・ォ・ッ・ャ・ュ・ョ・ヵ・ヶ・ヮ



Android

 ※機種によって異なる。

 ・「mincho」でも「gothic」でも発生する。
 ・「mincho」と「gothic」で「該当文字」が異なる
 ・同じ文字を並べた場合には発生するが、別の文字を並べた場合には発生しない場合がある。
 ・特定の文字列にした場合のみ発生する場合がある




対処法

 あらゆる環境で表示を互換させるために厳密な幅調整が必要な場合、これらの現象が発生しないように0幅空白などを利用して対処する必要があります。

 各環境の対処法をおさらいすると
 ・「Windows10 + Firefox」では「該当文字」の直前に「U+200B」を挟むと発生しない。
 ・「Mac & iPhone」では「該当文字」の直前に「U+200C」を挟むと発生しない。
 ・「Mac & iPhone」の一部「該当文字」では直後にも「U+200C」が必要
 少し複雑なのは
 ・「Windows10 + Firefox」では「U+200C」を挟んでも効果がない
 ・「Mac & iPhone」では「U+200B」を挟んでも効果がない
 点です。

 前述の「該当文字」を確認してそれぞれの文字にそれぞれの対処法を行う必要がありますが、まだ確認されていない組み合わせでのみ発生する可能性もあります

 文字数に余裕があるのであれば
 すべての「ひらがな」「カタカナ」の前後に「U+200B」「U+200C」の2文字を追加するのが確実です。




最終更新:2022年08月29日 04:58