Single Article

PHP+CSS Dynamic Text Replacement(改)

タイトルくらいは綺麗なフォントで表示したいと考えて、いろいろ調べた。

dtr.gif

使用したのは、Dynamic Text Replacementという、PHPのスクリプト。これの派生したP+C Dynamic Text Replacementというもの。言葉どおり、TruetypeフォントからPHPで動的にテキストの画像(透過png)を生成する。

【仕様】

1.CSSの以下のセレクタを画像生成の際に認識する。

  • font-family
  • font-size (points)
  • color
  • background-color
  • a:hover
  • text-decoration: underline
  • text-transform: uppercase/lowercase
  • width(pixel)

2.PHPの環境:PHP Ver4.3以上、GD1.6以上、freetype2以上が必要

3.ワードラップ:widthに指定した幅を超える場合は画像をそこで区切って生成する。(英文字の場合は単語単位で折り返す)。

4.h1…h6のタグのみに対応(とりあえず)。

5.ブラウザの画像がオフだと見えなくなる(CSSの背景で画像表示しているためalt属性も設定されず)。

ソースは長いので別途リンクする予定。

日本語を表示する環境には他に、flashにフォントを埋め込み、スクリプトでテキストを変換するsIFR(scalable Inman Flash Replacement)を利用したBJKit(Beautiful Japanese Kit)がある。

BJKitは、(1)クライアントサイドで変換する仕組みであることと、(2)フォントをswfに埋め込むため、フォントのライセンス規約に違反する可能性があり、基本的にライセンスフリーのフォントしか使えない。DTRであれば、フォントを配布することにはならないが...

Related Posts

Trackback URL

One Comment

  1. Posted 2007/1/8 at 11:03 pm | Permalink

    私も以前にDTRに挑戦したことがありましたが、挫折...
    ソースの公開をお待ちしております…
    よろしくお願いします

3 Trackbacks/Pingbacks

  1. JavaScriptとswfでフォントを美しくする、BJKit

    日本語のフォントって、ブラウザで表示させるとギザギザに表示されて、綺麗じゃないんですよねぇ。。。かといって、画像を毎回作るわけにも行かず。。。どうしたもの…

  2. [...] なお、画像置換以前にテキスト画像の動的(自動)生成の方法にも種類があるのですが、これについては「PHS+CSS Dynamic Text Replacement(改)」をご参照下さい。ここではDTR(Dynamic Text Replacement)という手法を使っています。 [...]

  3. [...] PHP+CSS Dynamic Text Replacement(改) | Tech de Go sifrやbjkitみたいなことをphpで (tags: sifr php flash bjkit text) [...]

Post a Comment

Your email is never published nor shared.