When rotating text with css, should it be rotated clockwise or counter-clockwise? Is one more readable than the other?
Counter Clockwise: — Clockwise:
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
I believe neither is “easier” to read in general, and I would instead try to make it a country-dependent setting that mimics the common book spine orientation, either in the visitor’s country or in the web site’s country.
In Wikipedia’s book entry, the spine tilting section says the following:
In the United States, the Commonwealth and in Scandinavia, titles are usually written top-to-bottom on the spine. This means that when the book is placed on a table with the front cover upwards, the title is correctly oriented left-to-right on the spine. This practice is reflected in the industry standards ANSI/NISO Z39.41 and ISO 6357.
In most of continental Europe, titles are conventionally printed bottom-to-top on the spine so, when the books are placed vertically on shelves, the title can be read by tilting the head to the left.
My personal preference is counterclockwise rotation, which is consistent with the above since I live in France. A quick look at the ~500 books in my library confirms this: books in French, Spanish or German use CCW whereas books in English (British and American) use CW.
Edit: it appears that book spine orientation does not necessarily reflect the ease with which it can be read when the book is standing on a shelf. My further understanding is that European books would use CCW because the spine can be read easily when standing, and American books would use CW because the spine can be read when standing (not necessarily with ease) and they can be read easily when lying flat. I don’t have much to back up this theory, though.
Make them like tabs and follow that mental model (clockwise on right, counter-clockwise on left, upright on bottom).
If your design uses tab-like elements, follow the logic of tabs. If it uses book-like elements, follow that model and pick a direction—if you're in the US, follow the orientation of book spines here (clockwise). And if you are using elements in different places that use both mental models, follow each as appropriate to its context.
There are many conflicting mental models, like Western book spines, Eastern European book spines, and folder tabs. There is no way to match all prominent mental models, so you'll have to pick one. The real question is, which model makes the most sense for your user?
Folder tabs are one of the most common forms I see used in web design, so let's say we match that model. Here's what it looks like:
Then there is the book spine model, which SlideDeck uses in their demo product. It looks like this:
The orientation of the book spine is largely arbitrary, but you might as well match the expectation of users in your area. If it's the US, go clockwise, if it's Hungary, go counter-clockwise, and if it's Italy, it doesn't matter.
There is a study on rotated text readability from University of Toronto. Although it is on tabletop displays, I think it can be applied here too. The result shows that it takes significantly less time to read clockwise (-90 degree rotated) for words in any positions of the screen. It is not clear for 6-digit number though.
Interesting discussion about this topic in the IXDA-forum ...
The discussion in the forum came to the conclusion that the text should be align in the reading direction left-to-right. That means: on left side use bottom-to-top and on the right side use top-to-bottom direction. This corresponds to Patrick's first diagram.
It comes down to what the text is anchored to. If you've got text on a curve, you align the baselines to follow the curve.
If you've got a box on the left side of the screen (say "previous") the text should be rotated clockwise 90° to have the text read downwards.
If, conversely, you've got a box on the right side of the screen (say "next") the text should be rotated counter-clockwise 90° to have the text read upwards.
If you've got a box hanging off another element, align the baseline to the contours of the element.
I agree with "clockwise on right, counter-clockwise on left" approach.
My hunch is that this mental mode comes to us from building signage, where text which appears on flags or banners looks more "natural" if its baseline aligns with the building wall (longer, visually dominant surface).
Likewise, vertical screen edges are visually dominant surfaces in UI and text baselines should be oriented towards them.
The point is not about how it is written on a single line.
Humans are conditioned to reading lists top to bottom or left to right.
When you change the orientation, it reduces confusion if top to bottom also coincides with Left to right.
For instance, if there are are three books that are Part 1, 2, 3. Our natural way of stacking them would be to keep 1 on the left, and 3 on the right.
Now, when you read the titles, you obviously want to read the title for 1 first - then 2, then 3. If written in American style, this won't work and feels wrong. If written in European style, this feels right.
Americans focus on the single book, whereas European method looks and feels right when there are multiple books.
And obviously, when you place books vertically, there is never one book. It is obviously multiple books.
If you are going to place a single book flat, why wouldn't you just read from the top cover instead of the spine!!
I guess the Europeans have a bit more experience with books, considering that Gutenberg started making books there! Probably in a few centuries, Americans will see sense! But don't hold your breath!