09 Oct 2007

これが本当の画像置換か

会社からの帰宅中、横断歩道を渡っていたら赤で止まっていたはずの車がゆるりゆるりと横断歩道に進入してきました。
さすがに驚いて凝視した（完全に目合ってる）のですが、運転手のおばちゃんは止まる様子もなく、そのまま徐行で走り去っていきました。
どうせすぐ次の信号で止まるのに
振り返って見ると、車体側面には明らかに車か何かが突っ込んだような大きな凹みと傷が。
やっぱりこういう人は何度もやらかしているんだなぁ。なんで免許持ってるんだろう？発行しちゃだめだろ。

さて、赤信号は守りましょうというところで、Javascriptの話題です。

CSSでの画像置換はかなり前から話題になり一時期流行しました。しかし最近は徐々に使う人は減っているようです。
というのも、ソース上テキストを書いていてもCSSを使ってそのテキストを画面外に飛ばしてしまうというテクニックがバッドノウハウなんじゃないかと。

実際、私もそう思うので、どうせ見出しやボタンを画像化したいのならば、いっそのことimgを置いてaltやtitleを記述したほうが良いと思っています。

前置きが長くなりましたが、CSSではなく、Javascriptで画像置換をするjQueryのプラグインが出ていました。

jQIR (jQuery Image Replacement)

指定したタグやclassを動的に画像に置き換えています。xhtml自体はクリーンなソースなのですが、Javascriptを読み込んだ後はテキスト部分がimgに置き換わっています。

「そこまでしてクリーンなxhtmlにしたいか？」というような強引としか言いようがないバッドノウハウだなぁ…と思う反面、おもしろいことを考えつくものだと関心してしまいました。
もちろん使う気はさらさらありませんが…。

ただし、一点だけ有効な点があります。
それは印刷です。

通常、ブラウザのデフォルトで「背景の印刷」はオフになっているため、背景が印刷できません。
また、背景を印刷しない人とする人がいるため、どうしても背景を優先する事ができないのです。

丁度先日コリスさんが「[CSS]背景に指定した画像を印刷させる方法」という記事をポストされていました。
上記の記事は、[テキスト+img]という形で配置し、通常CSSは画像置換で背景のみを表示し、プリント用CSSではimgだけを戻してくるというテクニックを紹介しています。
実はこのテクニックは一年ほど前、とある完全印刷対応という無茶な案件で使おうとしたのですが、上司と私の判断で「スタイルシートの描画とテキストだけでどうにかしよう」ということになって結局使いませんでした。
上司判断は正しかったと思います。画像部分を印刷するには、やはりimgを表示するしかないとは言え、印刷のためだけのimgを差し込むのはバッドノウハウと言わざるを得ません。

そこでこのJavascriptを使うのはどうでしょう。

Javascriptを印刷時のみ読み込ませる、というのは難しいにしても、印刷用ページとして本文のcloneをはき出させてそこに読み込ませればクリーンソースのまま印刷まで対応が可能ではないでしょうか。

印刷用ボタンみたいなものを設置しなければならないので、どうかなぁ…といったところですが。

余談ですが、完全印刷対応の案件は、CSSで再現しやすいデザインだったため、borderなんかをうまく使いレイアウトを表現できました。また、テキストについては画像を印刷するより、テキストを印刷したほうが断然綺麗に出力されるので、美しく印刷したいのならば印刷用ページ（orCSS)には画像文字は使わないことをおすすめします。

なんだか印刷用CSSの話に逸れてしまいましたが、こういったJavascriptもうまく使えば非常に有用だと思うので、使い方次第といったところでしょうか。

参照リンク