如何在不使用变换旋转的情况下从下到上书写垂直文本？

Question

使用writing-mode，您只能从上到下阅读文字。根据{{​​3}}

我唯一的选择是使用sideways。但这个属性是实验性的。

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

}

https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

我想在条形上写上标签是垂直的，但它应该从底部开始。

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

在动画条形图时尝试使用旋转会给我一个奇怪的行为，因此我正在寻找另一种创建垂直文本的方法，可以在头部向左倾斜的情况下阅读。

Answer 1

我合并了writing-mode和rotation：

＆＃13;

＆＃13;

    .rotated {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
    }

＆＃13;

<div class="rotated">Text from bottom with working width/height</div>

＆＃13;

＆＃13;

＆＃13;

这适用于我，表格单元格内没有错误width和height设置。

Answer 2

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

这应该足以使文本从下到上垂直旋转，将其应用于包含文本的div上。如果您结合使用write-mode：vertical-rl / lr，则可能会将其切换为其他方式。