2012年9月2日日曜日

Chrome 21:IE互換のコメントにできないか

Chromeでのコメント表示の話を読んでくださったōrzさんが検証動画を作られました。画面左が現在のChrome(pepflashplayer)の表示・右がIEやFirefoxと同じ表示です。実にわかりやすいです。


しかし困ったもんです。月も変わったことなので、またStatCounterで日本のブラウザシェアを見てみました。


シェア率の数字は統計によって違うものなので、これだけでどうこうも言えません。
が、気になったのはIEの推移です。少し下がったのがまた盛り返しています。その分、下がっているのはこのグラフだと悲しいことにFirefoxです。そしてChromeはその間も少し伸びています。
世界的にはIEを抜いたと言われた状況とはだいぶ開きがあるものの、この傾向は今後も続くのかなぁと思いました。そのChromeでニコニコが安定して視聴できるとなると、やはりコメント表示の件は無視しづらい話です。

IEとChromeで文字幅を合わせる例はすでにいくつか見たので、この件の当初に挙げたコメントのサンプルを直してみました。とは言ってもChromeでは一つの文字に適用されるフォントが決まってしまっているので、元のコメントと全く同じ見た目にするのはほぼ無理です。とりあえず崩れないようにできないかというのが趣旨です。

まず1つめの例です。


文字列がゴシックになってしまうのはどうしようもないとして、ブロック文字の縮みだけでも直したい。これはU+2588をU+2587で代用できないかという話を書きました。


ちょっとアレですけどw
さらにU+2587をMingLiU化すれば継ぎ目が無くなって、よりChromeと似たような見た目にはできるでしょう(そのための細工がまた必要になりますが)。全角幅ということであれば、U+2589などもArialに無いので使えそうです。

2つめの例は、二重リサイズと呼ばれる現象を利用したbig10行というやり方です。


冒頭の動画でもこのケースが非常に目立っていました。
本来は、改行により一度縮小したコメントがある一定の幅になると拡大するという現象です。一定の幅というのがちょうど全角幅で決まった文字数と一致することから、コメントを等幅フォントのSimSunやGulimに変化させて行われます。ChromeではSimSun化させるためのブロック文字だけでなく空白文字(おそらく全角スペース)も縮んでしまってこの一定の幅が保てず、現象が起きなくなっています。

SimSun化させる文字は他でも代用できますが、Chromeで全角になる空白文字というのは今のところわかりません。しかし一定の幅にさえなればいいのであって、必ずしも全角の文字である必要はありません。下図は直してみたものです。


文字列はChromeに合わせてゴシックに変えています。ブロック文字はU+2587に、空白部分はU+0020(半角スペース)とU+3000(全角スペース)に置き換えました。U+3000はそのままだとU+2587の影響でSimSunになってしまうため、Chromeと合うようゴシック状態にする細工をしています。
Arial・ゴシックは文字によって幅が違いますので、何文字でこうなると決まったことは言えません。空白部分も含めた1行全体の長さが、全角文字で作った場合と近くなるようにちょこちょこ調整しました。

これは思いつきですが、文字列部分はIEでSimSun・Chromeでゴシックという表示にもできるかもしれません。下図は文字列の最後へ先日の日記に書いたU+25ACを置いたコメントです。


U+25ACはSimSun化状態だと縮み、Arialでは全角に近くなるという変わった挙動を取ります。下図は2つの画像を重ねてみたところです。


Chromeではひらがながゴシックになって縮む一方、U+25ACは幅が広がっています。結果的にコメント全体ではIEと同じ幅になったように見えます。

まぁ上のような例は元々フォント変化が起きる前提で考えたコメントを直しているので、どうしても限界があります。でもこうやっていろいろいじくり回しているうちに、新たに気づくこともあるかもしれません。

0 件のコメント:

コメントを投稿