電書協EPUBに外字画像の指定のしかたが書かれていたので、その方法を見ていく。実際に各ビュワーでどのような表示され方がされるかを試してみよう。
青空文庫での画像の読み込みための形式
［＃コンドル博士の図（fig47728_06.png、横320×縦322）入る］
画像のファイル名からimgタグに変換している。
ただ、外字画像の場合には、次の３つを切り替える必要がある。
- 縦横１文字分の画像
- 幅が１文字分の縦長画像
- 高さが１文字分の横長画像
後でサンプルを作って表示テストをしてみよう。
電書協EPUBガイドには外字について次のように書かれていた。ここで指定されている、CSS classは電書協EPUBのCSSを利用している。
・外字画像
【備考】
・JIS X 0213:2004 の文字集合にない文字は外字画像化
・字形のベースとするフォントなどは、各版元の指示に従う
・背景を透明で作成し、8bit PNG で保存した透過 PNG を用いる
※読者が背景色を変更できる RS のことを考慮
【CSS class】
class="gaiji" ： 縦横１文字分の画像 （作成画像サイズ例：128px×128px）
class="gaiji-line" ： 幅が１文字分の縦長画像 （作成画像サイズ例：幅128px×高さナリユキ）
class="gaiji-wide" ： 高さが１文字分の横長画像（作成画像サイズ例：高さ128px×幅ナリユキ）
例）１文字サイズ
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
例）幅が１行分の縦長画像
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji-line" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
例）高さが１文字分の横長画像
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji-wide" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
・画像のサイズ指定
【備考】
サイズは文字数か、画面に対する比率で指定します。後述の「サイズ」の項も参照のこと。
インライン（行内）表示する画像のサイズは、基本的には文字数で指定してください。
指定できる文字数の詳細は CSS をご確認ください。
また、大きな画像を「max-」なしで指定すると、画面からはみ出したり変形したりする場合があります。
【CSS class】
height-*em ： 画像の高さを、文字数で指定（例「height-2em50」……高さ 2.5 文字分）
height-***per ： 画像の高さを、画面の高さに対する比率で指定
（例「height-010per」……高さ 10% 分）
max-height-*em ： 画像の高さの最大値を、文字数で指定
max-height-***per： 画像の高さの最大値を、画面の高さに対する比率で指定
width-*em ： 画像の幅を、文字数で指定
width-***per ： 画像の幅を、画面の幅に対する比率で指定
max-width-*em ： 画像の幅の最大値を、文字数で指定
max-width-***per ： 画像の幅の最大値を、画面の幅に対する比率で指定
max-size-*em ： 画像の高さと幅の最大値を、文字数で指定
max-size-***per ： 画像の高さと幅の最大値を、画面の高さと幅に対する比率で指定
※その他、auto、none、0 など、利用可能な値は後述の「■ボックスの扱い」→「サイズ」の項を参照
例）画像を縮小して行内に表示
---------------------------------[sample code]---------------------------------
この文章は<img class="height-2em50" src="../image/gaiji-0001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
キンドルでの外字画像については書かれていなかった。
