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

順路
  1. ホーム
  2. 2008年
  3. 05月
  4. 26日
  5. この記事 [現在地]
Search?
お知らせ
ここ数日更新が滞っていますが…… (2008/04/13 13:31)
4月より社会人となったため、時間の作り方がいまいちつかめないため、不定期の更新となります。まぁ……ニコニコメーカーでもお楽しみください!
1 2 3

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

TRASH-NEWSは
I've Soundをこよなく愛するサイトです
初出時刻
2008年05月26日 00時59分 投稿
最終更新時刻
2008年05月26日 01時25分 改訂
  • この記事をはてブする
  • Yahoo!ブックマークに登録

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

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

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

この画像をご覧いただければお分かりいただけるかと思いますが、元の文字があって、そこを任意の色で縁取り(ここまでが前回分)、さらにそれをもう一回縁取る、というような飾り文字を作ることができます。輪郭が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関数(の叩き台未満)』です。あわせてどうぞ。

サイト内検索
検索する
このサイトについて
  • サイト名 : TRASH-NEWS
  • 分類 : ニュースとネタのサイト
  • ジャンル : 井戸端からアレゲまで
  • もっと詳しく見る
最近の記事
05月23日の記事
  1. ボタンひと押し即生成、『サークルカットジェネレータ』公開開始
04月01日の記事
  1. あの人気シリーズを作れる? 『テイルズオヴメーカー』本日公開
03月27日の記事
  1. 現在の4月のアレ進捗度30%!!
02月21日の記事
  1. 4月のアレで使う【中二なキャラクター】イラストをご提供ください
01月24日の記事
  1. サークル名ジェネレータを作ってみた
01月11日の記事
  1. 新作(※4月のアレではない)のスクリーンショット公開
01月01日の記事
  1. コミケ77(3日目)に行ってきた
12月31日の記事
  1. コミケ77、男は黙って8:00に出発
12月24日の記事
  1. FFXIIIの検索サイトを作ってみました
12月21日の記事
  1. FFXIIIの検索サイトを作ってみている
日刊人気記事ランキング
2010年11月21日のぶん
1
もうやめて下さい!! 泣いてる子もいるんですよ!!
38
2
マリオっぽい自作のゲーム改めしょぼんのアクション公開開始
28
3
FFT-A2のクリア後レビューと感想(ネタバレなし)
17
4
テイルズオブヴェスペリアの感想 【ストーリー・キャラクター編】
14
5
サークル名ジェネレータを作ってみた
12
6
Windows XP SP3インストールで不具合が起きることが発覚
11
7
ついうっかりマリオWiiとグレイセスとFFXIIIとDQVIを予約(以下略)
11
8
○○が可愛すぎて生きるのが辛い
10
9
“マリオっぽいもの”のステージを編集するエディタが公開
9
10
3Dの初音ミクを躍らせるフリーソフトMikuMikuDanceがスゴい
9

2010年11月22日 0時更新

人気記事ランキング

カテゴリ(折畳表示)
ニュース・ネタ
サブカテゴリを開く
俺研究舎
サブカテゴリを開く
お知らせ
サブカテゴリを開く
特集・企画
サブカテゴリを開く
管理人近況
サブカテゴリを開く
カスタムアーキテクチャ
1回めのようこそ!
ゲストさん
  • 文字の大きさ : 12px
  • フォント : MS Pゴシック
  • レイアウト : 3段組
  • カスタムする
カレンダー
2008年5月
«  04月 - 06月  »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
管理人について
管理人 : 八満かシアン
文系なのにエンジニア、なんてこったい(八満のほう)
今頃たぶん聴いている曲
☆☆☆☆☆☆ by 榎津まお・春日りか・倉沢はるか・榊原ゆい・茶谷やすら
月別アーカイブ
2008年
2007年
最近記事に掲載した画像
サークルカットジェネレータ、公開開始です!!
サークルカットジェネレータ、公開開始です!!
テイルズオヴメーカー偽記事の画像
テイルズオヴメーカー偽記事の画像
シガアレ作ってる、の図
シガアレ作ってる、の図
手描き初音ミク
手描き初音ミク
iPhoneっぽいUIを実際にiPhoneで表示してみて比較
iPhoneっぽいUIを実際にiPhoneで表示してみて比較
画像に関するリンク
ユーティリティ
RSSフィード
ソーシャルブックマーク
  • iGoogle
  • はてなアンテナにTRASH-NEWSを追加する TRASH-NEWSのはてなブックマーク数 この記事を含むはてなブックマーク
サイトプロフィール
Powered by
  • Movable Type 4.1 + [XHTML + CSS + JavaScript] + PHP
  • TRASH-NEWS / Hachiman_Cian 2007-
このページについて
題名
文字を縁取ったり白抜き(袋文字化)したりできるJavaScript関数
内容
  • 3日連続でお届けしてきた『文字を縁取って表示するJavaScript関数』シリー
TRASH-NEWS ロゴ
TRASH-NEWS ロゴ
TRASH-NEWS : http://www.trash-news.net/