chromeアップデート(chrome49)の影響について【コメントアート】

NO IMAGE

本記事はブロマガに投稿した記事を移行したものです。
体裁は整えましたが、内容については手を加えずにそのままにしています。
元のブロマガについた当時のコメントも一緒に移しています。


先日あったchromeのアップデート(chrome49)でCA的に大きな変更があったのでそれについて報告します。

何が変更になったのか?

おさらいになりますが、chromeとそれ以外のブラウザを考えたときCAをする上で問題となったのは主に以下の3つでした。

1. フォント変化ルールが違う
2. 特殊記号の挙動が異なる
3. 主要空白文字の挙動が異なる

今回のアップデートでは、2. と3. に変更がありました。
その中でも特に重要なのが

U+3000(全角スペース)の幅が変更されたことです。

これにより3000を使った過去のCAはchromeで全て(ほとんど例外なく)崩れます。

 

どの空白を使えばいいのか?

現在、単体でブラウザ間で幅が変わらない空白はArial200100A0の主に2つと考えていいと思います。(Arial2001はArial化200Xの総称ですが今回はひとまとまりとします、)

Arial2001については以下の記事が大変分かりやすいです

【コメントアート】明朝体歌詞をChrome等においても崩れにくくする方法【Arial U+2001】
http://ch.nicovideo.jp/gottuttu/blomaga/ar698624

というわけで、chrome互換を考えた場合、現在はArial2001を用いるのが最も確実な方法となっています。(ゴシック、明朝問わず)
ただ、全角隣接させた2001(ゴシック)明朝化した3000のchromeとIE/FFでの表示差は1px強(サイズ:big, 中画面, 拡大率100%時)なので、「完全には互換しない」ですが臨界幅リサイズを使わないような、ある程度横幅が変わっても問題ない状況であれば今まで通り使用することができます。
(例) サイズ:medium, 2001×7 ≒ 00A0一個分のズレ (中画面、拡大率100%)

なおwin10において全角隣接させた2001(ゴシック)の表示がwin8以前のブラウザと異なるという報告もあるため、Arial2001ではなく普通に2001を用いる場合は2003を使うのがベターかと思います。

参考:(513号室)Windows 10:空白文字U+200Xの表示について
http://bardiel-of-may.blogspot.jp/2015/11/windows-10u200x.html

 

特殊記号の挙動の変更

一部の特殊記号に隣接判定(フォント決定ルール?)の追加がありました。
具体的には以下の画像のように、左側にひらがなや漢字のような全角判定文字(仮称)を隣接させると表示が変わります。

 

主要空白文字の隣接例

3000が間に入っても隣接判定(フォント変化)が出るようですが、基本的には左側に隣接させるようにするのが一番だと思います。

このように一部の特殊記号が条件付ではあるものの完全にchrome互換ができるようになりました。
一方で、逆に隣接することで表示がchromeで変わるような記号も報告されているので注意が必要になります。(詳しくは以下のブログを参照ください。)

参考:(513号室)chrome49 : フォント変化の発生
http://bardiel-of-may.blogspot.jp/2016/03/chrome-49.html

 


 

本ブロマガは以上になります。
2年前のアップデート以来の大きな変更でしたが、近いうちにまた大きく仕様が変わる可能性も指摘されておりchromeについては今後もいろいろ振り回されそうです・・・。

検証記事カテゴリの最新記事

%d人のブロガーが「いいね」をつけました。