テキストの縦書き

下記のように動的に追加するテキストを縦書にしたいのですが、
何か良い方法はないでしょうか？

targetText = $('<div class="text">')
.data({
fontFamily: fontFamily,
fontSize: fontSize,
color: color,
verticalAlign: vAlign,
horizontalAlign: hAlign,
tateFlag: tate,
}).appendTo('#screen').css({
name: "text",
border: '1px dotted #000',
fontFamily: fontFamily,
fontSize: '60px',
color: color,
zIndex: '1',
left: left ,
top: top,
width: width : "auto",
height: height : "auto",
position: 'absolute',
lineHeight: '200px',
});

行動規範の内容に同意します

回答3件

ベストアンサー

最新のブラウザであれば、cssで対応可能です。下記のcssを試してみてください。

css
1.writing-mode-vertical-rl {
2  -webkit-writing-mode: vertical-rl;
3  -moz-writing-mode: vertical-rl;
4  -o-writing-mode: vertical-rl;
5  writing-mode: vertical-rl;
6  -ms-writing-mode: vertical-rl;
7  -ms-writing-mode: tb-rl;
8}

適用されたスタイルが上記です。
左から、Win7（IE10）、OSX10.11（Firefox41.0、Chrome 45.0.2454、Opera32.0、Safari9.0 (11601.1.56)）になります。

参考

投稿2015/10/26 23:57

編集2015/10/27 00:02

horse_n_deer

総合スコア452

think49

2015/10/27 05:55

そういえば、pixiv が writing-mode を使ってましたね。仕様も勧告候補(Candidate Recommendation)になっていますし、クロスブラウザ的にも現実的なところまで来ている気がします。あえて問題点をあげるなら IE7 非対応なことでしょうか。 http://caniuse.com/#feat=css-writing-mode

Qoo

2015/10/27 10:29

回答ありがとうございます！無事実現することができました！

行動規範の内容に同意します

日本語の縦書きを実装したいのであれば，
竹取 JS
を利用してみてはいかがでしょうか？

竹取 JSを使えば，濁点、半濁点や句読点の位置などを考慮してくれます．

投稿2015/10/26 18:31

退会済みユーザー

総合スコア0

Qoo

2015/10/26 22:23

回答ありがとうございます。竹取JSも試してみたのですが、MS明朝のみ＆動作が遅くなるという『仕様』でしたので利用は難しいそうです。

行動規範の内容に同意します

縦書きを満足に表示させられる方法はCSSだけでは難しいと思います。
それなりに試されてると思いますが、濁点、半濁点や句読点の位置など、考慮する事が多いのでどちらかというとプログラムの範疇になるのではないかと。
単純に縦書きを割と普通に使う国が日本くらいだから国際規格としては対応しようが無いと言う事があるかと思います。
（縦書きそのものは漢字圏やハングルも使うようですが日本語ほどは普通には使用しないようです）

答えになって無くて申し訳ないのですが、何の為に縦書きしたいのかによりますが、Javascriptのライブラリなどで対応させればある程度対応できるような話を聞いた事がありますので、調べてみてはいかがでしょうか。

投稿2015/10/26 15:49