青空文庫を縦書きで読む

青空文庫は、著作権の切れた作品(一部著作権の存続しているものもあります)をボランティアで電子化し無償で提供するという素晴らしい活動を行なっています。2002年5月からは作品のXHTML(Extensible HyperText Markup Language)文書形式での配布が開始されました。この形式ではW3Cの勧告に準拠したルビ付けも行なわれています。ここでは、その青空文庫から入手できるXHTMLファイルをIE5.5以降を用いて縦書きで表示する方法を紹介します。

青空文庫はダウンロードしたファイルの加工を禁止しているわけではありませんが(青空文庫収録ファイルの取り扱い規準)、今回はファイル自体には手を加えないで縦書きにしたいと思います。

青空文庫のXHTMLファイルの入手

ファイルを探す

XHTML文書形式で公開されている作品の数はまだ少ないようです。この形式で公開している作品のリストのようなものは無いようですが、最近公開されたものなら、新規公開作品から辿ることができます。また、青空文庫検索リンクで「XHTML」などをキーワードにして検索することもできます。

ファイルを保存する

青空文庫の各作品のXHTMLファイルを自分のコンピュータに保存するには、作品別「図書カード」のページの「ファイルのダウンロード」にあるXHTMLファイルへのリンクをクリックし、[対象をファイルに保存] を選択します。リンクを左クリックするとファイルがブラウザ上で開かれてしまいます〔注1〕。なお同サイトのファイルのダウンロードと解凍(Windows)に多少の説明があります。

注1 ブラウザで表示したファイルを保存する方法として、IEでは [ファイル] → [名前を付けて保存] があります。これで [Web ページ、完全] を選ぶと画像やスタイルシートなどそのページに関連するファイルもまとめて保存してくれるので便利ではありますが、文書の形式をXHTMLからHTMLに書き換え、要素名も大文字に変換してしまうのでお勧めできません。

ファイルの構造

青空文庫のXHTMLファイルの構造はおおよそ次のようになっています。

<html>
  <head></head>
  <body>
    <h1>作品名</h1>
    <h2>著者名</h2>
    <div class="main_text">本文</div>
    <div class="bibliographical_information">書誌情報</div>
    <div class="notation_notes">表記について</div>
  </body>
</html>

このような構造の文書を縦書きにする最も簡単は方法は、マニュアルのページで書いたようにbody要素の内容を一つのdiv要素で括り、そこにwriting-mode:tb-rlと指定することですが、今回はオリジナルの文書には手を加えないことを前提としていますのでその方法は採りません。しかしこの構造では、body要素の内容として5つのブロックレベル要素(h1要素、h2要素、3つのdiv要素)が並んでいるので、このままではそれぞれの要素にwriting-mode:tb-rlを指定しても5つの要素が縦に並んでしまってうまくありません。

そこで、本文のみ縦書きにする、作品名と著者名は横書きでウインドウの上部にヘディングのような形で表示する、書誌情報と表記についての注記部分は表示しない、ということでうまく縦書きにできるよう次のようなスタイルシートを書いてみました。

body {
    direction: rtl;
    font-family: "MS 明朝", serif;
    overflow: auto;
}
div.main_text {
    direction: ltr;
    writing-mode: tb-rl;
    line-height: 2;
    height: 75%;
    margin: 3% 0;
}
h1, h2 { direction: ltr }
h1 { margin-bottom: 0 }
h2 {
    text-indent: 0.5em;
    margin-top: 0;
}
div.bibliographical_information, div.notation_notes {
    display: none;
}

スタイルシートの適用

スタイルシート(default.css)のダウンロード(ダウンロードせずに先に示したソースをコピーしてdefault.cssという名前を付けて保存するだけでも構いません)

青空文庫のXHTML形式のファイルは、参照するスタイルシートについてlink要素のhref属性で../../default.cssと指定しています。つまり縦書きで表示したいファイルの2階層上のフォルダにdefault.cssという名前のスタイルシートを置いておけばそれが適用されるわけです。

 A
└ B
 └ C

ですから、例えば [マイ ドキュメント] フォルダなどの中に図のようなディレクトリを作り、フォルダAに先ほどのdefault.cssを、フォルダCに実際に縦書きにしたいファイルを入れておけば、そのファイルを表示する際にdefault.cssが適用されます。フォルダの名前は、フォルダBを作家名、フォルダCを作品名とするなど適当に変えて構いません。

では、フォルダCに置いたXHTMLファイルをIE5.5以降で開いてみてください。うまく縦書きで表示されたでしょうか?

注意すること

ここでは、書誌情報など注記の部分を表示しないという方法で縦書きを実現しました。これは個人的にファイルを縦書きにして見るだけならば、青空文庫の収録ファイルの取り扱い規準で著作権の切れている作品について示されている

ファイルには、作品名、著者名、翻訳者名、底本などに関する情報、入力者名、校正者名、ファイル作成者名、ファイルが公開された日付、修正された日付、「青空文庫作成ファイル:」以下の由来に関する注が記載されています。これらを削除しなければ、あなたはダウンロードしたファイルを、有償であるか、無償であるかを問わず、複製し、再配布することができます。

という基準に抵触はしないと思われますが、しかし青空文庫にとっては望ましくない表示法でしょう。ですから、ここで示した方法はあくまでも個人的な使用にとどめてください。もしも青空文庫のファイルを縦書きにして公開する場合は、サンプルのページで示した例を参考にファイルの構造を多少変更し、縦書きでも注記等が表示されるようにすべきです。

なお、青空文庫のファイルには作品によってさらに細かいマークアップがなされているものがあるようなので、そのようなファイルをここで示したスタイルシートを使って表示させた場合、多少表示が乱れる可能性があります。

また、ファイルによっては通常表示できない文字の代わりに画像を用いているものがあります。画像を自分のコンピュータに取り込んで適切なフォルダに配置しないままそのようなファイルを表示させた場合、画像にあたる部分に代替テキストが横書きで表示され、縦書きレイアウトでは表示が乱れてしまいます。画像は作品をブラウザで表示させてそこからコピーするなどして取得することもできますが、これはかなり面倒です。青空文庫がXHTMLファイルと画像をパッケージにしたものをダウンロードできるようにしてくれるとありがたいのですが。

ファイルによっては不要なタグが挿入されているものがあります。例えば太宰治のパンドラの匣のXHTMLファイルにはソースの503行目に不要な</div>があります。スタイルシートで縦書きにする場合、このようなdiv要素に関するミスは致命的ですので、タグを削除しなければなりません。この文章の「ファイルには手を加えない」という前提には反しますが、マークアップが間違っている以上仕方がありません。こうしたミスは公開前にファイルをValidator(たとえばThe W3C MarkUp Validation Serviceなど)にかければ容易に発見できる類のものだと思うのですが、青空文庫はなぜそれをしないのでしょうか。

縦書きにすることと直接関係はありませんが、青空文庫のXHTMLファイルのマークアップにはかなり問題があるように思います。真っ先に目に付くのは<p>〜</p>を使わず、改行を全て<br />で行なっていることです。青空文庫の活動内容が素晴らしいだけに残念です。

なおここで紹介したスタイルシートは、IE5.5以降で縦書きにすることだけを考えて作ったものです。他のブラウザのことは全く考慮していません。Opera6.05では普通の横書きで表示されますが、Netscape7.0ではとんでもない表示になります。

ページ先頭へ