このページは文字を縁取って表示するJavaScript関数のサンプルを掲載するためのページです。『文字の色』では文字本体(内側)の色、『縁の色』では文字を縁取っている部分(外側)の色を指定できます。これはどちらも#ではじまる16進数のカラーコードで指定してください。
文字の太さは3段階指定できます。『1』は1px相当の枠線、『3』は2px相当の枠線、『2』はその中間となります。なお太くすればするほど描画に時間がかかります。とりわけ『3』を指定した場合2,3秒かかるのが正常な挙動ですので、ご安心ください。
縁を透過させるかのオプションについては、背景が無地以外の環境で効果を発揮します。IE6/7では透過処理を施したレイヤーが重なるとレインボーな具合になるという不可解なバグがあるので選択しても実際に透過はしません(色を薄めて表示させます)。また描画に時間がかかる場合がありますが気にしすぎは身体に毒です。
この関数はIE6/7、Opera9/9.5、Firefox2/3での動作を確認しています。IE8(beta)では何故か処理に10秒以上かかるうえ表示もしっちゃかめっちゃかになりますが、気にしすぎは精神衛生上最悪です。
既知の問題としては半角文字(英数字と記号)をそのまま表示するとずれて表示されてしまうことが挙げられます。これは全角文字の表示を前提として作ったプログラムであり、半角文字も全角文字として処理(配置)してしまうためです。これに対しては半角文字を対応する全角文字に変換することで対処しています(ｂ→b、＄→$)。
なおソースコードについてはこのページのhtmlベースのソースをご覧ください。すべてベタ打ちしている(=このページ単独で完結)ので、コピペで利用することができるはずです。改変・公開などはご自由にどうぞ。この関数はTRASH-NEWSの八満とシアンが2008年5月に作成しました。
元記事『Photoshopの境界線チックに文字を縁取るJavaScript関数』
関連記事『文字列を縁取って表示するJavaScript関数(の叩き台未満)』
©2008 TRASH-NEWS 八満とシアン