タテ書きKindle原稿をマークダウンとCSSでつくる方法

マークダウンとCSSを使った、縦書きのKindle原稿(.epub)の作り方を紹介します。でんでんコンバーターなどは使いません。

pen-icon2021.08.20rewrite-icon2021.08.23

svg
Profile Pic

Writer:三好アキ

フロントエンド・エンジニア。「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJAMstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。


monoteinの事業について詳しくはこちらをご覧ください。


• ビギナー向け教本『はじめてつくるReactアプリ』など6冊を販売中。

タテ書き文章について

ネット上の情報のほとんどが横書きであるように、横書きはユーザーにもっとも馴染んだフォームといえます。

しかし日本語は縦書きも可能な言語で、そこには横書きにはない魅力があります。

縦書きにすることで、フォーマルな印象が強まり、読者の精読率を高める効果があると一般的にいわれます。

私はこれまで下のような記事を書いていますが、あの記事で紹介したのは、マークダウンとCSSとPandocを使って、ヨコ書きのEPUBファイルを作る方法でした。

今回は縦書きの文章の作り方と、横書きとの違い、注意すべき点などを紹介します。

タテ書き文章のためのCSS

縦書きの文章でも、基本的なプロセスは上の記事で紹介したものと同じです。

マークダウンで原稿を書き、縦書きの用のCSSを作り、表紙画像を用意して、それらすべてをPandocでEPUBファイルに変換する、というプロセスです。

しかし縦書きのためには、CSSのbodyに次の2つを追加します。

body {
    writing-mode: vertical-rl;
    overflow: auto;
}

そうすることで、下のようになります。

しかしそれでも時は流れ、流れた時は戻らず、戻らぬ時は年齢として肌に刻まれてゆく。

今回、私はbodyに次のようなスタイルを当てました。

body {
    font-family: serif;
    font-weight: 300;
    font-size: 14px;
    background-color: white;
    color: #333;
    width: 100%;
    overflow: auto;
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    -epub-writing-mode: vertical-rl !important;
}

ここに当ててある!importantと、ベンダープリフィックスの-epub-には、のちほど触れます。

英数字をタテ書き表示する

縦書きで手間がかかるのは、英数字の扱いです。

特にマークダウンで原稿を書いている段階では横書きとなっているので、その横書きの英数字を縦書きに変更する必要があるからです。

何も手を加えずに縦書きにすると、次のようになります。

彼女はただ「I'm living with my boyfriend」と言っただけなのである。
EUと北大西洋条約機構(NATO)の両方に加盟している国がある。
1,200人までだった収容人数を2,000人まで拡張したのは2017年だった。

まず英語の文章についてですが、私はなるべく翻訳した日本語文を使うようにし、もし使えない場合は、上のようにそのまま英語で縦書きにして表示するようにしました。

一方で短い英単語、例えば「EU」や「NATO」といったものは、下のCSSを使って縦書きに直しました。

.orientation{
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
}

これを下のように適用します。ご覧のように英単語のアルファベットには、それぞれに<span>が入っています。

// マークダウン原稿

<span class="orientation">E</span><span class="orientation">U</span>

これを表示させると次のようになります。

EU

「NATO」は下のようになります。

// マークダウン原稿

<span class="orientation">N</span><span class="orientation">A</span><span class="orientation">T</span><span class="orientation">O</span>

表示させると次のようになります。

NATO

数字に関しては、アラビア数字と漢数字のどちらを使うのか、まず決める必要があります。

ビジネス書のような、一般受けを重視する、内容よりも読みやすさが重要な類の本は、下のようにアラビア数字を使っているケースがよくあります。

1200

このようにアラビア数字で表記すると、文章との境目がわかりやすく、文章を読んでいる合間の目の休憩、いわゆる「目休め」になると私は思うので、確かにここにメリットがあることは認めつつも、ある種のフォーマルさや格調の高さを演出する場合には不適だと感じています。

そのため私は、縦書きの文章でアラビア数字は基本的に使わず、漢数字で統一しました。

次に考えるべきことは、漢数字の表記方法です。

というのは「1200」を漢数字で表記する場合、次の2通りがあるためです。

千二百
一二〇〇

私は当初、前者の「千二百」を使おうと考えていましたが、最終的には後者の「一二〇〇」で統一しました。

これはアラビア数字と漢数字のちょうど真ん中を取った書き方といえます。

どれを使うにせよ、一つの本の中でさまざまな表記方法を混在させることはせず、どれか一つに統一するようにしましょう。

誰でも手軽に出版できるKindle本の中でも特にエッセーや旅行記といった「書きやすいもの」には、表記の揺れやフォーマットの乱れがしばし散見されますが、そのような場合は、内容以前に著者の見識が疑われてしまいます。

漢字のフリガナ

読者の立場では難読文字にフリガナがあれば便利ですが、例えば谷崎潤一郎のような作家は、フリガナをつけると紙面の見た目がごちゃごちゃすると言って、嫌っていました。

私も基本的にはフリガナをつけるのが好きではなく、これは使われている漢字を正しく読めることが、その読者の読解能力を示す一種のバロメーターとなり、すなわち本の内容をその人が正しく読み解けるかどうかに関わってくるからです。

そういっても一般向け、例えばビジネス書や新聞などでは、このような高踏的な態度は取れませんので、フリガナをつけるのが一般的です。

フリガナ、別名「ルビ」には専用のHTMLタグが用意されており、これは横書き、縦書き共通して使うことができます。

// マークダウン原稿

<ruby>艱難辛苦<rt>かんなんしんく</rt></ruby>
// マークダウン原稿

<ruby>戦<rt>おのの</rt></ruby>き

これを縦書きで表示させると、次のようになります。

艱難辛苦かんなんしんく
おのの

文頭の一文字下げ

文章の文頭は一字下げるのが普通です。

私はマークダウンに<span>を入れて、そこにmargin-topのスタイルを当てて、一字下げを作りました。

// CSS

.indent{
    margin-top: 1em;
}
// マークダウン原稿

<span class="indent"></span>部屋は幾分古く、床には音を立ててきしむところもあった。

表示させると次のようになります。

部屋は幾分古く、床には音を立ててきしむところもあった。

右開きを指定する

縦書きの本は右開きになります。

そのためマークダウンファイルの冒頭の「frontmatter」部分にpage-progression-direction: rtlを入れて、この原稿を右開きにすることを指定します。

---
title:
- type: main
  text: 縦書き文章のつくり方
creator:
- role: author
  text: 三好アキ
language: ja
page-progression-direction: rtl
---

以上で、縦書きのためのCSSと「frontmatter」の設定は完了です。

マークダウンとCSSを使ってKindle原稿をつくる方法」で解説したように、Pandocを使って下のコマンドでEPUBファイルを生成します。

pandoc -f markdown -t epub3 book.md -o book.epub --css style.css --toc --toc-depth=2 --epub-cover-image=cover.png

出版後にヨコ書きになる問題

以上で縦書きのEPUBファイルが準備できたので、Amazonにアップロードしました。

しかし販売が開始された後、確認のため購入してみると、なぜか横書きとなっています。

Kindle Previewer 3(デスクトップアプリ)、原稿をアップロードするページのオンラインプレビューアー、そして販売開始後にサイト上の「試し読み」で表示させた時は縦書きで正しく表示されているにも関わらず、購入してスマートフォンで確認すると、横書きに変換されていました。

Amazonに問い合わせをすると、「確かに横書きになっていることが確認できたので、原因を調査して一週間以内に連絡を差し上げる」という返事をいただきました。

しかし私は一週間も待ちたくなかったので、自力で解決することとし、試しに!importantと、以下のコードをCSSに追加してみました。

body {

    ...

    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    -epub-writing-mode: vertical-rl !important;
}

-epub-というベンダープレフィックスがあることは知らなかったのですが、これを適用してPandocでEPUBファイルを生成し、再アップロードすると、購入しても正しく縦書きで表示されるようになっていました。

その後、ちょうど一週間後にAmazonから連絡が来ましたが、メッセージの趣旨は「XX日に再アップロードしてもらった版で、表示が正しく縦書きになっていることが確認できました」というだけで、Amazonの方で何か対応をしたなどは書かれていなかったので、おそらく上の追加したコードがうまく働いたということなのだと思います。

待ち時間『0秒』を体験arrowデモサイトを見る


ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JAMstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談