A designer has requested vertically rotated text such as:
H
e
l
l
o
W
o
r
l
d
The text cannot be an unchangeable image as it might be dynamically changed. The page cannot depend upon JavaScript, and should render reasonably for older browsers.
My first thought was to have PHP create an image from the desired text, and the HTML to access that image. A little complicated, but should be possible.
I have since been told that it is acceptable for older browsers to hide the vertical rotated text.
What is a good fallback for older browser to display vertically rotated text?
For newer browsers you can use this CSS:
.my-text {
/* prefix as needed; see caniuse.com */
transform: rotate(90deg);
}
For older browsers it may be easiest to just hide it, especially if it is not essential to understand the page. If you need that text on the page then just leaving it as normal text would be perfectly fine.
I suppose you could create images on the server, but the question is if that would be worth the time and effort. Just showing the text as normal text would be much easier... as long as the content is there, exactly how it is presented across browsers is not that important.
If you look at caniuse.com transform
is very well supported. Only IE 8, and Opera Mini, do not support them.
Opera Mini is a mobile browser where it does not make very much sense to show text vertically anyway, and only about 2% of the world use IE8, most in Asian countries if I am not mistaken. If it was me then I would be happy with about 2% seeing horizontal text; it would not be the end of the world.