rubyタグでのルビ振り時の表示を改善する

デフォルト状態でrubyタグでルビを振ると、バックログで改行されたり、メッセージ表示時に行が下がってルビがニョキッと生えたりするので、その改善をしてみました。410rc10で動作確認してます。
ただ、かなり場当たり的な対応なので、なぜそうなるのか、説明しきれない点が多々あります。適当に調整してみてください。

めも調様メッセージ枠調整プラグインでは、ルビ表示改善も対応されています。こちらのプラグインはメッセージ枠を見かけ上の数値で調整できるようになるため、導入すると非常に便利です。オススメです。
※また、下記のバックログでの改行問題も、バックログプラグインにて対応してくださっています。ver.4.10以降ならこのリンク先の方法で使えますので、そちらも参照してみてください。オススメです。
まず、rubyタグでのバックログの改行を防ぐため、めも調さんの記事バックログでの改行問題を参考にし、JSを改造します。これでruby以外のタグ(変数等)を入れても、バックログで改行されなくなります。ルビ振りへのハードルが下がります。

さて、メッセージ上でのニョキッ現象(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での確認も忘れないようにした方がよさげです。デフォルトのままだと大丈夫だとは思います。といってもフォントのサイズ(というか高さ?)が増える現象はあるっぽいので、そこも一応頭に入れといた方がいいかもしれません。私はもうお手上げです。

※pxの増加傾向をまとめようと思ったのですが、どうも基準がなさそうでした。ここは個別に試すしかなさそうです。
※message_innerでpadding-topだけ増加指定するのは、ルビが振られるのが基本的に上側だからです。ただルビはCSSで指定すれば下側に振ることもできると思います。多分ルビの中寄せとかもできるんじゃないでしょうか(未確認)。
※この辺の数値関係を知りたい方は、ティラノライダーのDeveloperToolsのElementsのbody以下のdivタグを見てみてください。何も変更してない場合はmessage0が基本のメッセージ表示レイヤーとなっているはずなので、そのクラスがついているdiv内のdiv class="message_innner"がpositionで指定するメッセージ表示部分で、それ以下のpタグ以下が実際に配置されてるHTML状態となります。説明下手ですね。この説明が分からなくてもとりあえず実物を何回か見てみると分かると思います。これが分かるとどこの数値をどうするとどうなるのかも分かってくるので、レイアウトもしやすくなります。私は最近気付きました。もっと早く使い方を理解しておけばよかったです(後悔)。