1194055 – Size of <input> elements has changed in Firefox 40 を見て [メール投稿]
1194055 – Size of <input> elements has changed in Firefox 40
...
Brian Birtles (:birtles) 2015-08-12 21:47:43 PDT
We're seeing reports on twitter in Japan of layouts breaking in Firefox 40 due to the sizing of <input type="text"> and <textarea> elements.
One report suggests the default font might have changed.[1]
For the test URL the following difference is reported:
ESR38: https://pbs.twimg.com/media/CMQyxHKUEAA2CBm.png:large
40: https://pbs.twimg.com/media/CMQy27dU8AAtJ-a.png:large
[1] https://twitter.com/gooey_archer/status/631658186454401025
...
Firefoxを40.0にアップデートしたら、Firefoxのスタートページに指定してある私が作ったWebページの検索フォームの入力エリアが、ビヨーンと右に倍近く伸びていた。何が起こったのか分からなかったのだが、ツイッターで検索するなどして辿り着いたのが上のページ。
どうやら、Firefoxのデフォルトフォントが変わったらしい。
Jonathan Kew (:jfkthame) 2015-08-13 00:45:19 PDT
The fact that the default font for these elements changed is expected; we were using a deprecated API and getting an old default. I note that viewing the testcase from the URL in IE 11 on Win8.1 gives me a result that's closer to our "new" behavior than our "old".
In general, I'm seeing substantial differences between browsers/platforms with the testcase, illustrating the fact that relying on a specific default size of <input> elements is extremely fragile. Authors who want a specific size should be explicitly specifying it.
Is there some reason this is particularly problematic in Japan? (What was the old font being used, what is the new font, and -- aside from the effect on size -- is the new font better/worse than the old one? How does it compare to what IE uses?)
それで、以前はどのフォントで、今はどのフォントかであるが、議論中に次のように書いてある。
Masayuki Nakano (:masayuki) (Mozilla Japan) 2015-08-13 03:07:16 PDT
I think that the main problem is, the old Japanese UI font "MS UI Gothic" and new Japanese UI font "Meiryo UI" have very different size and glyph. A character size of Meiryo UI is too large. That must cause breaking a lot of web sites' layout.
Edge still uses "MS UI Gothic" for the default style of <input> according to the testcase. So, we should not use "true" system font on Win8 or later.
英語なのでよくわからないが、"MS UI Gothic"から"Meiryo UI"に変わったように読める。それならば、スタイルシートのfont-familyプロパティで指定すれば、以前の状態と比較できるかもしれない。アップデート前のFirefoxが無いので、どの程度変わったか比較できずに困っていた。
それで、次のソースを使って比較してみた。
<body style="background-color:silver;">
<input type="text" name="name" size="60"><span>指定なし</span><br />
<input type="text" size="60" style="font-family: 'ＭＳ ゴシック';"><span>ＭＳ ゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS Gothic';"><span>MS Gothic</span><br />
<input type="text" size="60" style="font-family: 'ＭＳ Ｐゴシック';"><span>ＭＳ Ｐゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS PGothic';"><span>MS PGothic</span><br />
<input type="text" size="60" style="font-family: 'MS UI Gothic';"><span>MS UI Gothic</span><br />
<input type="text" size="60" style="font-family: 'メイリオ';"><span>メイリオ</span><br />
<input type="text" size="60" style="font-family: 'Meiryo';"><span>Meiryo</span><br />
<input type="text" size="60" style="font-family: 'Meiryo UI';"><span>Meiryo UI</span><br />
<input type="text" size="60" style="font-family: 'serif';"><span>serif</span><br />
<input type="text" size="60" style="font-family: 'sans-serif';"><span>sans-serif</span><br />
<input type="text" size="60" style="font-family: 'monospace';"><span>monospace</span><br />
</body>
<input type="text" name="name" size="60"><span>指定なし</span><br />
<input type="text" size="60" style="font-family: 'ＭＳ ゴシック';"><span>ＭＳ ゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS Gothic';"><span>MS Gothic</span><br />
<input type="text" size="60" style="font-family: 'ＭＳ Ｐゴシック';"><span>ＭＳ Ｐゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS PGothic';"><span>MS PGothic</span><br />
<input type="text" size="60" style="font-family: 'MS UI Gothic';"><span>MS UI Gothic</span><br />
<input type="text" size="60" style="font-family: 'メイリオ';"><span>メイリオ</span><br />
<input type="text" size="60" style="font-family: 'Meiryo';"><span>Meiryo</span><br />
<input type="text" size="60" style="font-family: 'Meiryo UI';"><span>Meiryo UI</span><br />
<input type="text" size="60" style="font-family: 'serif';"><span>serif</span><br />
<input type="text" size="60" style="font-family: 'sans-serif';"><span>sans-serif</span><br />
<input type="text" size="60" style="font-family: 'monospace';"><span>monospace</span><br />
</body>
Firefoxのフォントの設定でも変わってくるかもしれないで、それを変えて試してみた。
その結果が次のツイート。
Firefox 40.0.2で、font-familyを指定してない場合が、指定した場合のどれに相当するか、試してみた。 pic.twitter.com/K8GFET7JE5
— 正己 (@self7777) 2015, 8月 14"MS UI Gothic"から"Meiryo UI"ではなく、"MS Gothic"から"Meiryo"に変わったような気がする。--
追記（2015/8/14）：
「幅を指定したら入力できる文字数に違いが生じますか？」みたいな質問があるみたいだから、ためしてみた。以下は、その結果のツイート。
<input style="font-size:16px;width:500px;">などと、フォントサイズを指定しておくと、振る舞いが変わる。幅を揃えて入力できる文字数が分かるようにした。 pic.twitter.com/jGYsrcEfdR
— 正己 (@self7777) 2015, 8月 14左は次のように width:500px; を追加しただけ。value= は入力する手間を省くため。
<input value="あいうえお…" type="text" size="60" style="width:500px;font-family: '～';">
右は次のように width:500px; の他に font-size:16px; も追加した。
<input value="あいうえお…" type="text" size="60" style="font-size:16px;width:500px;font-family: '～';">
どうやら、font-sizeを指定しておけば、font-family によって想定外の違いはないようだが、指定しておかないと、フォントサイズがどうなっているか不明になるようだ。
--
追記（2015/8/14）：
style="width:500px;" などと幅を固定しなかった場合。やはり、font-size:16px; の有無で変わる。
<input> が style="font-size:16px;" の有無でどう変わるか。 pic.twitter.com/Yh2qFomYMu
— 正己 (@self7777) 2015, 8月 14正己 さん
Banner & Logo
コメント 0