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

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

広告

今までに出版した電子書籍

Amazon.co.jp: 急急如律令: Kindleストア

プライバシーポリシー

 

AozoraEpub3の電書協css対応作業1 縦中横、外字画像、下付け上付け

一つずらそうとすると全体を調整しないといけない感じが辛い。

 

縦中横

####縦横中 (前後の外字画像がずれるので外にspan追加)####縦横中 (前後の外字画像がずれるので外にspan追加)

縦中横 <span class="tcy"><span>

縦中横終わり </span></span>

 

縦中横を見ていると、これspanで2重に囲われている。対して電書協では1重になっている。

 

<p>縦中横→<span class="tcy">9</span>(数字1桁)</p>

外字画像がずれるとあるので、外字画像部分も見てみる。ここもだいぶ違っている。

 

 

電書協の外字画像では

<p>標準→あいう<img class="gaiji" src="../image/gaiji-001.png" alt=""/>えお</p>

/* 外字画像
---------------------------------------------------------------- */
img.gaiji,
img.gaiji-line,
img.gaiji-wide {
display: inline-block;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
img.gaiji {
width: 1em;
height: 1em;
}
img.gaiji-line {
width: 1em;
height: auto;
}
img.gaiji-wide {
width: auto;
height: 1em;
}
/* 外字画像のベースライン */
.hltr img.gaiji,
.hltr img.gaiji-line,
.hltr img.gaiji-wide {
vertical-align: text-bottom;
}
.vrtl img.gaiji,
.vrtl img.gaiji-line,
.vrtl img.gaiji-wide {
vertical-align: baseline;
}

 

 

Aozoraepub3

外字画像 <span class="gaiji"><img src="%s"/></span>

 

/* 外字文字画像 */
.gaiji {
display: inline-block;
vertical-align: middle;
}
.gaiji img {
width: 1em;
left: -.2em;
}

 

変更後のAozoraepub3

Aozoraepub3では縦書きと横書きでスタイルシートが別れているので、分けて書く。

%sの部分に画像のアドレスが置換される。

<img class="gaiji" src="%s" alt=""/>

 

/* 外字画像
---------------------------------------------------------------- */
img.gaiji,
img.gaiji-line,
img.gaiji-wide {
display: inline-block;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
img.gaiji {
width: 1em;
height: 1em;
}
img.gaiji-line {
width: 1em;
height: auto;
}
img.gaiji-wide {
width: auto;
height: 1em;
}
/* 外字画像のベースライン 縦書き*/

img.gaiji,
img.gaiji-line,
img.gaiji-wide {
vertical-align: baseline;
}

 

横書き部分

/* 外字画像のベースライン 横書き*/
img.gaiji,
img.gaiji-line,
img.gaiji-wide {
vertical-align: text-bottom;
}

 

下付け上付け

class指定のsupをsuperに変える、フォントサイズ指定を0.66em;からsmallerに変える。