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

ここに下のテキストエリアで打ち込んだ文字が
即時反映されて表示されます
ご自由に文字を打ち込んでみてください

概要解説

このページは文字を縁取って表示するJavaScript関数……の改良版、文字を縁取ったり白抜き(袋文字化)したりできるJavaScript関数のサンプルを掲載するためのページです。 詳しい使い方や解説などはそちらのページ、もしくは解説記事をご覧になってください。

もともと文字を縁取りさせようとして作った関数ですが、欲張ってELHEART'Sさんのイラストに見られるような文字を再現したくなり、このような改良を施しました。 この画像をご覧いただければお分かりいただけるかと思いますが、元の文字があって、そこを任意の色で縁取り(ここまでが前回分)、さらにそれをもう一回縁取る、というような飾り文字を作ることができます。

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

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

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

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

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

関連記事『Photoshopの境界線チックに文字を縁取るJavaScript関数

関連記事『文字列を縁取って表示するJavaScript関数(の叩き台未満)

©2008 TRASH-NEWS 八満とシアン