如何在不使用变换旋转的情况下从下至上书写垂直文本? [英] How to write vertical text from bottom to top without using transform rotate?

问题描述

使用writing-mode只能从上到下读取文本.根据 https://developer.mozilla.org/en/docs/Web/CSS/文字模式

With writing-mode you can only get the text to be read from top to bottom. According to https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

我唯一的选择是使用sideways.但是此属性是实验性的.

the only option I have is using sideways. But this attribute is experimental.

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

}

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

我想在标签上写上垂直的标签，但标签应该从底部开始.

I wanted to write the label on the bars to be vertical but it should start from the bottom.

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

尝试旋转时，在给条形图添加动画时，我的行为很怪异，因此我正在寻找另一种方法来创建垂直文本，并且可以将头向左倾斜来阅读.

Trying with rotate gives me a weird behaviour when animating the bar chart therefore I'm looking for another method to create vertical texts that can be read with your head tilted to the left.

推荐答案

我将writing-mode和rotation组合在一起:

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

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

这对我有用，在表格单元格中没有错误的width和height设置.

This works for me without bad width and height settings inside table cells.

重要的2020

第1步)查看 https://developer.mozilla .org/zh-CN/docs/Web/CSS/writing-mode ，ctrl/cmd-F表示结果".该表将反映您的浏览器(可能执行不正确).看一下它下面的表格.该表应该是 的样子.

step 1) Look at https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , ctrl/cmd-F for "Result". This table will reflect your browser (which may have improper implementation). Look at the table immediately below it. That table is what things should look like.

解决方案:

为确保您的解决方案能满足未来需求:

To make sure your solution is future proof:

1. 查看适当的列，除非您要进行编码(例如，用亚洲语言.
2. 在调整HTML元素的大小方面找到符合您需要的行，并在其下面的第二张表中正确实现了AND(看起来大致相同).例如，writing-mode:vertical-rl;当前将在Chrome上运行，直到在Blink引擎中正确实现了其他功能为止(但如果您的答案基于sideways-lr，则在Blink正确实现此行为后它将中断，因为两行不相同. ).
3. 可选:根据百分比和/或其他设置，将transform-origin设置为某些值，也许使用calc(...)
4. 执行transform:rotate(180deg)之类的.这应该可以解决大多数人会遇到的布局问题，从而使他们查找此答案.如果有人遇到动画问题，那就是另外一个问题.

1. Look at the appropriate column, which will be "Horizontal Script" unless you're coding e.g. in an Asian language.
2. Find a row that suits your needs in terms of sizing the HTML element, AND is properly implemented (appears roughly the same) in the second table below it. For example writing-mode:vertical-rl; would currently work on Chrome until others are properly implemented in the Blink engine (but if you based your answer off of sideways-lr it would break once Blink properly implements this behavior, since the two rows are not the same.).
3. optional: set transform-origin to something, maybe use calc(...), based on percentages and/or something else
4. perform transform:rotate(180deg) or something. This should fix issues with layout that most people would have, causing them to look up this answer. If one has animation problems, that's a separate issue.

(现在不建议使用tb-rl)

(also tb-rl is deprecated now)

这篇关于如何在不使用变换旋转的情况下从下至上书写垂直文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！