縦書き横書き
電書協のEPUBで気になったのがhtmlタグ自体にclass指定をして、vtrlやhltrで縦書き横書きを切り替えている。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="ja"
class="vrtl"
>
AozoraEpub3では
<link rel="stylesheet" type="text/css" href="../css/vertical.css"/>や
<link rel="stylesheet" type="text/css" href="../css/horizontal.css"/>のようにスタイルシートを読み込むことでページを縦書きか横書きかを切り替えている。
スタイルシートの読み込みがどちらがめんどくさくないかを考えると、電書協のほうが合理的かなと思う。
ただ、それをするには、書き換えないといけない部分が多い。
以前やったのは縦書き部分のCSSと横書き部分のCSSを個別に書き換えていた。
見出し
電書協サンプルでh1タグをどのように使うかを見ていくと、こうなっていた。
この前見たoomidashiというのはあるにはあったけどスタイルシートが空であった。つまりまだ決めていないのかなというところ。font-1em50というのが1.5倍の文字の大きさ。
<h1><span class="font-1em50">配置の基礎確認</span></h1>
.font-1em50 { font-size: 1.50em; }
青空文庫の大見出しがh1に相当するかどうかはしらないけど。青空文庫の組版案内ではどうなっているかを見ていると。大見出しがh3、中見出しがh4、小見出しがh5だった。<h3 class="o-midashi">
AozoraEpub3では大見出しが１５０％、中見出しが１３０％、小見出しが１１０となっている。
書かれていないということは勝手に決めていいよねってことで、
<h1 class="oo-midashi">大見出し</h1>か<h1 class="font-1em50">大見出し</h1>
<h2 class="naka-midashi">中見出し</h2>か<h2 class="font-1em30">中見出し</h2>
<h3 class="ko-midashi">小見出し</h3>か<h3 class="font-1em10">小見出し</h3>
/* 見出しのデフォルト書体指定
---------------------------------------------------------------- */
/* 横組み用 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: serif-ja, serif;
}
/* 縦組み用 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: serif-ja-v, serif-ja, serif;
}
/* 大見出し */
.oo-midashi {
}
/* フォントサイズ（％指定） */
.font-050per { font-size: 50%; }
.font-060per { font-size: 60%; }
.font-070per { font-size: 70%; }
.font-075per { font-size: 75%; }
.font-080per { font-size: 80%; }
.font-085per { font-size: 85%; }
.font-090per { font-size: 90%; }
.font-100per { font-size: 100%; }
.font-110per { font-size: 110%; }
.font-115per { font-size: 115%; }
.font-120per { font-size: 120%; }
.font-130per { font-size: 130%; }
.font-140per { font-size: 140%; }
.font-150per { font-size: 150%; }
.font-160per { font-size: 160%; }
.font-170per { font-size: 170%; }
.font-180per { font-size: 180%; }
.font-190per { font-size: 190%; }
.font-200per { font-size: 200%; }
.font-250per { font-size: 250%; }
.font-300per { font-size: 300%; }
/* フォントサイズ（文字数指定） */
.font-0em50 { font-size: 0.50em; }
.font-0em60 { font-size: 0.60em; }
.font-0em70 { font-size: 0.70em; }
.font-0em75 { font-size: 0.75em; }
.font-0em80 { font-size: 0.80em; }
.font-0em85 { font-size: 0.85em; }
.font-0em90 { font-size: 0.90em; }
.font-1em { font-size: 1.00em; }
.font-1em10 { font-size: 1.10em; }
.font-1em15 { font-size: 1.15em; }
.font-1em20 { font-size: 1.20em; }
.font-1em30 { font-size: 1.30em; }
.font-1em40 { font-size: 1.40em; }
.font-1em50 { font-size: 1.50em; }
.font-1em60 { font-size: 1.60em; }
.font-1em70 { font-size: 1.70em; }
.font-1em80 { font-size: 1.80em; }
.font-1em90 { font-size: 1.90em; }
.font-2em { font-size: 2.00em; }
.font-2em50 { font-size: 2.50em; }
.font-3em { font-size: 3.00em; }
AozoraEpub3の文字サイズ指定で、電書協にないものがある。
それが文字サイズ小の％表示
/* 文字サイズ 小 */
.font-1 { font-size: 90%; }
.font-2 { font-size: 83%; }
.font-3 { font-size: 77%; }
.font-4, .kogaki { font-size: 70%; }
.font-5 { font-size: 66%; }
.font-6 { font-size: 62%; }
だから、下のような表記を追加する。
.font-0em83 { font-size: 0.83em; }
.font-0em77 { font-size: 0.77em; }
.font-0em66 { font-size: 0.66em; }
.font-0em62 { font-size: 0.62em; }
