2chのAAをOSに依存せず綺麗に表示するJavascript/CSSの設定方法 (旧版)

(注) この記事の内容は古いです。昔はブラウザのバグで大変だったねという歴史と、細かなテクニックを覚えておくために残していますが、歴史はどうでもいいから AA をすぐに表示したい人は、こちらをどうぞ。

(以下保管用) 2chのAAをOSに依存せず表示するのは結構骨が折れます。この事に関しては私がまとめるまでもなく以下のサイトで丁寧に説明されており、おそらく現時点で最も詳しいページと思います。

ただ表示テストをしていて気付いたのですが、フォント次第でかなり気になるレベルで印象が変わります。特に気になったのは「しょぼん」。フォントがインストールされていれば表示の違いを以下で確認できますが、フォント指定には一考の余地があると思いました。

（´・ω・｀）  # ＭＳ Ｐゴシック

（´・ω・｀）  # 梅Pゴシック

（´・ω・｀）  # IPA モナー Pゴシック

（´・ω・｀）  # Monapo

（´・ω・｀）  # Mona

（´・ω・｀）  # Textar

上記の表示を見ていると、私はＭＳＰゴシック＞梅Pゴシック＞ Textar ＞ IPA モナー Pゴシック＞ Monapo ＝ Monaの順で綺麗と感じます。慣れ過ぎてしまったせいかも知れませんが、梅Pゴシックはかなり綺麗な表示だと思っています。 IPA モナー Pゴシックは綺麗ですが、少しフォントが細過ぎる気もします。 Textarも綺麗ですが、「・」が丸くなり過ぎて少し違和感があります。 Mona, Monapoは「ω」が小さ過ぎてあまり可愛くなく、違和感も出てしまっています。

(2018-10-31 色々修正): またUbuntuのFirefoxではＭＳＰゴシックを上書きするようなフォントを利用すると他のサイトにも影響が出てしまうようです。こういった問題がある以上は、あまりＭＳＰゴシック互換フォントは指定しないほうが良いと思っています。

となるとLinux/Macで使えるAAフォントがないという事態になってしまうのですが、私は代替フォントとして梅Pゴシックを愛用しています。梅Pゴシックは完全なAAフォントではなく、大量の空白文字を使うと若干ズレる事があるフォントなのですが、大半のAAは綺麗に表示できます。標準インストールもされていないフォントなのですが、Linuxならapt-getなどで簡単にインストールできる事から、私はこれを指定に入れています。

ただiOS/Androidは梅Pゴシックでも駄目で、これらのOSはフォントのインストール自体が苦行でしかありません。なのでこれらのOSではWebフォントのTextarを使うのがベストだと思います。

前置きが長くなりましたが、このような事情を踏まえると以下のCSSが良いと思います。 white-spaceは改行や空白をそのまま表示するようにpreを指定し、 word-wrapはデフォルト値ですがブログのテンプレートなどで変更が加わりやすいのでnormalを明示しておくと良いと思います。
(2018-10-31 修正): ただしLinuxでの利用を想定すると、さらに一手間を加える必要があります。長くなるので上記リンクを参照してください。私はこの仕組みは良くないと思っているのですが、palm84さんがなぜそうなるのかを詳細に説明してくださったので、その記事も参照すると、Linuxのフォント指定の仕組みが詳しくわかります。

pre.aa {
  font-size: 1em;
  line-height: 1.1;
  font-family: 'ＭＳ Ｐゴシック','MS PGothic','梅Pゴシック',Textar,sans-serif;
  white-space: pre;
  word-wrap: normal;
}

CSSの設定はこれで終わりですが、WebフォントのTextarを表示するためには、加えてTextarのWebフォント読込用のスクリプトをダウンロードし、自分のサイト上に展開する必要があります。これは以下のコードをHTMLの下のほうに登録するだけで済みます。 headに登録しても良いとは思うのですが、初回起動時のレンダリングが相当遅くなるのでbodyの一番下が良いと思います。初回起動時以外はそれなりの速度でレンダリングしてくれます。

<script type="text/javascript" charset="utf-8" src="/textar-font/webfont.js"></script>

こういった野良Webフォントはあまり良くないので、Google Web FontsにTextarが採用されると安心感も出るのですけどね。日本語対応が始まりつつあるものの、今のところ未対応のようです。

またTextarのWebフォント読込用のスクリプトの使用法について軽くメモしておきます。実装上は<p class='textar-aa'>...AA 1行目...<br>...AA 2行目...</p>という記述方式を想定しているようですが、 <pre class='aa'>...AA...</pre>といった記載方法のほうが楽だと思います。

ここまでの設定でAAを綺麗に表示できるようになったと思いますが、さらにフォントを設定できるボタンを付けておけばフォントにこだわりのある方にも対応でき万全だと思います。例えばこんな感じ。

フォント変更:

とんかつ作るよ

.　 ∧_∧　 　 ﾍ⌒ヽﾌ ⌒γ
　（`･ω･)　　(･ω･　）　　 )
　/　оо━二二二二二フ
　しー-Ｊ

marmooo's blog

2017年5月18日木曜日

2chのAAをOSに依存せず綺麗に表示するJavascript/CSSの設定方法 (旧版)

0 件のコメント:

コメントを投稿