CSSまたはJSを使って縦書きレイアウトにする

#１　writing-mode ～firefoxを無視する～

横並びしたい文を囲っているクラスに以下の指定をする

```css
.hogehoge {
  writing-mode: tb-rl;/* IE用 */
  writing-mode : vertical-rl;
  -webkit-writing-mode : vertical-rl;
}
```

firefoxでwriting-modeは使えません。（2015年2月12日現在）

【追加（2015年2月13日）】＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
Nightlyでlayout.css.vertical-text.enabledをtrueにすれば、
writing-modeプロパティで縦書きすることにできます。
（scivolaさんありがとうございます！）

about:config > "I'll be careful, I promise!"ボタン押す
![キャプチャ10.PNG](https://qiita-image-store.s3.amazonaws.com/0/44278/24147a4b-06d3-fa15-3fda-98bf7395d97e.png)

選択する
![キャプチャ11.PNG](https://qiita-image-store.s3.amazonaws.com/0/44278/f93a1a9f-bb1f-3418-258c-74457bfa95c7.png)

Nightlyのみで縦書き確認できましたーｗ
ですが、本実装はまだのようですね。今後に期待です！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

なかなかfirefoxを無視して実装することはないと思うので、次。

#２　「h2v.js : Webページを縦書きレイアウトに変換するJavaScript」さんにお世話になる。

以下で、ファイルを一式ダウンロードしてください。
http://tategaki.info/h2v/
ダウンロードしたh2v-min.jsとh2v.cssを読み込みます。

```html
<link rel="stylesheet" type="text/css" href="css/h2v.css">
<script type="text/javascript" src="js/h2v-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="">
<style type="text/css">
```

読み込んだら、縦書きにしたい文章を囲っているdivにidをつけます。

```html
<div class="textbox start" id="box_1">

```

パラメータを入力します。
（参考：http://tategaki.info/h2v/params/）

```html
<script type="text/javascript">
h2vconvert.init( { 'box_1' : { 'bar':false,'showcredit':false,auto:true,lineInterval:0.8,fontsize:'14px',chars : 20,splash:false },
'box_2' : { 'bar':false,'showcredit':false,auto:true,lineInterval:0.8,fontsize:'14px',chars : 20,splash:false }});
</script>
```

### サンプル


```html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>margin practice</title>
 <link rel="stylesheet" type="text/css" href="css/h2v.css">
 <script type="text/javascript" src="js/h2v-min.js" charset="utf-8"></script>
 <link rel="stylesheet" href="">
 <style type="text/css">
  .textboxwrap {
   border: 2px #000 solid;
  }
  .textbox.start {
   margin-start: 50px;
   -webkit-margin-start: 50px;
   background-color: red;
  }
  .textbox.end {
   margin-end: 50px;
   -webkit-margin-end: 50px;
   background-color: blue
  }
 </style>
<script type="text/javascript">
h2vconvert.init( { 'box_1' : { 'bar':false,'showcredit':false,auto:true,lineInterval:0.8,fontsize:'14px',chars : 20,splash:false },
'box_2' : { 'bar':false,'showcredit':false,auto:true,lineInterval:0.8,fontsize:'14px',chars : 20,splash:false }});
</script>
</head>
<body>
<div class="wrapper">
<div class="textboxwrap">
<div class="textbox start" id="box_1">
<h2>start</h2>
<p>いつは昨日ずっとこの支配地という事の時へ下っんます。</p>
<p>とにかく今を話院は同時にそうしたごろごろませですでもを出ていけあるがは所有使えないましので、どうには煮えですませだっな。世間に忘れでしものも向後今が何しろですでた。</p>
<p>毫も嘉納さんが説明学長どう混同にしで頼みこうした正何か誤解がとしてご矛盾ですななましから、この場合も何か堅め主命をいうで、大森さんのものが会の私ではなはだお道楽とあって何自分がご融和を考えようにしかるにご撲殺に用いだんが、引続きしきりに関係に起るですといるですのをできですた。ところがまたご探照灯がしのは始終大変と云わべきて、その主義にはするですばというがたから行かてやっべくな。</p>
<p>その時個人のためそのベンチは私上に認めたいかと嘉納君に与えなませ、かたがたの昔たにおいてご比較ますですんて、主義のために市街が絶対までの理由にすべておりていて、とてもの毎日にすれてその中と引続きいうですんとするたつもりでから、忌まわしいございですてさっそくご奥底いうたのでしだた。</p>
<p>それで性質か幸福か誤解をあれたて、以後ごろ時代が云っがみるですためにご損害の今度がしよですた。今からはおそらくさから申し上げでましますあって、せっかくもし待っと安心はそれだけやかましくっますので。</p>
<p>すなわちお発展を過ぎからはおくございのたと、学芸をは、しばしば私か行きて教えれるですた安んずるせるないだろとあるて、人はしていただきないだ。いったいちっとももいくら学校という切らありが、私では場合ごろだけ私のお関係も恐ろしいかれいありう。</p></div>
</div>
<div class="textboxwrap">
<div class="textbox end" id="box_2">
<h2>end</h2>
<p>いつは昨日ずっとこの支配地という事の時へ下っんます。</p>
<p>とにかく今を話院は同時にそうしたごろごろませですでもを出ていけあるがは所有使えないましので、どうには煮えですませだっな。世間に忘れでしものも向後今が何しろですでた。</p>
<p>毫も嘉納さんが説明学長どう混同にしで頼みこうした正何か誤解がとしてご矛盾ですななましから、この場合も何か堅め主命をいうで、大森さんのものが会の私ではなはだお道楽とあって何自分がご融和を考えようにしかるにご撲殺に用いだんが、引続きしきりに関係に起るですといるですのをできですた。ところがまたご探照灯がしのは始終大変と云わべきて、その主義にはするですばというがたから行かてやっべくな。</p>
<p>その時個人のためそのベンチは私上に認めたいかと嘉納君に与えなませ、かたがたの昔たにおいてご比較ますですんて、主義のために市街が絶対までの理由にすべておりていて、とてもの毎日にすれてその中と引続きいうですんとするたつもりでから、忌まわしいございですてさっそくご奥底いうたのでしだた。</p>
<p>それで性質か幸福か誤解をあれたて、以後ごろ時代が云っがみるですためにご損害の今度がしよですた。今からはおそらくさから申し上げでましますあって、せっかくもし待っと安心はそれだけやかましくっますので。</p>
<p>すなわちお発展を過ぎからはおくございのたと、学芸をは、しばしば私か行きて教えれるですた安んずるせるないだろとあるて、人はしていただきないだ。いったいちっとももいくら学校という切らありが、私では場合ごろだけ私のお関係も恐ろしいかれいありう。</p></div></div>
</div>
</body>
</html>

```

こんな感じになりました～！
IE8~,firefox,chromeで表示確認できました。
（margin-before,margin-endの指定は気にせずお願いします！）

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/44278/dedd569b-339b-0c3b-c49e-569b59bd7151.png)