草枕を作ろう =縦書きHTML簡単作成ガイド= *

 今年1月、縦書き表示の「草枕」を発表以来、多くの皆様から、どうしたら、縦書き表示ができるのか? というお問い合わせをいただきました。 このサイトは、HTMLファイルの編集が出来る方を対象に、WebKit nightlybuildChromeSafariで簡単に縦書き表示させる方法を説明しています。

1.以下の「添付ファイル」のzipを解凍したCSSファイルを、皆様が用意されたHTMLと同じフォルダに置きます。
↓ これです。
@charset "utf-8";
html {
    font-family: "HiraMinProN-W3", "@MS 明朝", serif, sans-serif;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -epub-writing-mode: vertical-rl;
    line-height: 1.75;
    text-align: justify;
}
strong.sesame_dot {
font-weight: normal;
text-emphasis-style: sesame;
       -webkit-text-emphasis-style: sesame;
       -epubt-text-emphasis-style: sesame;
}
span.tcy {
    text-combine: horizontal;
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
}

2.HTMLファイル内に以下の形式でスタイルシートを指定します。
<link href="basic_vertical.css" rel="stylesheet" type="text/css" />
※HTMLファイルは、青空文庫(http://www.aozora.gr.jp/)のXHTMLファイルでもOK。<link XXXXX />を上記に入れ替えてください。

3.WebKitまたはChrome10を起動し、作られたHTMLファイルを読み込ませます。
 コ・レ・ダ・ケ です。

4.EPUBファイルにする場合は、上記のXHTMLをCSSをepubpackに入れてください。

※basic_vertical.css内の -webkit- は、将来的に不要になります。
※上級者向けに、「EPUB3コンテスト」も開催しています。 チャレンジしてみてください。
ċ
basic_vertical.css
(1k)
下川和男,
2011/05/23 20:39
Comments