直したつもりが、別のところを壊していた

このサイトの金額表示が行をまたいで割れるのが気になって、割れないようにする修正を入れました。数時間後、「価格の表示、めっちゃ小さくない？」と言われました。自分の修正が原因でした。

もとの困りごと

日本語の文章は、決まりの上では数字と単位の間で改行してかまいません。そのため画面の幅によっては「1本あたり16,500」で行が変わって、次の行の頭に「円」だけが落ちます。

読めなくはないのですが、金額としては間が抜けて見えます。このサイトは値段を正面から出しているので、ここは整えたいと思いました。

文章の一部だけを対象にする指定は用意されていないので、割りたくない部分を小さな入れ物で包む方法を取りました。包んだところは折り返さない、という指定にすれば済みます。サイト全体で55箇所ありました。

ところが、その入れ物が思わぬところで拾われました。もともと画面のあちこちに、金額の上に出る小さなラベル（「制作費」「保守運用」など）用の指定が書いてありました。その書き方が「この枠の中にある入れ物は小さい文字にする」という広い指定だったのです。

つまり、金額を包んだ入れ物までラベル扱いになりました。本来31pxで出るはずの見出し級の金額が10pxになり、支払い例の式は9pxになっていました。ホームページ制作の料金ページが、一番派手にやられていました。

自分では気づけませんでした。折り返しが直ったかどうかだけを確認して、満足してしまっていたからです。指摘を受けて初めて、実際の文字の大きさを測りに行きました。

1つは、もとの原因であるラベル用の指定を狭くしました。「この枠の中の入れ物すべて」ではなく「直接の子だけ」に限定します。こう書いておけば、後から中に何を入れても巻き込まれません。

もう1つは、包むための入れ物そのものが見た目に影響しないよう、まわりの文字と同じ大きさ・同じ色を受け継ぐことを明示しました。念のための保険です。

そのうえで、包んだ入れ物と、その外側の文字の大きさや色が一致しているかを全ページで突き合わせました。ズレはゼロになりました。金額はちゃんと31pxに戻っています。

広い書き方の指定は、書いた瞬間は短くて気持ちがいいのですが、あとから中身が増えた瞬間に壊れます。壊れ方も静かで、エラーは何も出ません。ただ小さくなるだけです。

そして、修正には必ず新しい面ができます。今回でいえば「折り返し」は直りましたが、「文字の大きさ」という別の面ができていました。直したところだけを見に行くと、この新しい面を見落とします。

自分の直しを疑う癖はつけているつもりでしたが、まだ足りませんでした。同じ日に、もう1つ似た失敗もしています。そちらはまた別の日誌に書きます。