php - 垂直旋转文本的浏览器回退

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% 的水平文本；这不会是世界末日。