縦書き用スタイルシート : 縦書きWebページプロジェクト

- スタイルシートで縦書きページを作ろう

縦書き用スタイルシート

縦書きWebレイアウト用のスタイルシート "tate-style.css"です。コピーしてお使いください。

※ 2011.07.03 細か〜い修正をしました。詳しくは → こちらで。

@charset 'UTF-8';
/* 縦書きレイアウト用スタイルシート tate-style.css   
    last updated : Jul 03 , 2011 tyz@freefielder.jp
    http://freefielder.jp 
*/

div.tate-area{
	float:right;
	font-size:12pt;
}
div.tate-area a{
	color:#119;
	text-decoration:none;
}

div.tate-line{
	float:right;
	width:1.05em;
	line-height:1.05em;
	margin-right:0.3em;
	margin-left:0.3em;
	padding-bottom:0.2em;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Hiragino Kaku Gothic Pro W3' , 'ＭＳ ゴシック','MS Gothic' ,monospace;
	word-wrap:break-word;
	direction:ltr;
}
.tate-line font,strong,h1,h2,h3,h4,h5{
	line-height:1.05em;
}

.tate-line span.tate-kuto{
	display:block;
	width:0.4em;
	line-height:0.1em !Important;
	margin-bottom:0.9em;
	margin-left:0.6em !Important;
}
.tate-line span.tate-cho{
	display:block;
	-moz-transform:matrix(0, 1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, 1, 0, 0, 0);
	-o-transform:matrix(0, 1, 1, 0, 0, 0);
	transform:matrix(0, 1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1, mirror=1);
}
.tate-line span.tate-komoji{
	display:block;
	line-height:0.75em !Important;
	margin-bottom:0.3em;
	margin-left:0.11em !Important;
}
.tate-line span.tate-kakko{
	display:block;
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
div.tate-separator{
	clear:both;
	height:2em;
}

/* フォントサイズ変更時のフォント位置アジャスト用 */
.tate-line .font08{ font-size:8pt; }
.tate-line .font10{ font-size:10pt; }
.tate-line .font12{ font-size:12pt; }
.tate-line .font14{ font-size:14pt; }
.tate-line .font18{ font-size:18pt; }
.tate-line .font24{ font-size:24pt; }
.tate-line h1{ font-size:24pt; font-weight:bold; }
.tate-line h2{ font-size:18pt; font-weight:bold; }
.tate-line h3{ font-size:14pt; font-weight:bold; }
.tate-line h4{ font-size:12pt; font-weight:bold; }

.tate-line .font08 , .tate-line .font10 , .tate-line .font12 , .tate-line .font14 , .tate-line .font18 , .tate-line .font24 , .tate-line h1 , .tate-line h2 , .tate-line h3 , .tate-line h4 , .tate-line font  {
	display:block;
	position:relative;
	left:50%;
	width:1em;
	line-height:1.05em;
	margin-left:-0.5em;
}

tate-style.cssの説明

div.tate-area
縦書きエリアを<div class="tate-area">〜</div>で囲みます。
font-size … 縦書きエリア内の基準フォントサイズ。
div.tate-line
一行を<div class="tate-line">〜</div>で囲みます。
line-height … 文字の上下間隔。
margin-right, margin-left … 改行ピッチ。
span.tate-komoji
拗音 / 促音（っゃ etc..）を<span class="tate-komoji">〜</span>で囲んで、それらの表示位置を調整します。
span.tate-kuto
句読点を<span class="kuto">〜</span>で囲んで、それらの表示位置を調整します。
span.tate-cho
長音記号や波線、三点リーダなどを<span class="tate-cho">〜</span>で囲んで、時計回りに90度回転＆左右反転させて、あたかも縦書き用字形のように表示します。
span.tate-kakko
括弧を<span class="tate-kakko">〜</span>で囲んで、時計回りに90度回転させて、あたかも縦書き用字形のように表示します。
div.tate-separator
新聞のような、縦書き多段組のレイアウトを実現するときに、段と段との区切りとして使用します。
.font08 〜 .font24
フォントサイズを変更する際、これらのクラスセレクタを使うと、文字のセンターと行のセンターがずれなくなります。
<span class="font18">文字列</span> とすると、文字列が18ポイントのフォントサイズで表示されます。
同様に、フォントサイズ変更に<font>タグを使用した場合、また見出しタグ(<h1> ... <h4>)を使用した場合にも、行のセンターと文字のセンターが常に合うようにスタイルシートを変更しました。

実際の表示サンプルは → こちらのページでどうぞ。

使いかた

サンプルページや縦書きページのつくりかたを参照してください。

手作業でタグを埋め込んだりするのは面倒なので、横書きテキストから縦書きWebレイアウトに自動変換するスクリプトを作ってみました。

横書きと縦書きで字形が異なる文字の場合、タグを適用して縦書き用に回転させて表示させます。
句読点などにタグを適用して、適切な位置に表示させます。
半角文字を全角文字に強制的に変換します。

そのた

できるだけクロスプラットフォーム / クロスブラウザで綺麗に縦書き表示ができるようにがんばっています。

CSS3で定義されるtransformプロパティが実装されているブラウザ^※からの閲覧であれば、正常に表示されます。

※ : FireFox 3.5〜、Safari 3〜、Google Chrome、Opera 10.5〜。
Internet Explorerについては、filterプロパティで代用することでIE6以降に対応しています。

おそらく閲覧者の90％以上はフォローできる筈です。→ 参考ブログ記事
transform未対応ブラウザで閲覧すると、"ー"などが横に寝たままの字形で表示されてしまいます。これを回避するためのJavaScriptを書いてみました。→ こちら。

アップデートポリシー

このスタイルシート tate-style.css は、より良い表示を実現するために、しばしばアップデートを行います。
その際、後方互換性を維持するために、基本的に以下のポリシーに基づいて手を加えます。

以前のバージョンで設定していたセレクタやプロパティの削除 / 変更は行いません。
新しく設定するセレクタは、以前のバージョンと衝突しないような名前を付けます。

つまり、古いバージョンで定義したスタイルは、新しいバージョンでも常に有効です。あなたのWebページのhtmlソースを書き換える必要は全くありません。スタイルシートを置き換えるだけで、以前作成したページのスタイルはそのまま有効、これから作成するページでは、新しいバージョンのスタイルシートで新たに定義されたスタイルを使用できます。