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

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

広告

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

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

プライバシーポリシー

 

AozoraEpub3の電書協css対応作業2 縦書き横書き、見出し、フォントサイズ

縦書き横書き

電書協の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を個別に書き換えていた。

99nyorituryo.hatenablog.com

 

見出し

電書協サンプルで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">

kumihan.aozora.gr.jp

AozoraEpub3では大見出しが150%、中見出しが130%、小見出しが110となっている。

 

 書かれていないということは勝手に決めていいよねってことで、

<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; }