垂直旋转文本的浏览器后备

Question

设计师要求垂直旋转的文字，例如：

H
e
l
l
o

W
o
r
l
d

文本不能是不可更改的图像，因为它可能会动态更改。该页面不依赖于JavaScript，并且应该合理地为旧版浏览器呈现。

我的第一个想法是让PHP从所需的文本创建图像，并使用HTML来访问该图像。有点复杂，但应该是可能的。

此后我被告知旧浏览器可以隐藏垂直旋转文本。

旧浏览器显示垂直旋转文本的好后退是什么？

Answer 1

对于较新的浏览器，您可以使用此CSS：

.my-text {
    /* prefix as needed; see caniuse.com */
    transform: rotate(90deg);
}

对于旧版浏览器，隐藏它可能最简单，尤其是在理解页面不是必需的情况下。如果您需要在页面上显示该文本，那么只需将其保留为普通文本即可。

我想你可以在服务器上创建图像，但问题是这是否值得花费时间和精力。只是将文本显示为普通文本会更容易......只要内容存在，确切地说如何在浏览器中显示它并不重要。

如果你看caniuse.com transform得到了很好的支持。只有IE 8和Opera Mini不支持它们。

Opera Mini是一款移动浏览器，无论如何垂直显示文字都没有多大意义，世界上只有大约2％的人使用IE8，如果我没有记错的话，大多数都在亚洲国家。如果是我，那么我会很高兴大约有2％看到水平文字;它不会是世界末日。