ハートマークは文章表現で利用頻度の比較的高そうな記号だが、実は機種依存文字なので環境次第では正常に表示されない。
そこで通常は「☆」とか「v」などで置き換えるのだが、この方法ではニュアンスを正確に伝えるに不足がある。
実体参照♥は概ね有効だが、残念ながらMac版FireFoxでは文字コードがWinに合わされているようで文字化けを生じてしまう。これはブラウザ側のバグと言えるが対処法はない。
つまり、現実的に表示の問題を生じない唯一の方法は画像の差し込みという事になるが、そうなると今度は文字とのサイズ問題が生じる。文字サイズは閲覧側が任意に変更し得るが、画像であるハートマークはそれに追従しないのである。
そこで、スタイルシートを使って追従させてみる。画像差し込みの際、<img src="heart.gif" class="char">などと書いておく。そしてスタイルシート欄にはimg.char { height: 1em; }と書く。高さのみ指定としたのは画像の縦横比を変えずに自動リサイズする為で、文字に合わせる場合横幅はどうであっても気にならないが上下方向は揃えるべきという意味。
実際にやってみよう。
←文字サイズ変更に画像が追従している。面倒なのでハート画像は使わなかったが、効果の程は確認できる。
お試しあれ。
当初インラインスタイルでの埋め込みを考えたが、はてなの使用可能タグ/属性にstyle属性が含まれていなかったのでclass指定に切り替え。
