rotation posts

CSS3: Text Rotation Rendering Problems

in

As mentioned in another post on css rotation, I had some issues with rotating text. On the Amy’s Shoes site, now live [no longer our design], I use transform:rotate(); for CSS3 capable browsers and the matrix filter for IE to rotate various elements.

In IE, I had noticed that the text was somewhat blurry when rotated, especially for smaller font-sizes. I hadn’t noticed, though, that the rotated text also rendered poorly in Firefox for Windows and Safari for Windows. They render the text with messed up kerning and letter positioning, so that it can become illegible on smaller text and even have overlapping letters. Not in Opera in Chrome, just those browsers. I test Firefox and Safari on Mac only, since rendering of most things is exactly the same. Evidently not the case with rotated font rendering though, and I will have to keep this in mind and test the new CSS3 features more thoroughly.

Because of this issue, I made my first ever style sheet targeting an entire operating system (Windows), since the rotation was not working on so many Windows browsers. The stylesheet simply removes the rotation on the main body text and repositions things slightly so that the layout still works. We were considering doing image replacement for the menu and button text on Windows as well, but haven’t gone that far yet, as the larger text doesn’t look nearly as bad. The rendering is also slightly messed up on Firefox for Mac, but not too bad to use.

We’re not sure why the rendering is so bad on those Windows browsers. For IE, it is likely the way it handles the matrix filter. For Safari and Firefox, it may have something to do with the way Windows deals with fonts compared to how Mac does. Maybe Chrome and Opera somehow bypass the rendering issue. I don’t know what’s up, but this and the other issues mentioned in the previous article suggest that, unfortunately, rotation of text is still not to the point where it can be indiscriminately used, and is best used in a way where the unrotated version still works fine, because that will need to be done for some browsers.

CSS3: Rotation

in

Continuing my adoption of new CSS3 capabilities, I’ve built my first site using rotation. CSS3 allows rotation of elements with the transform: rotate(); declaration. It is as simple as giving a value between the rotate parenthesis with a number and the unit deg. Positive values go clockwise, negative values counter-clockwise. I don’t think any browsers yet support the CSS3 spec transform property, so you must use the vendor-specific hack prefixed properties -moz-transform, -webkit-transform, and -o-transform. There is in fact a CSS3 proposed rotation property, but I believe that has no current support at all.

Then, there is IE. For IE, the matrix filter must be used. It, unfortunately, does not allow for nice degree values to be used and instead uses four numbers derived by some confusing math. I could not get Microsoft’s example script working, but I found this matrix rotation calculator to calculate the values and create the declarations. It shows that a similar matrix transformation is available in the transform property, but the value is more confusing, so I just used the rotate transformation for transform capable browsers. So for IE I must go to the calculator for every degree value of rotation I want to have. Somewhat of a pain, but at least it works.

The site I built is for Amy’s Shoes. The new version has not yet gone live, but I’ll link to it once it has [We no longer run this site]. The design utilized a lot of rotation, with many different elements rotated in different orientations. It also needed to be able to handle some dynamic and AJAXed content. I ran into a number of issues while building the site that are worth mentioning.

Continue reading post "CSS3: Rotation"