Rotating Text using CSS3 Transformations
I recently created a design in which I wanted to use CSS3 Transformations to rotate some divs containing text. The design contained three boxes in a row, and I planned to make it more interesting by rotating the outer two by just 10 degrees, one clockwise and the other counter-clockwise, leaving the middle box untouched. I added the CSS code, and was very pleased with the resultant effect.
Of course, once I had finished the complete page, I then loaded it up in the other main browsers to check everything was ok in all of them. The results were disastrous.
Most articles on this subject demonstrate it with rotations of either 45 or 90 degrees, which generally seem to work well in the up to date browser versions. But, with my 10 degree rotation, the text in the other four browsers varied from merely strange, to looking like one of those science demonstrations where a biologist culturing a mould in a Petri dish shows the effects of three weeks of growth of the bacteria! The text in two of the browsers was spotty and diseased looking. Clearly the font could not cope with being rotated in those browsers. I would have to do something very quickly indeed. Time to try a different font.
The Overall Picture
The really interesting bit in all this, however, was that the browser that coped properly was the much-maligned Internet Explorer (v11).
What was even more interesting was that, as I tried several different fonts in the search for one that would be consistent across all of them, some browsers continued to look like something you wouldn't want to touch without a plastic suit, integral breathing apparatus and a top level bio-contamination security lab. Internet Explorer, on the other hand, consistently rotated all fonts without so much as a full stop out of place. "Why should I care what font you use?", it seemed to say. Why this should be I don't know. Maybe it is able to take advantage of Microsoft's close tie-in between browser and operating system, perhaps being able to link into the operating system directly in a way which non-Microsoft programs might not be able to manage? It might be interesting to try the same test in Internet Explorer on a Mac, but I don't have one.
Of the other browsers, Chrome and Opera came off best, though Chrome often had a somewhat "misty" look about it, as though the letters were poking out of mist on a mountain (looks are a somewhat subjective matter - don't expect entirely technical terms in this article!) Opera looked better, until I compared the rotated text with non-rotated text, and realised that it was slightly thicker than normal. Nothing too serious, but it stood out noticeably compared with the non-rotated text on the same page.
The other two, Firefox and Safari, had serious problems with most of the fonts I tried, including Verdana, Arial, Helvetica, and Times New Roman. To the extent that I would not want to show my site like that - if I had not found a font that worked for them I would probably have dropped the whole rotation idea. Firefox and Safari currently each have maybe ten per cent of the browser market - depending on whose statistics you look at (though you might be forgiven for thinking that most sources of browser stats are not actually talking about the same planet!) Unfortunately Opera, the best (for rotating text) of the bunch of four, has the least market share of all. Oh well.
The Detailed Observations
I am not an expert on fonts. However any web developer should know what looks good and what doesn't, so I hope the observations I made will be of use.
The results I needed from the two rotated boxes were:
- the text must be readable
- the text must look good
- text in the rotated boxes must not look too different from the non-rotated text
All browsers passed the first test, though some fonts were more difficult to read in Firefox and Safari, mainly due to characters touching each other. Most browsers had a tendency to put less space between letters when rotated, though IE avoided that.
But there were many problems in looks, Firefox and Safari exhibiting more faults than the others:
- letters touching
- uneven baselines (some letters sitting higher than others on the line)
- horizontal lines (as in the 'L' or 'E') existed on two levels, breaking in the middle
- similar breaks occurred in curved strokes (e.g. at the top of the 'e')
- strokes of the letter had uneven thickness, or looked thin and spindly
- letters had tiny bits missing, and/or extra specks beside them, causing the blotchy appearance
- text was uneven in density, darker in some places than others in a single character
- some text just looked "misty", probably due in part to the last effect above
Usable Fonts Found
The only fonts I found to work across all browsers were Courier (but a monospaced font is not suitable for general use on a web site) and the Cursive font - one of the generic fonts specified for all browsers. A close second choice was the generic sans-serif, but Safari still showed a little difficulty rotating that.
No doubt if anyone wants to look further they may find one or two others, but the Cursive font was the one I settled on. It looks like joined handwriting on most browsers (though, strangely, not on IE) so you would not want it on an arbitrary page in the middle of a site. But I was working on an introductory page so I could get away with it without it looking out of place, and it allowed me to keep the rotations which I would otherwise have had to drop.
I also tried different degrees of rotation. A 5 degree rotation was slightly more difficult for the browsers than my 10 degree one (even IE showed signs of thinking about causing trouble!) A 15 degree rotation seemed to improve things slightly, but was a bit too much for the design effect I wanted.
If any of you know of a better font in this situation, please let us know. Otherwise, Cursive and generic sans-serif appear to be the fonts of choice if ever you need to rotate text by small amounts!