なんだか最近のGoogleのペンギン先生は::beforeや::after擬似要素で仕込まれるモノもバッチリ解釈するとかいう噂(本当か嘘かは知らない)を聞いた。スクリーンリーダーも読んじゃうらしい。ここのロゴは::before擬似要素でHを一文字挿入して実現していたので、もし解釈されるとなるとウェブサイトのタイトルが「Hhail2u.net」になってしまう。
特に::beforeや::after擬似要素に限った話ではなく、古き良きtext-indentプロパティーによるものやattr()関数とかでも問題が起こるという話だと思うので、画像置換とその類のテクニックはもう本格的にアレな時代なのかもしれない。別の方法を……といってもCSSが解釈されて隠したり改変したりするのもチェックしてるという話なので、CSSでどうにかしようというのは無理がある。::before擬似要素でcontentプロパティーを使って画像を挿入とかならOKかもしれない。SVGだとサイズがうまく決まらない問題があるので僕には微妙なんだけど。
となるとリガチャですよね！
と、本当はリガチャでhail2u.netという文字列にグリフを割り当てようかと思ったんだけど、ピリオド含めた文字列に割り当てられないのかツールの問題なのかうまくいかず、よくわからなかったので挫折した。
暫定的に::first-letterを使って誤魔化すようにした。カシコイSCSS書いてたので大体そのままで上手くいったんだけど、位置調整を論理的な計算で正確に行うのは難しそうなので、今のところなんとなくうまい配置になりそうなサイズを直接指定している。なんとかしたい。あとIE9あたりで::first-letter擬似要素のmarginプロパティー等でem単位などを使うと親要素(ここではh1)のフォントサイズ基準になってしまうバグがあるのでそこへも対応したりとか。忘れてました！
なんで普通にbackground-imageプロパティーで画像を参照しないかというとtext-shadowプロパティーを使いたいから。SVGに直接ドロップシャドウのエフェクトをかけることは可能なんだけど、サイズの変更でシャドウのサイズも変わってしまうので、文字の大きさに関わらず常に1pxのシャドウを……などということは無理(知らない)。
今はユニコードの私用領域に「H」のグリフをコピーして、それ以外を全消しするという形で作り直している。外字解釈したりしないよね？ 出来ないもんね？ 読めないよね？ 読み無いもんね？ Webフォント非対応な環境(ゲタや空白になる)へのフォールバックどうしよう。あちらを立てればこちらが立たず。