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

NO IMAGE

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


もう情報としては若干遅いですが、『5月末』にあったchromeアップデートについて報告します。

実は『7月末』にあったアップデート(chrome52)でも大きな変更がありましたが、最近の『10月頭』のアップデート(chrome54)で一部ユーザーが再び元の仕様に戻りました。

ですので「今回紹介するchrome51の内容≒現在の仕様」と思ってください。

 

何が変更になったのか?

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

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

今まではこれで大丈夫でした。

今回のアップデートではなんと基本となるフォント自体が変更されました。

というわけで、特殊記号の表示はもちろん、常用のひらがなやかたかなの表示まで変わってしまいました。

ただ、不幸中の幸いといっていいかは微妙なところですが、空白文字は前回のアップデートですでに変更されていたので今回は変化はありませんでした。
以後は具体的にどのように表示が変わったのか、と互換の方策について記します。空白文字に関しては前回のブロマガを参照してください。

 

表示がどのように変わったのか?

今回のアップデートでchromeの基本フォントはメイリオに変更されました。

そのため、基本的に全角文字は同一の幅で表示されるようになりました。

この幅はchromeでのU 3000とU 2001と同一の幅(いわゆるArial2001幅)です。

 

 

一方で、一部の特殊記号は今までと同じ全角幅(いわゆる漢字幅)を有しているものもあります。
注)PC(winOSの種類?)によって表示が微妙に変わります。画像はwin7, chrome51のものですが、win10, chrome54だと例えば「¬」の表示が異なり文字幅も漢字幅ではなくArial2001幅となっています。このような記号を大量に使う場合は注意したほうがいいでしょう

 

 

幅が変更になったものの中でも、とりわけ「!?、。・」といった常用の記号や、「ぁっゃ」といった小さいひらがな・カタカナはブラウザ間で幅が大きく異なるので、互換を考えた場合は注意が必要です。

 

これまではブラウザ間で表示が変わるのは一部の装飾記号がほとんどでしたが、今回のアップデートでその範囲が大きく広がりました。

「全角文字の幅が同一」というのはある意味では好ましいアップデートなんですが、互換を考えた場合は非常に面倒な変更となります。

 

どのように互換するか?

特殊記号の幅が違うというだけでもヒーヒーいっていたので、今回のアップデートは互換するには非常に厳しいものですが、だからといって完全に無理というわけではありません。

 

まず、明朝化を用いたコメントですが、ひらがなやカタカナが漢字幅に近くなったことで今までに比べて互換がしやすくなりました。しかし、完全に漢字幅になったわけではないので微妙な幅調整が必要な場合は今まで通りchromeで幅が増える文字を用いて幅を補填してやる必要があります。

今回のアップデートの場合で問題となるのはゴシックの場合で、多くの文字の幅が変わってしまうようになったため、場合によっては今までの明朝互換と同じくらいの手間が必要となります。

今までのゴシックの場合は、表示が変わる記号はそのほとんどがchromeで幅が縮む方向に変化したので幅を補填する必要がありましたが、今回のアップデートによってそれが逆転しました。

つまり多くの文字が幅が広がる方向に変化するので、互換を目指すならなんとか幅を削減させる必要があります。

 

前述したように特殊記号であればいくらでもchromeで幅が縮む文字があるわけですが、使える場面がそもそも限られるので実用上は専ら空白で幅調整をすることになるでしょう。

最も簡便な全角隣接のU 2001を使うことです。
Arial2001でとりあえずつくってしまった後、幅調整が必要なものだけArial2001を全角隣接のU 2001に置換してやります。前回のブロマガでも少しふれたように

Arial2001×7 00A0×1 ≒ 全角隣接2001×7

なのでこれを一セット置換してやるだけでchrome側で00A0一個分幅が削減されます。

 

これでもまだ幅削減が必要な場合は全角隣接2001を2004 2007や2008×3などに置換してやります(どちらの場合もIE,FF環境で幅が若干縮むので注意)

端的にいってしまえばとにかく全角隣接200X系の文字をできるだけ大量に使って文字幅の削減を目指します。

そうして互換調整した例がこちら(chrome52以降のアップデートで若干ズレてるところもあります)

こんな感じで幅が縮むようなハートなどの特殊記号が大量に含まれる行は『。』などで幅補填を行い、逆にひらカナを大量に含む行は空白文字によって幅削減を行います。

慣れるまでは少し大変ですが、微調整が利くのでひょっとすると明朝の互換よりは楽かもしれません。

しかし一番簡便な互換方はそもそも臨界幅リサイズを使わないことなので、臨界幅リサイズを極力使わない、臨界幅リサイズを使う場合でもリード行を使うことは常に頭の中に入れておきましょう。

 


chrome49のように空白の幅を変更されたり、chrome52のようにコメント高さを変更されると互換作業も困難を極めますが、今回の場合はそれに比べると融通が利く分少しはマシかな?という印象です。

地獄のchrome52については対策が完了する前に戻ってしまったので、結局中途半端に終わってしまいましたが、また機会があればその話もできたらと思います。このブロマガもお蔵入りの危機を免れてよかったよかった。

ただ、冒頭でも触れたようにどうやら高さが戻ってないユーザーもいるみたいなので現状も予断を許さない状況であることは変わりありません。
今後どうなることやら・・・
ではではー

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

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