惜しい! 意図せぬ改行は予測しづらい

2015年02月08日 公開

作っているときはそのつもりが無く、もちろんブラウザでも表示確認を怠らなくても、時々現れては困らせる改行モンダイ。

改行でわかりにくくなった表組み

ブラウザによる相違であることが多いのですが、同じブラウザでもOSが違うと解釈が変わったりすることがあります。表示フォントが違ったりするせいかもしれません。

何にせよ、「このように意図しない改行が入ることがある」ということを忘れずにいることが肝要ですが、そのためには何かを犠牲にしなければならないのも悲しい事実です。

一番簡単な対策は、表組みを画像化してしまうことです。画像になっていれば改行等の乱れが生じることがありません。ただ、ちょっと変更になっただけでも元画像ファイルをサルベージしなければならない苦痛が伴います。また、文字情報として置いておけないので、場合によってはアピール度が低減する心配もあります。

となると、1行の高さが勝手に拡大しないよう固定しておいて、万一収まりきらない自体になったら無理に収めようとしないで溢れさせちゃう……というのも1つの手段ですね。例示の場合で言えば、あふれた「ル」の右側いくらかが欠損する程度で済むと思われます。

いちばん大切なのは、正しくコードを書くことです

表組みを<table>で書いておけば、その行がまるごと拡張され、次の行と混ざってずれていくということがなかったはずです。

元ネタがどこだったか失念してしまいましたので元ソースをあたることができませんが、とにかく

  1. 左コラムを上から下まで記述して
  2. 中コラムを上から下まで記述して
  3. 右コラムを上から下まで記述する

という書き方のように見えます。しかしそれは表示を調節しようとしてそのような書き方になっているだけで、ニンゲンもbotも、見るときは横1列を見ながら読み進むわけですね。ですから表示上の都合だけで文字列の塊の意味を考えずに書いちゃダメだということです。

.