« ブービートラップ | トップページ | PerlのCGI.pmで複数のCookieを消す »

2010.05.26

CSS Spriteを使って、いにしえのフォント画像テーブルを使ったフォント表示に挑戦

昔のPC-9801やMSXのVRAMの裏画面をとってみたことがある人はわかると思うんですけれども、結構文字テーブルを用意していたのが多かったりしませんか？ Windowsのゲームでも、文字テーブル画像を生成している奴があったりしたもんです。

▲書淫、或いは失われた夢の物語。のフォントテーブル画像

いまや、これをHTML+JavaScriptでできる時代になっているからやってみました。

Filename: bmp.pl

#!/usr/bin/perl
 
use strict;
use warnings;
use Imager;
my $w = 16;
my $h = 16;
my $img = Imager->new( xsize => $w * 256, ysize => $h * 256,);
my $font = Imager::Font->new( file => 'ipam.ttf' );
 
for ( my $i = 0x0000; $i < 0x10000; $i++ ) {
  $img->string(
    x => ($i % 256) * $w,
    y => 14 + int( $i / 256) * $h,
    string => chr($i),
    utf8 => 1,
    font => $font,
    size => 16,
    aa => 1,
    color => '#ffffff',
  );
}
$img->write( file => 'bmp.png',) or die $img->errstr;
 
exit;
 
__END__

プログラムの中でも指定している通り、IPA明朝（ipam.ttf）を指定しているよ。同じディレクトリにおいてから、実行すると、bmp.pngができます。これはUnicodeの基本多言語面（BMP）に相当するやつです。

▲IPA明朝で基本多言語面書きだした

この書きだしたbmp.pngをCSS Spriteとして文字表示に使ってみるコードがこれ。

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>巨大画像画像ファイルのCSS Spriteをフォントとして利用</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
    // <[!CDATA[
    $(function() {
      var str = $('#honmon').html();
      var newstr = '';
      var h = 16;
      var w = 16;
      for (var i = 0; i < str.length; i++ ){
        var code = str.charCodeAt(i);
        var char = String.fromCharCode(code);
        var ku  = parseInt( code / 256 );
        var ten = code % 256;
        var html = '<span class="moji" title="' + char
                 + '" style="height: '+ h + 'px; width: '
                 + w + 'px; background-position: ' 
                 + ten * -w + 'px ' + ku * -h + 'px;"></span>'
        newstr = newstr + html;
      }
      $('#honmon').html(newstr);
      });
    // ]]>
    </script>
    <style type=" text/css">
      .moji {
        display:inline-block;
        background-image:url(bmp.png);
      }
      #bd p {
        line-height: 2;
      }
    </style>
  </head>
  <body>
    <div id="doc" class="yui-t7">
      <div id="hd" role="banner">
        <h1>巨大画像画像ファイルのCSS Spriteをフォントとして利用</h1>
      </div>
      <div id="bd" role="main">
        <div class="yui-g">
          <!--YOUR DATA GOES HERE -->
          <p>　ＳＭマニアから見れば、この事件にＳＭ性は感じられないという。だが一般（ノーマルな性的趣味）の人からすると、どちらも変質者で同じような気もするが……。「違います。事件の犯人は変質者。ＳＭマニアは変態。ＳＭマニアは自分が変態であることを認知しているし、立場も分かっていれば理性もある。日常生活においては全く普通で、性欲の部分だけが変態なんです。」（Ｇ氏）つまり変質者は理性がなくなるから犯罪にまで及んでしまうということだ。通り魔だけじゃなくて痴漢なども変質者のたぐいになるらしい。なおＧ氏によるとＳＭマニアに対して「変態」と言うぶんには何も問題ないが……</p>
          <p style="text-align: center;">↓</p>
          <p id="honmon">　ＳＭマニアから見れば、この事件にＳＭ性は感じられないという。だが一般（ノーマルな性的趣味）の人からすると、どちらも変質者で同じような気もするが……。「違います。事件の犯人は変質者。ＳＭマニアは変態。ＳＭマニアは自分が変態であることを認知しているし、立場も分かっていれば理性もある。日常生活においては全く普通で、性欲の部分だけが変態なんです。」（Ｇ氏）つまり変質者は理性がなくなるから犯罪にまで及んでしまうということだ。通り魔だけじゃなくて痴漢なども変質者のたぐいになるらしい。なおＧ氏によるとＳＭマニアに対して「変態」と言うぶんには何も問題ないが……</p>
          <!--YOUR DATA GOES HERE -->
        </div>
      </div>
      <div id="ft" role="contentinfo">
        <p></p>
      </div>
    </div>
  </body>
</html>

実行はこちら（Firefoxのみ）