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

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

縦中横

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

縦中横 

縦中横終わり

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

縦中横→9（数字１桁）

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

電書協の外字画像では

標準→あいう<img class="gaiji" src="../image/gaiji-001.png" 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;
}
/* 外字画像のベースライン */
.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

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

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

変更後のAozoraepub3

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

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

/* 外字画像
---------------------------------------------------------------- */
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;
}