昨日載せた文字パレットのソースコードと、ローカルに保存して単独で使う例の紹介です。
HTML
昨日は記事中に直接HTMLを入れました。それを単独で使うテンプレートにすると ↑ こんな感じ。スクリプトは最後に実行します。説明文のところは空でも可。というか本当は説明文のDIV要素自体を不要にすべきでしたが、最初、拡大文字を説明文の直前に(ID:charNotesを探して)挿入していた名残りです。
JavaScript
長いのでフレーム内スクロールで表示。大半はインターフェイス回りで、基本は
- 指定されたコードポイントor文字から、テーブル左上の起点コードポイントを決める
- 起点から横に16字、縦に10行(または指定された行数)ずつ、文字を並べる
だけです。1.で文字が来た場合のサロゲートペア処理が少し面倒。またURLにクエリが付いていたら自動的に検索&文字パレット表示しますが(例:~.html?0x2710)、生成されるボタンやセルにonclickイベントを付ける際、JavaScriptで「オブジェクト.onclick = function(e) { … } 」とはできなかったので、代わりにHTMLタグに「onclick="関数名(this)"」と書いてinnerHTMLで投入しています。もしかしたら、昨日の記事中に入れたせいかも。
CSS
こちらも長いのでフレーム内スクロールで。内容はパレット(テーブル)や拡大文字などのスタイル設定。一部でCSS3の疑似クラスを使い、未対応ブラウザでは表示が若干変わります。
使用例
以上の3ファイルをcharPalette.zipにまとめました。適当な場所に解凍しChromium43で開くと ↓ こんな感じ。なおローカルファイルからJavaScriptを開くので、環境によっては起動時のオプションとか必要かも。自分の場合(Windows7)特に不要でした。
↓ 昨日と同様、サロゲートペアの絵文字の一つ0x1F427をクエリした結果。Segoe UI Symbolというフォントがシステムに入っていれば(Windows7では最初からあり)こんな風になるはず。
↓ 実際どのフォントが使われたかChromiumで調べたところ。Inspect Elementツールを起動し、文字を選択してElements→Computedを選ぶと、下の方にRendered Fontsが出ます。
ローカルでHTMLとJavaScriptを開くにあたり、PCのセキュリティ設定等で動かない場合があるかも。そんな時は昨日の記事をオンラインで使って下さい。