AozoraEpub3のバグ報告

　ある程度のバグチェックはしているのだけど、やはりミスはあるもので取りこぼしのバグが有ったようです。次のバージョンアップのときにでも取り入れようと思います。

　具体的に

　青空文庫形式では、テキストファイルに表題と著者名が入れれるのだけど、その表題の部分に縦中横や振り仮名などの注記も入れれます。それを表題のページを作るように設定していると、縦書きで出力するときに振り仮名や縦中横が適応される。

　問題はそこにスタイルシートで、縦中横のスタイルシートを読み込む設定をしていなかったので、表示されたときに半角数字が横転して表示されていた。

　電書協ではbook-style.cssに縦中横の内容のスタイルシートが書かれている。

<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>

　AozoraEpub3を電書協のスタイルシートに入れ替えるときに、電書今日のスタイルシートの指定を忘れていたようです。

AozoraEpub3: 1.1.1b4Q ( Java 13.0.2 / Windows 10 )

mobi（& epub）ファイル。出力した表題の「縦中横」指定がうまくいかない。半角数字（２文字）が正立しない。解決策がわからない。 pic.twitter.com/AppBjSs7b0

— 焚書刊行会 (@imagawatatsuya) 2020年10月10日

github.com

漫勉neo出でてきた道具を探す ちばてつや先生

togetter.com

 　以前から漫画家がどのような道具を使っているのかを調べてみています。漫勉で出てきた筆記具などを映像からウェブ検索したりして見つけています。

ひねもすのたり日記（１） (ビッグコミックススペシャル)

 　番組の中で書いていたのが、「ひねもすのたり日記」

あしたのジョー（１） (週刊少年マガジンコミックス)

99nyorituryo.hatenablog.com

 下書き

ステッドラー ホルダー芯 マルステクニコ 2mm用 780 C

 原稿を汚さいないように、ペーパータオルを手の下に敷いていた。

【まとめ買い】 スコッティ ハンドタオル100 × 4個

 自分の手で絵が汚れるから左から書く。

　吹き出しをマジックインキで書く。

マジックインキ No.500 黒 M500-T1 工業用マｰカｰ

ステッドラー 消しゴム マルスプラスチック 528 50

ゼブラ 漫画用ペン先 Gペン No.G 10本 PG-6B-C-K

コミックペン TACHIKAWA タチカワ サジペンクローム ペン先 5本入

 丸ペン、カブラペン

 下書き鉛筆

shop.gekkoso.jp

 書き文字

ゼブラ 油性ペン マッキー 極細 黒 5本 P-MO-120-MC-BK5

マービー フォードローイング 5本セット ブラック 4600-5A

 彩色は水彩に色鉛筆

ファーバーカステル 水彩 色鉛筆 平缶 60色セット TFC-WCP/60C

 　ドクターグリップの旧型の緑のやつ

パイロット シャープペン ドクターグリップ プレイボーダー 0.5 ミントグリーン HDGCL-50R-PMG

 uchidaの直線定規

 次は岩本ナオさん。

マロニエ王国の七人の騎士（１） (フラワーコミックスα)

AozoraEpub3-1.1.1b5Qのリリース

github.com

　AozoraEpub3-1.1.1から電書協のスタイルシートを使っています。なので、電書協CSSで用意されている機能は、タグにclassに指定を入れると使えます。電書協の色文字や背景色は青空文庫にないので、説明をしようとお思います。独自注記なので青空文庫にこの説明はありません。

AozoraEpub3では、

［＃ここから銀背景］〇〇［＃ここで銀背景終わり］

というようにここから、ここで区切られているものが<div>タグに変換していて、複数行に渡って囲むことができます。

［＃水色］うえ［＃水色終わり］

終わりと書かれているものは、spanタグに変換して一行もしくは一行の一部に対して影響します。

●［＃「●」は赤背景］という書き方もありますが、内部的に［＃赤背景］●［＃赤背景終わり］に書き換えているので同じ表現となります。

 　電書協のスタイルシートを使っています。なので、電書協CSSで用意されている機能は、classに指定を入れると使えます。sigilのような直接EPUBを編集できるソフトウェアを使うとclassを変更して文字に装飾ができます。

　上の画像のような表現をする場合の注記の例

↓ここから文字色・color-blue（「うえ」はcolor-red）
［＃ここから青色］
［＃小見出し］見出し　あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定なし）［＃小見出し終わり］

［＃小見出し］［＃灰色］見出し　あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定あり）［＃灰色終わり］［＃小見出し終わり］
段　落　あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定なし）
［＃灰色］段　落　見出し　あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定あり）［＃灰色終わり］
画像［＃sample（sample.jpg）入る］画像（透過png）
［＃ここで青色終わり］
↑ここまで文字色・color-blue

　変換されたhtmlタグはこうなる。 

<p>↓ここから文字色・color-blue（「うえ」はcolor-red）</p>
<div class="color-blue"><h3 id="kobo.23.1" class="font-1em10">見出し　あい<span class="color-red">うえ</span>お（見出しに色指定なし）</h3><p><br/></p>
<h3 id="kobo.24.1" class="font-1em10"><span class="color-gray">見出し　あい<span class="color-red">うえ</span>お（見出しに色指定あり）</span></h3><p>段　落　あい<span class="color-red">うえ</span>お（見出しに色指定なし）</p>
<p><span class="color-gray">段　落　見出し　あい<span class="color-red">うえ</span>お（見出しに色指定あり）</span></p>
<p>画像画像（透過png）</p>
</div><p>↑ここまで文字色・color-blue</p>

　上のような背景を銀色で、その中で文字を装飾したい場合は、次のような青空文庫で表現します。

#003-c　ブロックに一括で指定

↓ここから背景色・bg-silver（「うえ」は bg-blue＋color-cyan）
［＃ここから銀背景］
［＃小見出し］見出し　あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（見出しに色指定なし）［＃小見出し終わり］
［＃小見出し］［＃赤紫背景］見出し　あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（見出しに色指定あり）［＃赤紫背景終わり］［＃小見出し終わり］
段　落　あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（段落に色指定なし）
［＃赤紫背景］段　落　あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（段落に色指定あり）［＃赤紫背景終わり］
画像画像（透過png）
［＃ここで銀背景終わり］
↑ここまで背景色・bg-silver

 <p>#003-c　ブロックに一括で指定</p>
<p><br/></p>
<p>↓ここから背景色・bg-silver（「うえ」は bg-blue＋color-cyan）</p>
<div class="bg-silver"><h3 id="kobo.51.1" class="font-1em10">見出し　あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（見出しに色指定なし）</h3><h3 id="kobo.52.1" class="font-1em10"><span class="bg-magenta">見出し　あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（見出しに色指定あり）</span></h3><p>段　落　あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（段落に色指定なし）</p>
<p><span class="bg-magenta">段　落　あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（段落に色指定あり）</span></p>
<p>画像画像（透過png）</p>
</div><p>↑ここまで背景色・bg-silver</p>

　電書協で用意されている機能を青空文庫注記を拡張して使えるようにしているわけです。

####文字色
黒色 <span class="color-black">
黒色終わり </span>
ここから黒色 <div class="color-black"> 1
ここで黒色終わり </div> 1
暗灰色 <span class="color-dimgray">
暗灰色終わり </span>
ここから暗灰色 <div class="color-dimgray"> 1
ここで暗灰色終わり </div> 1
灰色 <span class="color-gray">
灰色終わり </span>
ここから灰色 <div class="color-gray"> 1
ここで灰色終わり </div> 1
鼠色 <span class="color-darkgray">
鼠色終わり </span>
ここから鼠色 <div class="color-darkgray"> 1
ここで鼠色終わり </div> 1
銀色 <span class="color-silver">
銀色終わり </span>
ここから銀色 <div class="color-silver"> 1
ここで銀色終わり </div> 1
白鼠色 <span class="color-gainsboro">
白鼠色終わり </span>
ここから白鼠色 <div class="color-gainsboro"> 1
ここで白鼠色終わり </div> 1
白色 <span class="color-white">
白色終わり </span>
ここから白色 <div class="color-white"> 1
ここで白色終わり </div> 1
黒地白色 <span class="inverse">
黒地白色終わり </span>
ここから黒地白色 <div class="inverse"> 1
ここで黒地白色終わり </div> 1
透明色 <span class="color-transparent">
透明色終わり </span>
ここから透明色 <div class="color-transparent"> 1
ここで透明色終わり </div> 1
灰地透明色 <span class="color-transparent bg-gray">
灰地透明色終わり </span>
ここから灰地透明色 <div class="color-transparent bg-gray"> 1
ここで灰地透明色終わり </div> 1
赤色 <span class="color-red">
赤色終わり </span>
ここから赤色 <div class="color-red"> 1
ここで赤色終わり </div> 1
青色 <span class="color-blue">
青色終わり </span>
ここから青色 <div class="color-blue"> 1
ここで青色終わり </div> 1
水色 <span class="color-cyan">
水色終わり </span>
ここから水色 <div class="color-cyan"> 1
ここで水色終わり </div> 1
赤紫色 <span class="color-magenta">
赤紫色終わり </span>
ここから赤紫色 <div class="color-magenta"> 1
ここで赤紫色終わり </div> 1
橙色 <span class="color-orangered">
橙色終わり </span>
ここから橙色 <div class="color-orangered"> 1
ここで橙色終わり </div> 1

####背景
黒背景 <span class="bg-black">
黒背景終わり </span>
ここから黒背景 <div class="bg-black"> 1
ここで黒背景終わり </div> 1
暗灰背景 <span class="bg-dimgray">
暗灰背景終わり </span>
ここから暗灰背景 <div class="bg-dimgray"> 1
ここで暗灰背景終わり </div> 1
灰背景 <span class="bg-gray">
灰背景終わり </span>
ここから灰背景 <div class="bg-gray"> 1
ここで灰背景終わり </div> 1
鼠背景 <span class="bg-darkgray">
鼠背景終わり </span>
ここから鼠背景 <div class="bg-darkgray"> 1
ここで鼠背景終わり </div> 1
銀背景 <span class="bg-silver">
銀背景終わり </span>
ここから銀背景 <div class="bg-silver"> 1
ここで銀背景終わり </div> 1
白鼠背景 <span class="bg-gainsboro">
白鼠背景終わり </span>
ここから白鼠背景 <div class="bg-gainsboro"> 1
ここで白鼠背景終わり </div> 1
白背景 <span class="bg-white">
白背景終わり </span>
ここから白背景 <div class="bg-white"> 1
ここで白背景終わり </div> 1
透明背景 <span class="bg-transparent">
透明背景終わり </span>
ここから透明背景 <div class="bg-transparent"> 1
ここで透明背景終わり </div> 1
赤背景 <span class="bg-red">
赤背景終わり </span>
ここから赤背景 <div class="bg-red"> 1
ここで赤背景終わり </div> 1
青背景 <span class="bg-blue">
青背景終わり </span>
ここから青背景 <div class="bg-blue"> 1
ここで青背景終わり </div> 1
水背景 <span class="bg-cyan">
水背景終わり </span>
ここから水背景 <div class="bg-cyan"> 1
ここで水背景終わり </div> 1
赤紫背景 <span class="bg-magenta">
赤紫背景終わり </span>
ここから赤紫背景 <div class="bg-magenta"> 1
ここで赤紫背景終わり </div> 1
橙背景 <span class="bg-orangered">
橙背景終わり </span>
ここから橙背景 <div class="bg-orangered"> 1
ここで橙背景終わり </div> 1

/* 文字色
---------------------------------------------------------------- */
/* １Ｃ用文字色 */
.color-black { color: #000000; }
.color-dimgray { color: #696969; }
.color-gray { color: #808080; }
.color-darkgray { color: #a9a9a9; }
.color-silver { color: #c0c0c0; }
.color-gainsboro { color: #dcdcdc; }
.color-white { color: #ffffff; }
.color-transparent { color: transparent; }

/* 基本色 */
.color-red { color: #ff0000; }
.color-blue { color: #0000ff; }
.color-cyan { color: #00ffff; }
.color-magenta { color: #ff00ff; }
.color-orangered { color: #ff4500; }

/* 背景色
---------------------------------------------------------------- */
/* １Ｃ用背景色 */
.bg-black { background-color: #000000; }
.bg-dimgray { background-color: #696969; }
.bg-gray { background-color: #808080; }
.bg-darkgray { background-color: #a9a9a9; }
.bg-silver { background-color: #c0c0c0; }
.bg-gainsboro { background-color: #dcdcdc; }
.bg-white { background-color: #ffffff; }
.bg-transparent { background-color: transparent; }

/* 基本色 */
.bg-red { background-color: #ff0000; }
.bg-blue { background-color: #0000ff; }
.bg-cyan { background-color: #00ffff; }
.bg-magenta { background-color: #ff00ff; }
.bg-orangered { background-color: #ff4500; }

AozoraEpub3に背景色をつける機能を入れる

　背景の色指定をやってみようと思う。使い方を間違うと販売が停止されるやつなので注意。

　できているようには見えるけれど、タグにクラス指定で追加しているのではなく、spanやdivで囲っているので、使いづらいところもある。

　htmlやbodyタグなどに直接クラスをかけないので、画面全体の背景色を指定できないなどの問題がある。

99nyorituryo.hatenablog.com

#003-a　文字列に指定　◎１Ｃ用文字色

背景色→あ（無指定）
背景色→あ（bg-black）
背景色→あ（bg-dimgray）
背景色→あ（bg-gray）
背景色→あ（bg-darkgray）
背景色→あ（bg-silver）
背景色→あ（bg-gainsboro）

背景色→あ（bg-white）
背景色→あ（bg-transparent）

青空文庫注記

背景色→あ（無指定）
背景色→［＃黒背景］あ［＃黒背景終わり］（bg-black）
背景色→［＃暗灰背景］あ［＃暗灰背景終わり］（bg-dimgray）
背景色→［＃灰背景］あ［＃灰背景終わり］（bg-gray）
背景色→［＃鼠背景］あ［＃鼠背景終わり］（bg-darkgray）
背景色→［＃銀背景］あ［＃銀背景終わり］（bg-silver）
背景色→［＃白鼠背景］あ［＃白鼠背景終わり］（bg-gainsboro）
背景色→［＃白背景］あ［＃白背景終わり］（bg-white）
背景色→［＃透明背景］あ［＃透明背景終わり］（bg-transparent）

#003-b　文字列に指定　◎基本色

背景色→あ（bg-red）
背景色→あ（bg-blue）
背景色→あ（bg-cyan）
背景色→あ（bg-magenta）
背景色→あ（bg-orangered）

背景色→［＃赤背景］●［＃赤背景終わり］（bg-red）
背景色→［＃青背景］●［＃青背景終わり］（bg-blue）
背景色→［＃水背景］●［＃水背景終わり］（bg-cyan）
背景色→［＃赤紫背景］●［＃赤紫背景終わり］（bg-magenta）
背景色→［＃橙背景］●［＃橙背景終わり］（bg-orangered）

epub背景色

epub背景色２

AozoraEpub3に文字に色をつける機能を入れる

　文字の色を変えたいという人がどれくらいいるかはわからないけど、電書協サンプルを見ているとあったので、を追加してみる。

github.com

1.1.1b5Q以降で使えるようになればと思う。

　青空文庫自体には、色文字についての注記はないようです。要望自体はあったようだけど規格が決まっていない。なので独自注記として考えています。

ディムグレー、ダークグレー、ゲインズボロ、シアン、マゼンダ、オレンジドなど、日本語の対訳がよくわからないものに適当に漢字を割り当てています。多分後で問題になるかもしれないが、注記の文字数を減らすために適当な漢字を当てています。

文字色→●（無指定）
文字色→［＃黒色］●［＃黒色終わり］（color-black　[#000000]）
文字色→［＃暗灰色］●［＃暗灰色終わり］（color-dimgray　[#696969]）
文字色→［＃灰色］●［＃灰色終わり］（color-gray　[#808080]）
文字色→［＃鼠色］●［＃鼠色終わり］（color-darkgray　[#a9a9a9]）
文字色→［＃銀色］●［＃銀色終わり］（color-silver　[#c0c0c0]）
文字色→［＃白鼠色］●［＃白鼠色終わり］（color-gainsboro　[#dcdcdc]）
文字色→［＃白色］●［＃白色終わり］（color-white　[#ffffff]）
文字色→［＃黒地白色］●［＃黒地白色終わり］（inverse　※黒地に白文字）
文字色→［＃透明色］●［＃透明色終わり］（color-transparent　[transparent]　※透明）
文字色→［＃灰地透明色］●［＃灰地透明色終わり］（color-transparent ＆ 背景 gray）

#002-b　文字列に指定　◎基本色

文字色→［＃赤色］●［＃赤色終わり］（color-red　[#ff0000]）
文字色→［＃青色］●［＃青色終わり］（color-blue　[#0000ff]）
文字色→［＃水色］●［＃水色終わり］（color-cyan　[#00ffff]）
文字色→［＃赤紫色］●［＃赤紫色終わり］（color-magenta　[#ff00ff]）
文字色→［＃橙色］●［＃橙色終わり］（color-orangered　[#ff4500]）

EPUB色文字指定

EPUB色文字赤など

EPUB色文字指定組み合わせ