KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

EPUBの外字を画像で表示する

 電書協EPUBに外字画像の指定のしかたが書かれていたので、その方法を見ていく。実際に各ビュワーでどのような表示され方がされるかを試してみよう。

 

 AozoraEpub3で外字画像を表示するための機能を作ろうとしていたようだが、作られてはいなかった。作れるのかどうかも含めて検討をしてみる。

  青空文庫での画像の読み込みための形式

画像とキャプション

[#コンドル博士の図(fig47728_06.png、横320×縦322)入る]

画像のファイル名からimgタグに変換している。

 

ただ、外字画像の場合には、次の3つを切り替える必要がある。

  • 縦横1文字分の画像
  • 幅が1文字分の縦長画像
  • 高さが1文字分の横長画像

 

後でサンプルを作って表示テストをしてみよう。

 

 

 電書協EPUBガイドには外字について次のように書かれていた。ここで指定されている、CSS classは電書協EPUBCSSを利用している。

 

・外字画像
【備考】
JIS X 0213:2004 の文字集合にない文字は外字画像化
・字形のベースとするフォントなどは、各版元の指示に従う
・背景を透明で作成し、8bit PNG で保存した透過 PNG を用いる
※読者が背景色を変更できる RS のことを考慮
CSS class】
class="gaiji" : 縦横1文字分の画像 (作成画像サイズ例:128px×128px)
class="gaiji-line" : 幅が1文字分の縦長画像 (作成画像サイズ例:幅128px×高さナリユキ)
class="gaiji-wide" : 高さが1文字分の横長画像(作成画像サイズ例:高さ128px×幅ナリユキ)
例)1文字サイズ
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
例)幅が1行分の縦長画像
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji-line" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
例)高さが1文字分の横長画像
---------------------------------[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=""/>サンプルです。
-------------------------------------------------------------------------------

 

 

 

 キンドルでの外字画像については書かれていなかった。

kdp.amazon.co.jp

 

kdp.amazon.co.jp