So-net無料ブログ作成
検索選択

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: 'MS ゴシック';"><span>MS ゴシック</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: 'MS Pゴシック';"><span>MS Pゴシック</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のフォントの設定でも変わってくるかもしれないで、それを変えて試してみた。
 その結果が次のツイート。


 "MS UI Gothic"から"Meiryo UI"ではなく、"MS Gothic"から"Meiryo"に変わったような気がする。--
追記(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; の有無で変わる。

nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:moblog

nice! 0

コメント 0

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。