web-dev-qa-db-ja.com

変換回転を使用せずに下から上に垂直テキストを書き込む方法は？

writing-modeテキストは、上から下にのみ読むことができます。 https://developer.mozilla.org/en/docs/Web/CSS/writing-mode による

私が持っている唯一のオプションは、sidewaysを使用することです。しかし、この属性は実験的なものです。

.verticalTxt_lr {
  writing-mode: vertical-lr;
}
.verticalTxt_rl {
  writing-mode: vertical-rl;
}
.rotate {
  transform: rotateZ(270deg);

}

https://jsfiddle.net/thadeuszlay/5ueopnqu/2/

バーのラベルは垂直になるように書きたかったのですが、下から始める必要があります。

http://jsfiddle.net/thadeuszlay/3HL4a/2402/

回転を試してみると、棒グラフをアニメーション化するときに奇妙な動作が発生するため、頭を左に傾けて読むことができる垂直テキストを作成する別の方法を探しています。

htmlcssd3.js
23
thadeuszlay

writing-modeおよびrotation：

    .rotated {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
    }
<div class="rotated">Text from bottom with working width/height</div>

これは、テーブルセル内のwidthおよびheightの設定が正しくなくても機能します。

33
Dave
.rotate {
     transform: rotate(270deg);
}

これは、テキストを下から上に垂直に回転させるのに十分なはずで、テキストを含むdivに適用します。 writing-mode：vertical-rl/lrをこれと組み合わせて使用​​している場合は、他の方法に切り替える可能性があります。

1
Yogesh