CSSで縦書き開発1 - nicepaper @ ウィキ - atwiki（アットウィキ）

CSSで縦書き開発をしていきたいと思います。11月4日記事

イメージ

概要
- Javascriptで実装する。
- CSSで実装する。
コード
結果
まとめ

概要

縦書きを実現する際、レスポンシブデザインのことも考えないといけないですし、PHPやRUBYとのプログラム言語の兼ね合いも考えないといけません。また、プリントアウトする際の調整も考えなければならないかと思います。

Javascriptで実装する。

h2v.jsや竹取.jsやnehan.jsなどのライブラリを使って実現することもできます。メリットやデメリットはこちらをご参照ください。

CSSで実装する。

CSS3ではwriting-modeというものが実装されています（ただしIEの場合は少し表記が違う）。今回このCSSを色々といじっていきます。

コード

HTML部

<?php
	$text = '　メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此のシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿として迎える事になっていた。結婚式も間近かなのである。メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。メロスには竹馬の友があった。セリヌンティウスである。今は此のシラクスの市で、石工をしている。その友を、これから訪ねてみるつもりなのだ。久しく逢わなかったのだから、訪ねて行くのが楽しみである。歩いているうちにメロスは、まちの様子を怪しく思った。ひっそりしている。もう既に日も落ちて、まちの暗いのは当りまえだが、けれども、なんだか、夜のせいばかりでは無く、市全体が、やけに寂しい。のんきなメロスも、だんだん不安になって来た。路で逢った若い衆をつかまえて、何かあったのか、二年まえに此の市に来たときは、夜でも皆が歌をうたって、まちは賑やかであった筈だが、と質問した。若い衆は、首を振って答えなかった。しばらく歩いて老爺に逢い、こんどはもっと、語勢を強くして質問した。老爺は答えなかった。メロスは両手で老爺のからだをゆすぶって質問を重ねた。老爺は、あたりをはばかる低声で、わずか答えた。';
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="tate.css">
<title>縦書き開発1</title>
</head>
<body>
<div id="wrapper">
	<p class="style1"><?php echo nl2br(htmlspecialchars($text,ENT_QUOTES,"UTF-8"));?></p>
</div>
<!--overflowしている場合もチェック-->
<div id="wrapper2">
	<p class="style2"><?php echo nl2br(htmlspecialchars($text,ENT_QUOTES,"UTF-8"));?></p>
</div>
</body>
</html>

CSS部

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 0 auto;
	width: 1000px;
	height: 300px;
	border: 1px solid #000;
	padding: 10px;
}
p.style1{
	writing-mode: tb-rl; /* IEではこのように記述していく */
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	/*行間*/
	line-height: 1.2em;
	/*右から*/
	width: 1000px;/*横を指定してあげてから以下を記述*/
	margin: 0 0 0 auto;
	
}

#wrapper2{
	margin: 0 auto;
	width: 500px;
	height: 300px;
	border: 1px solid #000;
	padding: 10px;

}
p.style2{
	writing-mode: tb-rl;  /* IEではこのように記述していく */
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	/*行間*/
	line-height: 1.2em;
	/*右から*/
	width: 500px;/*横を指定してあげてから以下を記述*/
	margin: 0 0 0 auto;
	/*はみ出した場合*/
	overflow:scroll;
}