時系列から見る、AA表示のためのhtmlの事例 (2020年版)
MS Pゴシックを使用したアスキーアート(AA)が生まれてから10年以上過ぎ、OSとブラウザ環境は大きく変化しました。
そのため以前の方法ではAAがうまく表示できないことが増え、対処方法が複雑になっています。それを順を追って説明します。
事例1 フォントの指定がないもの
- 表示条件1: ブラウザの使用者が日本語版Windowsを使用していること
- 表示条件2: ブラウザがMS Pゴシックをデフォルトで使用していること
この二つが「一般的」であるという前提で作成されたhtmlです。
実際にはこの条件が100%満たす時代があったことはありません。ただWindows以外のOSが少数派だったため、無視されたか知らないままに作成されたものです。
- 表示される例: WindowsXP + IE
- 表示される例: AA対応フォントをインストールした非WindowsOS + Firefox
- 表示される例: 閲覧者がブラウザをAA表示対応のフォントで表示するようにしている
- 表示されない例: Windows10 + Chrome (ChromeのデフォルトフォントがMS Pゴシックでない)
- 表示されない例: macOS/iOS/Androidなどの非WindowsOS (MS Pゴシックがない)
事例2 MS Pゴシックを指定しているもの
事例1とほぼ同じですが、MS Pゴシックがブラウザのデフォルトフォントでない環境に対応したものです。
Windows Vistaから新しいシステムフォントとしてメイリオが追加されました。Windows10では游ゴシック/游明朝が追加されました。2017年FirefoxとChromeではMS Pゴシックはデフォルトフォントではなくなりました。
2020年現在、最低限この対応をしないとAAは適切に表示できなくなっています。
- 表示条件: 使用環境でMS Pゴシックを使用できること
- 表示される例: Windows + IE/Edge/Chrome/Firefox
- 表示される例: MS Pゴシックをインストールした非WindowsOS + Chrome/Firefox
- 表示される例: 閲覧者がブラウザをAA表示対応のフォントで表示するようにしている
- 表示されない例: MS PゴシックをインストールしていないWindows
- 表示されない例: macOS/iOS/Androidなどの非WindowsOS (MS Pゴシックがない)
フォントの指定には以下の二種類があります。
- htmlのfontタグ
- スタイルシート
fontタグはhtml5で廃止になりました。これから使用することは推奨されません。
事例3 ウェブフォントによる表示
多くのブラウザにはウェブフォントの機能がありますが、掲示板、やる夫まとめサイトでのウェブフォント対応は遅かったように思います。日本語フォントファイルが大きいので回線負荷の懸念があったのかもしれません。
2020年現在は多くのサイトで対応しています。
- 表示条件: ウェブフォント対応のブラウザであること
- 表示条件: 閲覧者がウェブフォントによる変更を許可していること
- 表示されない例: Android OS4.4未満
- 表示されない例: ブラウザによってウェブフォントファイルの対応フォーマットが異なるので、表示できない場合がある
事例4 textar
ウェブフォントによる対応サイトが少ないままスマートフォンが普及し、閲覧者側で何とかしようという動きが出ました。
textarというブックマークレットです。
現在はサイトが消えてしまい、実際の動作は試せません。
推測ですが、ブラウザからJavaScriptでAA対応フォントに指定しなおすというウェブフォント機能+αと思われます。
処理が複雑なのか表示に時間がかかることもあったようです。
一時期まとめサイトではウェブフォントよりこちらが主流でした。
- 表示条件: ウェブフォント対応のブラウザであること
事例5 枠線がずれる DirectWrite仕様変更
Windowsのグラフィックス系の仕様にDirectWriteというのがあります。
2014年7月Chrome36がDirectWriteに対応しAAがずれて表示するようになりました。
このずれは限定的なため気づかないこともあります。
枠線などの厳密な位置取りをするAAで問題点をよく見分けられます。
当時Chromeがブラウザのシェアを50%以上占めており、一般の利用者の半数以上が影響するようになりインパクトのある現象でした。
2020年現在、この現象が確認されるのはWindows10ではIE11とEdge(EdgeHTML版)です。Edge(Blink版いわゆるChrome版)、Chrome83とFirefox76では確認されませんでした。
Google Chrome 37(というかDirectWrite)でAAがずれる件について
- 対策1: 以前はChromeでDirectWriteを無効化するという手法もありましたが、現在はできなくなっています。
- 対策2: pacthForAA.js
- 対策3: KGIndirectWriter.js
- 対策4: ずれないウェブフォントを使用する
ただそれぞれ問題点があります。
- 対策2の問題点: 文字が汚くなるときがある
- 対策3の問題点: 処理が重くなるときがある
- 対策4の問題点: Windowsでは文字が変色するときがある。特にSaitamaarは緑色が目立つ(Windows10 + Firefox76で確認) ブラウザ縮小表示で多少改善するので、CSSで全体を縮小する手はある
事例6 ユニコードのブロック要素
ユニコードのブロック要素を使用したAAは対応フォントが少ないです。
MS Pゴシック、Saitamaar、RobotoJAAが対応しています。
事例7 ユニコードスペースを使用したときのずれ
フォントによって微妙にずれます。加えてDirectWrite問題も発生します。
Saitamaar、aahub_lightが対応しています。
Saitamaarは緑の変色問題、aahub_lightはユニコードのブロック要素未対応があるので、MS Pゴシックの完全な代替にならないのがもどかしいです。
2020年の結論
- Windows + Chrome/FirefoxはMS Pゴシックをそのまま使用するのがよい。
- Windows + IE/EdgeはDirectWrite問題が発生する。pacthForAAとKGIndirectWriterは予期せぬ不具合があるかもしれないので使わない方が無難。ずれを妥協してMS Pゴシックを採用するか、ウェブフォントを採用する。縮小表示による変色軽減手法はある。ここがCSSの実装方法の分岐点になる
- 非Windowsではウェブフォントを使用する。
選択肢1: MS Pゴシック優先、ユニコードブロック要素対応ウェブフォントを第２フォントにする。IE/EdgeのDirectWrite問題は妥協する。
選択肢2: 何らかのウェブフォントを優先する。Firefoxで顕著な文字の変色問題は妥協するか、CSSで縮小表示させる。
選択肢3: UserAget別のCSS切り替えの手法を持ちいて、通常は選択肢1のCSSを使用してIE/Edgeなら選択肢2のCSSにする(複雑になるので積極的に採用したくはない)
その他
その他の事例1 Ubuntul18での不具合
UbuntuでAA（アスキーアート）がずれるのはＭＳ Ｐゴシックが置換されるからだった（かも？）
その他の事例2 macOS10.15 + Safari13での不具合
file://のURIによるhtmlでは、例えばSaitamaarをインストールしている状態でウェブフォントのlocal指定をしても表示されません。
その他の事例3 別ドメインのウェブフォントが読めない
Access-Control-Allow-Originをhttpヘッダーにつけていないと別ドメインのウェブフォントを表示できません。
Androidなどでウェブフォントがうまく表示できない場合はこれの疑いがあります。