見出し部分でchap1を使っているところやfont3などでフォントサイズを書き換えた。
AozoraEpub3では見出しがh1ではなくdivになっていたので、htmlっぽくないな感じたので変えてみた。ただ、後で問題がないかよく確認する必要がある。
青空文庫の特徴として見出しの種類が多い、電書協に対応例がないので考える必要がある。
############# 見出し #############
ここから大見出し <div class="chap1"> 1
ここで大見出し終わり </div> 1
ここから中見出し <div class="chap2"> 1
ここで中見出し終わり </div> 1
ここから小見出し <div class="chap3"> 1
ここで小見出し終わり </div> 1
###見出し注記は自動で閉じる(見出し終わり注記ではタグは定義しない)
見出し <div class="chap1"> </div> 1
見出し終わり 1
大見出し <div class="chap1"> </div> 1
大見出し終わり 1
中見出し <div class="chap2"> </div> 1
中見出し終わり 1
小見出し <div class="chap3"> </div> 1
小見出し終わり 1
同行大見出し <span class="font5">
同行大見出し終わり </span>
同行中見出し <span class="font3">
同行中見出し終わり </span>
同行小見出し <span class="font1">
同行小見出し終わり </span>
窓大見出し <span class="mado L">
窓大見出し終わり </span>
窓中見出し <span class="mado M">
窓中見出し終わり </span>
窓小見出し <span class="mado S">
窓小見出し終わり </span>
/* 窓見出し 行頭2行のみ対応 */
span.mado {
float: left;
display: inline-block;
line-height: 1em;
}
/* 窓見出し 左右paddingは (lineheight-文字サイズ/2)/文字サイズ */
span.mado.L { font-size:1.5em; padding:0 0.625em 0.33em 0; line-height:1em;}
span.mado.M { font-size:1.3em; padding:0 0.846em 0.38em 0; line-height:1em;}
span.mado.S { font-size:1.1em; padding:0 1.091em 0.45em 0; line-height:1em;}
下のように書き換えた
フォントサイズを電書協にあったfont-1emという書き方に合わせている。oo-midashiの指定もあったが、cssをそのまま置き換えるには不便だと感じたので使っていない。
############# 見出し #############
ここから大見出し <h1 class="font-1em50"> 1
ここで大見出し終わり </h1> 1
ここから中見出し <h2 class="font-1em30"> 1
ここで中見出し終わり </h2> 1
ここから小見出し <h3 class="font-1em10"> 1
ここで小見出し終わり </h3> 1
###見出し注記は自動で閉じる(見出し終わり注記ではタグは定義しない)
見出し <h1 class="font-1em50"> </h1> 1
見出し終わり 1
大見出し <h1 class="font-1em50"> </h1> 1
大見出し終わり 1
中見出し <h2 class="font-1em30"> </h2> 1
中見出し終わり 1
小見出し <h3 class="font-1em10"> </h3> 1
小見出し終わり 1
同行大見出し <span class="font-1em50"">
同行大見出し終わり </span>
同行中見出し <span class="font-1em30">
同行中見出し終わり </span>
同行小見出し <span class="font-1em10">
同行小見出し終わり </span>
窓大見出し <span class="mado L">
窓大見出し終わり </span>
窓中見出し <span class="mado M">
窓中見出し終わり </span>
窓小見出し <span class="mado S">
窓小見出し終わり </span>
フォントサイズ
AozoraEpub3では段階大きな文字は１１０から１６０まで段階的に大きくする。
逆に段階小さな文字90、83、77、70、66、62と小さくする。そのために、したのCSSが追加する必要がある。電書協ではこういう中途半端なものがなかった。
/* AozoraEpub3用フォントサイズ（％指定） */
.font-0em83 { font-size: 0.83em; }
.font-0em77 { font-size: 0.77em; }
.font-0em66 { font-size: 0.66em; }
.font-0em62 { font-size: 0.62em; }
AozoraEpub3での指定方法を電書協に入れ替えた。
####文字サイズ
１段階大きな文字 <span class="font1">
２段階大きな文字 <span class="font2">
３段階大きな文字 <span class="font3">
４段階大きな文字 <span class="font4">
５段階大きな文字 <span class="font5">
６段階大きな文字 <span class="font6">
大きな文字終わり </span>
ここから１段階大きな文字 <div class="font1"> 1
ここから２段階大きな文字 <div class="font2"> 1
ここから３段階大きな文字 <div class="font3"> 1
ここから４段階大きな文字 <div class="font4"> 1
ここから５段階大きな文字 <div class="font5"> 1
ここから６段階大きな文字 <div class="font6"> 1
ここで大きな文字終わり </div> 1
１段階小さな文字 <span class="font-1">
２段階小さな文字 <span class="font-2">
３段階小さな文字 <span class="font-3">
４段階小さな文字 <span class="font-4">
５段階小さな文字 <span class="font-5">
６段階小さな文字 <span class="font-6">
小さな文字終わり </span>
ここから１段階小さな文字 <div class="font-1"> 1
ここから２段階小さな文字 <div class="font-2"> 1
ここから３段階小さな文字 <div class="font-3"> 1
ここから４段階小さな文字 <div class="font-4"> 1
ここから５段階小さな文字 <div class="font-5"> 1
ここから６段階小さな文字 <div class="font-6"> 1
ここで小さな文字終わり </div> 1
##間にpタグが入るのでブロック注記同様divにする
##間にpタグが入るのでブロック注記同様divにする
表題前 <div class="font5"> 1
表題後 </div> 1
原題前 <div class="font4"> 1
原題後 </div> 1
副題前 <div class="pt2 font2"> 1
副題後 </div> 1
副原題前 <div class="pt2 font2"> 1
副原題後 </div> 1
著者前 <div class="btm pb2 font1"> 1
著者後 </div> 1
副著者前 <div class="btm pb2 font1"> 1
副著者後 </div> 1
変更後
####文字サイズ
１段階大きな文字 <span class="font-1em10">
２段階大きな文字 <span class="font-1em20">
３段階大きな文字 <span class="font-1em30">
４段階大きな文字 <span class="font-1em40">
５段階大きな文字 <span class="font-1em50">
６段階大きな文字 <span class="font-1em60">
大きな文字終わり </span>
ここから１段階大きな文字 <div class="font-1em10"> 1
ここから２段階大きな文字 <div class="font-1em20"> 1
ここから３段階大きな文字 <div class="font-1em30"> 1
ここから４段階大きな文字 <div class="font-1em40"> 1
ここから５段階大きな文字 <div class="font-1em50"> 1
ここから６段階大きな文字 <div class="font-1em60"> 1
ここで大きな文字終わり </div> 1
１段階小さな文字 <span class="font-0em90">
２段階小さな文字 <span class="font-0em83">
３段階小さな文字 <span class="font-0em77">
４段階小さな文字 <span class="font-0em70">
５段階小さな文字 <span class="font-0em66">
６段階小さな文字 <span class="font-0em62">
小さな文字終わり </span>
ここから１段階小さな文字 <div class="font-0em90"> 1
ここから２段階小さな文字 <div class="font-0em83"> 1
ここから３段階小さな文字 <div class="font-0em77"> 1
ここから４段階小さな文字 <div class="font-0em70"> 1
ここから５段階小さな文字 <div class="font-0em66"> 1
ここから６段階小さな文字 <div class="font-0em62"> 1
ここで小さな文字終わり </div> 1
##間にpタグが入るのでブロック注記同様divにする
##間にpタグが入るのでブロック注記同様divにする
表題前 <div class="font-1em50"> 1
表題後 </div> 1
原題前 <div class="font-1em40"> 1
原題後 </div> 1
副題前 <div class="pt2 font-1em20"> 1
副題後 </div> 1
副原題前 <div class="pt2 font-1em20"> 1
副原題後 </div> 1
著者前 <div class="btm pb2 font-1em10"> 1
著者後 </div> 1
副著者前 <div class="btm pb2 font-1em10"> 1
副著者後 </div> 1
小書きの書き換え
####小書き
行右小書き <span class="super">
行右小書き終わり </span>
行左小書き <span class="sub">
行左小書き終わり </span>
上付き小文字 <span class="super">
上付き小文字終わり </span>
下付き小文字 <span class="sub">
下付き小文字終わり </span>
小書き <span class="kogaki">
小書き終わり </span>
/* 小書き文字
----------------------------------------------------------------
通常の文字を「ぁゃっ」のような小書き文字に見せるための指定
---------------------------------------------------------------- */
.kogaki {
font-size: 0.75em;
}
/* 【縦組み】右上 */
.vrtl .kogaki {
padding: 0.1em 0 0.15em 0;
vertical-align: super;
}
