しかし少し前から、UTF-8で書かれたファイルを原稿としてもらったりすると、書き直す必要のある場合があって、新しいサイトはUTF-8でファイルを作り、もちろんヘッダで、
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
と書いていたが、従来からあるShift-JISのサイトはそのままでも構わないと思っていた。
が、意外な問題が発生することが分かった。
上に示したのは、私が管理しているサイトの一部分を試験的に書き換えたものだ。そのサイトは、１年程前にスタートしたもので、当時私はまだXPを使っていた。文字コードはShift-JISとした。そのころは、何の問題もなかったのだが、Windows7に切り替えてからちょっと困ったことが起こった。ページの切替を示すために<div>タグと、styleのボーダーを組み合わせて、ページの切替のリンクの表示をしていたのだが、数字の位置が、従来中央部分にあったものが少し高い位置に表示されるようになってしまったのだ。
上のアニメの上段は私のオリジナルで、下段は「正常」に表示されていたはずの、某サイトのHTMLの記述とCSSをそのままコピーしたもの。
当初この原因は、vista以降使われるようになったWindowsの標準フォント「メイリオ」と、例えばMSP-ゴシックとのベース位置の違いなどによるものだと思っていた。
ところが不思議なことに同じような表示をしても、中央部に表示されているサイトを多く見かけるのだ。
CSSの記述での私のミスがなどと考えたが、いろいろとテストをする内に別の原因だと分かった。
上のアニメで、もらいもので正常の筈の下段でも数字が中央に表示される場合と、少し高い位置に表示される場合がある。
その原因とは、メイリオをフォントにもっている環境では、IE8（他のバージョンのIEは持っていないのでテストしていない）では、UTF8にすると中央部に文字が表示されるということだ。
当該のサイトでは、cssによってフォントは、
font: 100%/1.5 "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
と指定している。
ただし、上の段の「３」だけは、
<font face="ＭＳ ゴシック, MS Gothic, Osaka−等幅, Osaka-mono, monospace">３</font>
としてみた。興味深いのは、この「３」はどちらのファイルでもあまり位置が変わらずほぼ中央部にっ表示されている事だ。
ただ、今後はメイリオが主要なフォントになることが考えられるので、基本的にはメイリオの表示を考慮する必要があると思われる。
従って、今日のタイトル「これからのHTMLの文字コード指定は…」の続きは「UTF-8だ」ということになる。
ただし、SafariやChromeでは、Shift-JISとUTF-8の表示の違いは全くなかった。相変わらず「困ったＩＥ」ということだ。
