デフォルト状態でrubyタグでルビを振ると、バックログで改行されたり、メッセージ表示時に行が下がってルビがニョキッと生えたりするので、その改善をしてみました。410rc10で動作確認してます。
ただ、かなり場当たり的な対応なので、なぜそうなるのか、説明しきれない点が多々あります。適当に調整してみてください。
さて、メッセージ上でのニョキッ現象(kazaさん命名)なのですが、これを防ぐために変える数値が、メッセージのフォントサイズ(文字の大きさ)、メッセージのline-height(行間)、rtタグのフォントサイズ、message_inner以下のpのpadding-topです。これらを調整することで、何事もなくルビが振られるようになります。
基本的にはルビサイズ=行間とすると、問題はありません。一行目以外は。この一行目をどうするかすぐに知りたい方は、下にスクロールさせちゃって大丈夫です。
で、文字の大きさとかルビサイズとかってどこで指定すんの?ということから始めます。
文字の大きさと行間は、data>system>Config.tjs内で変更できます。(message_innerは後で説明します)
// ◆ 文字の大きさ
// デフォルトの文字の大きさ ( 高さ ) を pixel 単位で指定します。
;defaultFontSize = 24; // deffont タグの size 属性に相当
// ◆ 行間
// 行間を pixel 単位で指定します。
;defaultLineSpacing = 6; // defstyle タグの linespacing 属性に相当
上記の場合、文字のフォントサイズは24px、行間は6pxとなります(divのmessage_innerのline-heightは文字サイズ+行間で24+6=30pxと変換される)。
ルビサイズはConfig.tjsに設定として書いてあっても文字影等と同じで反映されませんので、CSSで指定してしまいます。今回はとりあえずちょっと小さ目な9pxにしてみましょう。
rt{ font-size: 9px; }これで文字サイズが24px、行間が6px(30px)、ルビサイズが9px。
これだとメッセージ上でルビが振られても、ニョキッとしません。一行目以外は。一行目以外はもうちょい後でやりますが、ここで一つ疑問が出ないでしょうか。
行間が6pxなのに、なぜ9pxのルビがおさまるのか。おそらくなのですが、ある一定の文字サイズ以上だと、行間に何pxかが足されます。上の場合(文字サイズが24pxの場合)、ティラノライダーで見たところ行間に3pxが足されていました。どうもHTML系の仕様なのか何なのか、こういう謎の加算が文字サイズや行間周りにあるようで、上記はMSゴシックの例ですが、sans-selifではルビサイズが7px以降1px増えているようでした。というかsans-selifだと文字サイズが大きくなるとそれ以降もどこかで1pxが増えていくし、MS系も32pxから1px増えます。ちょっとこの辺わけ分かりません。とりあえず「なんかサイズが大きくなると何pxか増えていくっぽい」と捉える感じでお願いします。
で、一行目の話です。一行目がニョキッとしてしまうのは、メッセージを表示するdivのpタグ内の上下内側に余裕がないからです。そこでdiv="message_inner"以下にあるpに、適当にpadding-top(内側の上の余白)を加えます。今回は行間の6px入れてみます。
.message_inner p {padding-top:6px;}これでフォントがMS系ならルビのニョキッ現象は消えます。数値はそれぞれのゲームに合わせて、適当に調節してみてください。
何か謎が残るところですが、ルビ表示の確認をする時はsans-selifでの確認も忘れないようにした方がよさげです。デフォルトのままだと大丈夫だとは思います。といってもフォントのサイズ(というか高さ?)が増える現象はあるっぽいので、そこも一応頭に入れといた方がいいかもしれません。私はもうお手上げです。