TRASH-NEWS Photoshopの境界線チックに文字を縁取るJavaScript関数

昨日公開するなり「完成は難しい」と投げ出した『文字を縁取って表示するJavaScript関数』ですが……あれから3時間ほどいじってみたら存外ソレっぽく出来たので、あらためてver.0.1として公開します。

公開ページはこちら。サンドボックスも置いておきましたのでご自由にグリグリやってください。

今回のサンドボックスではさまざまな設定を行えるようになりました。以下リンク先のページの文章を転載します。[補記]と書いてある部分はちょこっとした概要説明です。

『文字の色』では文字本体(内側)の色、『縁の色』では文字を縁取っている部分(外側)の色を指定できます。これはどちらも#ではじまる16進数のカラーコードで指定してください。

文字の太さは3段階指定できます。『1』は1px相当の枠線、『3』は2px相当の枠線、『2』はその中間となります。なお太くすればするほど描画に時間がかかります。とりわけ『3』を指定した場合2,3秒かかるのが正常な挙動ですので、ご安心ください。 [補記] 文字を少しずつずらしながら重ねて表示させているため、その枚数を増やす(=太く見せる)ほどに描画が遅くなってしまうのです。ちなみにOpera9.27だと3秒くらいかかるところ、Opera9.5ではなんと0秒表示が実現しています。おそろしい技術の進歩。

縁を透過させるかのオプションについては、背景が無地以外の環境で効果を発揮します。IE6/7では透過処理を施したレイヤーが重なるとレインボーな具合になるという不可解なバグがあるので選択しても実際に透過はしません(色を薄めて表示させます)。また描画に時間がかかる場合がありますが気にしすぎは身体に毒です。 [補記]IE系ではfilter = "alpha(opacity=" + Percentage + ")";という指定で、Operaではopacity = Percentage / 100;という指定で、Firefox系ではMozOpacity = Percentage / 100;という指定でそれぞれ透明化を実現しています。ただIEのfilterプロパティは何枚も重ねると『FCでよくみかけたカオスな虹色のバグ』のような表示になってしまうので今回は自粛。

この関数はIE6/7、Opera9/9.5、Firefox2/3での動作を確認しています。IE8(beta)では何故か処理に10秒以上かかるうえ表示もしっちゃかめっちゃかになりますが、気にしすぎは精神衛生上最悪です。 [補記]実際フリーズしたかと思うほどに時間がかかります。

既知の問題としては半角文字(英数字と記号)をそのまま表示するとずれて表示されてしまうことが挙げられます。これは全角文字の表示を前提として作ったプログラムであり、半角文字も全角文字として処理(配置)してしまうためです。これに対しては半角文字を対応する全角文字に変換することで対処しています(ｂ→b、＄→$)。

と、まぁこのような感じ。Photoshopの境界線のレイヤー効果を目指して改良をしてみました。まぁ文字が滑らかに表示できないというブラウザ由来の問題のせいでどうあっても追いつけはしませんが(VistaとかMac環境だったらよさげに表示されるのかな)。記事タイトルの“Photoshopの境界線チックに文字を縁取る”というのは、まぁ見る環境によってはそう見えるかもレベルということで(タイトル詐欺)！

僕としてはこのままJustifyStrings関数と組み合わせてKIGに使おうと考えていますが、最終的な目標は息吹ポンさんのイラストでよく見かけるような二重縁取り(+グラデーション)。それをJavaScriptで再現したところでどのような実用性があるかはまったくわかりませんが、Photoshopだと案外面倒くさい表現方法なので、いっそ全部ブラウザでやってしまったりして！

なお今回のソースコードについては先ほどのサンプルページのソースを直接ご覧になってください。ブログみたいに固定されたサイト形式だとソースコードの表示が面倒で困る困る。