TRASH-NEWS 文字を縁取ったり白抜き(袋文字化)したりできるJavaScript関数

3日連続でお届けしてきた『文字を縁取って表示するJavaScript関数』シリーズもいよいよ完結です。昨日の記事で書いたELHEART'Sさんのイラストに見られるような“二重縁取り”文字を再現したい、という欲望をマッハで実現させてみました。

サンドボックスはこちら。ソースなども公開していますので興味のある方は是非。

この画像をご覧いただければお分かりいただけるかと思いますが、元の文字があって、そこを任意の色で縁取り(ここまでが前回分)、さらにそれをもう一回縁取る、というような飾り文字を作ることができます。輪郭が2つある、と言えばよいのでしょうか。うまい表現ががががが。

この文字のことを僕はずっと白抜き文字、というふうに呼んでいましたが、どうも実際にはニュアンスが異なるようで……調べてみたところ白抜き文字とは、入力した文字の背景を網やスミベタにして、文字内部を白く抜いた文字修飾機能の一種である。地が黒くなくて、単に縁取りされた文字の場合も縁取り文字と言う(出典:IT用語辞典)とのこと。どうも袋文字(アウトライン文字)と呼ぶのが近いようです。今回作ったのは二重の輪郭をつけているので二重袋文字ということでしょうか。うーん、やっぱり正しい呼称がわかりません。

なお前回以上に設定できる項目(関数の引数)を増やしたのでいろいろな表示パターンを試すことができます。ただし文字の太さをレベル3にして、同時に二重縁化(二重縁の色を指定することで自動的にonに)し、二重縁極太化オプションもつけると……表示に10秒以上かかります。一昔前のブラクラばりの負荷が皆さんのPCにのしかかります。

さて、この関数の特徴はなんといってもValidなHTMLの構造を保ちながらDHTMLとして表示が可能であるという点。画像とは違い、リアルタイムで、どんな文字にでも適用ができます。

唯一にして最大の欠点は……非常に重いという点。この画像はCSSを無効化してこのJavaScriptを動かしたようすです。一文字ごとに何回も位置をずらして表示させているという原始的な仕組みなので、文字数が増えるほど、太さを太くするほど描かなければならない文字数も増えてしまうのです。JavaScriptの描画が遅い環境(ブラウザだったりPCの問題だったり)では表示に10秒以上かかることもありますので、ご注意ください。まぁ、つまりは実用にはまるで向かないということですかね！

なおソースコードについてはこのページのhtmlベースのソースをご覧ください。すべてベタ打ちしている(=このページ単独で完結)ので、コピペで利用することができるはずです。改変・公開などはご自由にどうぞ。この関数はTRASH-NEWSの八満とシアンが2008年5月に作成しました。

残る改良案……1.描画速度を上げること、2.輪郭を少し透過させて本格的なClearTypeっぽい表示にすること(gdi++のように)。まぁ気が向いたら……。

ちなみに前記事は『Photoshopの境界線チックに文字を縁取るJavaScript関数』と『文字列を縁取って表示するJavaScript関数(の叩き台未満)』です。あわせてどうぞ。