まるで画像。テキストを曲線上で表現する「CSSWARP」
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。
Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。
これがテキストというのが驚きです。
ちゃんと文字として選択できます。
こちらは自分で文字を作れるデモ。
ビジュ曲線でぐりぐり動かせます。
回り込みもできます。
円に沿って描いています。
その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。
CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成されたHTMLを埋め込めば完了です。よりテキストを遊べる便利なライブラリです。
CSSWARPはJavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
画像とフォントには高い壁が存在しましたが、Web FontやHTML5が徐々にその壁を壊しつつあります。絵でしか表現できないことはたくさんありますが、テキストだけでも十分表現できるケースも多いです。ムダに画像化してしまっているという覚えはないでしょうか。
Web Fontはともかく、単なるテキストであれば画像よりもサイズが小さく送信できます。スマートフォン向けを考えるとより小さなサイズで転送できる工夫は必要と思われます。これまで画像で行っていたことを見直してみると、意外とテキストでも事足りる可能性もあるのではないでしょうか。