ynomura
@ynomura (Yukinori Nomura)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

macOS版、iOS版、iPadOS版のKindleで縦書き・ルビが表示されない問題

解決したいこと

青空文庫で公開されているファイルを EPUB 形式にして MacやiPhoneのKindleアプリで縦書きで読めるようにしたい。
Kindleアプリは最新の Ver.7 で、Kindleストアで購入した本はちゃんと縦書き、ルビ表示ができていますが、下記のように作成した EPUB ファイルだと正しく表示されません。

発生している問題・エラー

青空文庫で公開されているファイルを AozoraEpub3 ( https://github.com/kyukyunyorituryo/AozoraEpub3 )を使用して EPUB 形式に変換した後、 Send to Kindle サイト( https://www.amazon.co.jp/sendtokindle )でライブラリに登録して Kindle で読むようにしていますが、Kindle端末や Android版の Kindleアプリではちゃんと縦書きでルビも表示されるのですが、macOS版、iOS版、iPadOS版の Kindleアプリでは横書きで表示され、ルビも漢字の後に普通サイズのフォントで表示されます。下の画像。

IMG_9428 2.jpg

同じファイルを macOS版の Kindle Classic では、正しく表示されますが、このアプリは非推奨で Kindleアプリを使うようにということになっています。
スクリーンショット 2023-11-10 8.53.55.png

自分で試したこと

このファイルは Kindle端末(実機)や Android端末の Kindleアプリでは、問題なく表示されます。
また、macOS 版の Kindle Previewer アプリで開いてみても縦書きルビ表示されています。
スクリーンショット 2023-11-10 9.11.33.png

また、作成した EPUBファイルに問題が無いか Macで Sigil.app(EPUBファイルを操作するアプリ)で開いてみても問題は発見されませんでした。
スクリーンショット 2023-11-10 7.00.46.png

他に何か試してみることがあればご教授いただけると助かりますので、よろしくお願いいたします。

1

情報ありがとうございます。
早速試してみましたが、現在の Kindle Previewer 3 では、
「本(.azk)-古いiOS端末にサイドロードします」ではなく
「本(.mobi)-古いiOS端末にサイドロードします」しか選択できず。
エクスポートされたファイルを iOS 端末にサイドロードしても縦書きにならず、
ルビも漢字の後に大きなフォントで表示されました。
ということで、問題が解決しませんでした。
ただ、Kindle のストアに青空文庫のファイルが登場してきているので、青空文庫の本を
Kindleに自炊(?)する必要が無くなっている様です。

0Like

きっとすでにお気づきかと思いますが、iOSのKindleアプリの最新版7・12では、この問題が解決されたようで、自分で作成した縦書きルビつきのepubをsend to Kindle すると見事に縦書きルビつき表示になりました。いつのまに、、、、、。

私は、自炊してBunko OCRでテキスト化した小説を縦書きルビつきで読みたかったのですが、CalibreやEpuborや、AozoraEpub3.jarで作成したepubは、kindle oasis 第8世代では縦書き表示されても、iPadでもiPhoneでも横書き表示になってしまいあきらめて放ってありました。ですから、kindle oasis 第8世代に1600冊ほどのEpubをSendToKindleして読書する毎日でしたが、久しぶりにiPadを触ったら、しれっと普通に縦書き表示されてびっくり。

kindle oasis 第8世代で読み切る覚悟で、3台ほど買い漁ったばかりで、、、、

長文失礼いたしました。

1Like

情報ありがとうございます。
急いで iPhone, iPad の Kindle 7.12 を開いてみたのですが、横書き、ルビが本文で表示されたままでした。一旦、削除して再ロードしても同様でした。
ひょっとして、EPUB を再度 Send to Kindle しないとダメなのでしょうか?

1Like

なるほど!

今年の3月17日にSend2Kindleした縦書きルビは、横書き表示されました、気がつきませんでした。
そこで、このepubをたった今、S2Kしたところ、、、やっぱり横書きのまま

このファイルは、iPadのBooksでは縦書き表示されています。

もしかすると、最近のepub変換のやり方をいろいろ変えてて、3月の頃とは違う手順を踏んでいる(はず)ので、ちょっと落ち着いて確認しますね。

また、手順や画像なども整理してアップします。

ぬか喜びさせてごめんなさい。お詫びいたします。

最近のファイルは全部、縦書きルビ表示されてるんですけどね、、、、なんだろう。

お恥ずかしい。

1Like

AozoraEpub3-1 で再度 EPUB にして S2K してみましたが、横書きのまま表示されました。
iBookだと縦書き・ルビ対応という情報を頂きましたので、iBook(ブック)で表示させてみました。これ良いですね!
ありがとうございます。

0Like

すっかり、自分がやった手順を忘れていましたが、CalibreでEpub変換する際に、Stylesheet.cssを、以下のように書き換える(入れ替える)と、青空文庫テキストが、iOSアプリでも縦書きルビ表示されるんでした、自動設定に変えてかってにやってもらっていたのでわすれてました。

Calibreでepubを読み込み、「書籍編集」で中は開いて、stylesheet.cssを開けて、
すでにある中身を無視して、以下を流し込みます。

.book-title {
display: block;
margin-left: 0;
margin-top: 2em;
}

.calibre {
display: block;
text-align: justify;
margin: 0;
-epub-text-orientation: mixed;
-epub-writing-mode: vertical-rl;
-webkit-text-orientation: mixed;
-webkit-writing-mode: vertical-rl;
text-orientation: mixed;
writing-mode: vertical-rl;
word-break: normal; /* ????? /
line-break: normal; /
????? /
word-wrap: break-word; /
??????? /
white-space: normal; /
???????? */
}

.calibre1 {
line-height: 1.2;
}

.calibre2 {
display: block;
font-size: 1em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0;
}

.calibre3 {
display: block;
font-size: 1.375em;
font-weight: bold;
line-height: 1.2;
margin: 0.83em 0;
}

.calibre4 {
display: block;
list-style-type: disc;
margin-bottom: 1em;
margin-right: 0;
margin-top: 1em;
}

.calibre5 {
display: list-item;
list-style-type: none;
}

.calibre6 {
text-decoration: none;
}

.calibre7 {
display: block;
list-style-type: circle;
margin-bottom: 0;
margin-right: 0;
margin-top: 0;
}

.font-1em {
display: block;
font-size: 1.25em;
font-weight: bold;
line-height: 1.2;
margin: 0.67em 0;
}

.font-1em1 {
display: block;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
margin: 1em 0;
}

.pcalibre {
-epub-line-break: normal;
-epub-text-orientation: mixed;
-epub-word-break: normal;
-epub-writing-mode: vertical-rl;
-webkit-text-orientation: mixed;
-webkit-writing-mode: vertical-rl;
line-break: normal; /* ????? /
text-orientation: mixed;
word-break: normal; /
????? /
word-wrap: break-word; /
??????? /
white-space: normal; /
???????? */
writing-mode: vertical-rl;
margin: 0;
padding: 0;
}

.pcalibre3 {
-epub-hyphens: auto;
-epub-line-break: normal;
-epub-text-align-last: left;
-epub-word-break: normal;
-epub-writing-mode: vertical-rl;
-webkit-hyphens: auto;
-webkit-line-break: normal;
-webkit-text-align-last: left;
-webkit-text-underline-position: under left;
-webkit-word-break: normal;
-webkit-writing-mode: vertical-rl;
background: transparent;
color: #000;
display: block;
font-family: "?? ??", "MS Mincho", "?????? ProN W3", "HiraMinProN-W3", serif, sans-serif;
font-size: 1em;
letter-spacing: normal;
line-break: normal; /* ????? /
line-height: 1.75;
text-align: justify;
text-indent: 0;
vertical-align: baseline;
white-space: normal; /
???????? /
word-spacing: normal;
word-wrap: break-word; /
??????? /
word-break: normal; /
????? */
writing-mode: vertical-rl;
margin: 0;
padding: 0;
}

.pcalibre4 {
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
display: block;
height: auto;
text-indent: 0;
width: auto;
writing-mode: vertical-rl;
margin: 0 auto;
padding: 0;
}

.pcalibre5 {
display: block;
}

.pcalibre6 {
-epub-text-align-last: auto;
-webkit-text-align-last: auto;
display: block;
margin-bottom: 2em;
margin-right: 2em;
text-align: right;
}

.pcalibre7 {
-epub-text-orientation: mixed;
-epub-writing-mode: vertical-rl;
-webkit-text-orientation: mixed;
-webkit-writing-mode: vertical-rl;
text-orientation: mixed;
writing-mode: vertical-rl;
}

.pcalibre8 {
color: #000;
display: block;
font-family: "@?? ??", "@MS Mincho", "?????? ProN W3", "HiraMinProN-W3", serif, sans-serif;
font-size: 1em;
line-height: 1.2;
vertical-align: baseline;
margin: 0;
padding: 0;
}

.pcalibre9 {
display: block;
height: auto;
text-indent: 0;
width: auto;
margin: 0;
padding: 0;
}

.pcalibre10 {
-epub-text-align-last: auto;
-webkit-text-align-last: auto;
display: block;
text-align: right;
}

.pcalibre11 {
padding-top: 0.5em;
}

.pcalibre12 {
font-size: 0.75em;
vertical-align: super;
}

.pcalibre13 {
-epub-text-orientation: upright;
-webkit-text-orientation: upright;
text-orientation: upright;
}

.pcalibre14 {
font-family: sans-serif-ja, sans-serif;
}

.pcalibre1:link {
background: transparent;
color: #00C;
}

.pcalibre2:visited {
background: transparent;
color: #609;
}

/* .pcalibre15:hover {
color: red;
} */

綺麗なCSSじゃなく、修正を繰り返したので汚くてごめんなさい。

あとは、もう一つのファイル content.opfファイルも開いて、
に書き換えてSave、あとはそれをそのままEpubファイルとして出力すると、そのファイルはiPad、iPhoneでも縦書きルビ表示になっています。

私が変換しているのは、主に時代小説と推理小説をスキャンスナップでjpeg画像として読み込んで、それをまとめてPDFに変換して、そのPDFをbunkoOCRで青空文庫フォーマットのテキストに変換(余白をできるだけ無くして、ページ番号なども削ってしまう)するとほぼ100%に近い認識で、ルビまでしっかりと変換してくれます。

そのテキストを使って、さぎょうしています。

ご指摘いただけたことで、3月までの古いファイルのほとんどが、上記の作業をしていなかったので、これから粛々とやり直しすることに気付けました、ありがとうございます。

長文失礼しました。

1Like

あ、すいません、貼り付けたCSSですが、文字化けしていますね
うーむ、どうするといいんだろう、、、、。
どこかで、ブログとかで、公開すればいいのかな。

1Like

詳しい情報ありがとうございます。参考になります。
CSS を弄ると何とかなるかなとは思いましたが、踏み込んでおりませんでした。
そもそも Kindle や Andoroid版ではちゃんと表示できているのに、iOS などで正しく表示されないのが問題だと思っています。サポートに対策依頼をしたけど、2回ほどレスポンスがありましたけど、その後は連絡がありません。

0Like

誤字脱字、文字化けの投稿失礼しました、ブログにでも書き直します(週末に)ので、そしたら、コピーできるようにしておきます。ごめんなさい。

0Like

まとめていただいてありがとうございます。
結構、手間がかかりますね。

0Like

初めまして。
自分の環境ではなぜか、EPUB 内の opf ファイルの <metadata> タグ内に

<meta name="primary-writing-mode" content="horizontal-rl"/>

という一行を追加するだけで、iOS の Kindle アプリで縦書き、ルビ表示、右綴じができるようになりました。CSS ファイル等は一切変更していません。
KADOKAWA-EPUB 制作仕様」の文庫サンプルで動作確認しています(下記、追加前と追加後のスクリーンショットです)。
Gbce4yVacAA7ZiL.jpgGbce4yWacAAmC7q.jpgGbce4yWasAAsDzt.jpgGbce4yVaIAAnlET.jpg

以前にも @atsuiimuro さんの方法を試したり色々試行錯誤したのですが当時はうまくいきませんでした。もしかしたら Amazon 側で最近何か仕様が変わったのかもしれません。

他の方の環境で再現性があるかわかりませんが、念のためご報告です。

0Like

@alltale2037 さま
情報ありがとうございます。
試してみたところ、私の環境でもうまくいきました。
で、AozoraEpub3 の中にある、Package.vm の 53行目の後にこのmetaタグを追加
してみたら、ちゃんと縦書きルビつきで表示される epub ファイルを作るように
なってくれました。
あとは、Amazon Kindleにあるような表紙画像を作ってくれるアプリがあればと
思います。

0Like

早速ご確認くださりありがとうございました。うまくいったようで良かったです。

表紙については、AozoraEpub3 を使用していないので状況は分かりませんが、こちらでは KADOKAWA-EPUB 制作仕様と同じ書式で適当な JPEG 画像ファイルを指定することで、普通に Kindle 上で表紙を表示できています。ただ、もし青空文庫から JPEG 表紙画像自体を作るアプリがあるか、ということでしたら、あいにく存じ上げないです(ちなみに自分は CUI で本のタイトル文字列を ImageMagick で画像化して表紙に使っています)。

1Like

表紙画像の生成についての情報ありがとうございます。
よろしければ、CUI の画像生成方法を教えていただけませんか?
ImageMagic はインストールして少しいじってみました。
元になる画像(1000,1500PX)を作って、conv コマンドで -annotate で文字を書くところまで試してみました。

ちなみに AozoraEpub3 を使わないで、青空文庫→Kindleはどのように実現されていますか?
良い方法があれば、それも使ってみたいと思います。

0Like

@ynomura さん、遅くなってすみません。
自分の場合は EPUB 化しているのは青空文庫ではなく一般的な文章ですが、KADOKAWA-EPUB 制作仕様を unzip して本文の部分を置き換え、また zip しているだけです。
ImageMagick については色々やり方がありますがお使いのやり方は良い案だと思います。ちょっと今出張中で細かいオプションが確認できないので、zip の件も含めて週末確認してまた追記しますね。少しお待ち下さい。

0Like

お忙しいところ恐縮です。
お手隙の時にでも結構ですのでよろしくお願いします。

0Like

遅くなりました。
画像生成は、MacOS の場合ですが例えば

$ convert -font "/System/Library/Fonts/ヒラギノ明朝 ProN.ttc" -fill "#001122" -size "927x1600" -mattecolor "#aabbcc" -frame 100x0 -extent "1127x1600" -background "#aabbcc" -gravity center label:"これはサンプルです。" cover.jpg

というようなことをやっています(オプションの使い方は自信ないですが、1127x1600 の画像内の 927x1600 の範囲内に文字列を配置しています)。
こちらの記事などご参考になるかもです。
https://qiita.com/hsagae/items/1b72fb9f3d6024ba46f0

EPUB 化ですが、「KADOKAWA-EPUB 制作仕様」
https://kadokawa-epub.bookwalker.co.jp/
で配布されているテンプレートファイルを利用させて頂いています。ec401-kadokawa-reflow[bunko-azk]-v113.epub(実質的に zip ファイル)を unzip して、タイトルや本文、表紙画像等を自前で用意したもの(HTML 形式)で置き換え、opf ファイルに上記で投稿したタグを追記した後、階層の一番上(mimetype などのファイルがある階層)で

$ ls
META-INF item     mimetype
$ zip -0X ../test.epub mimetype && zip -r9 ../test.epub META-INF item

のように再度 zip すると、1 階層上に EPUB ファイル(この例ではtest.epub)が生成されますので、Send to Kindle で Kindle に送っています。

この程度であれば自前のスクリプト等でも実施可能ですが、AozoraEpub3 は恐らくこの辺りをすべてやってくれる優れたツールなのだと思います。
大した内容でなくてすみませんが、ご参考になれば幸いです。

0Like

とっても参考になります。
conv コマンドは全く初めてでしたので、ゼロから画像ファイルを作る方法がわかりませんでした。(膨大なコマンドですね)
AozoraEpub3 は Javaで作られていてGUIで使えるのが楽でした。
作成した表紙画像とダウンロードした青空文庫のテキスト(XML)ファイルをドラッグ&ドロップして変換ボタンを押すだけですので、EPUBの内部構造を全く知らない私でも使えたのでした。
おかげさまでEPUB形式の一端を勉強させていただきました。
ありがとうございました。

0Like

Your answer might help someone💌