このサイトを検索

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

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

１．以下の「添付ファイル」のzipを解凍したCSSファイルを、皆様が用意されたHTMLと同じフォルダに置きます。
↓　これです。
@charset "utf-8";
html {
    font-family: "HiraMinProN-W3", "@ＭＳ 明朝", 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;
}

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

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

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

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