I recently built a filter panel similar to the one left of Amazon.com search results.

My panel is different in that it can be collapsed out of the way to free up room for the results (see below)

expand collapse panel

I felt that the first letter of the title should basically remain in the same place as a user clicks to expand / collapse the panel so I went with option A but another developer thinks option B looks better.

I can't find anything official so I thought I'd ask here.

After collapsing a panel should the title read down, up or not matter either way?

  • 1
    yes that is what i was looking for - thanks this can be closed as a duplicate of that
    – DaveAlger
    Feb 17, 2015 at 21:53

2 Answers 2


In general vertical text is best avoided, but in cases where it's the most viable option, the text should read from bottom to top. This is most commonly seen in feedback buttons:

enter image description here

The reason for this is often debated, but in my opinion it has clearly been shown that counter-clockwise (CCW) rotated text is easier to read that clockwise rotated text (CW). My simply explantation is that it's to maintain the left-right, and top-down consistency in reading. With the text flowing as in the example above, the top of the text is on the far left, which feels more natural than the alternative (at least for left-to-right languages).

  • +1 for the point about reading from left to right should there be additional lines of text.
    – DaveAlger
    Feb 17, 2015 at 20:25
  • is there a way to avoid vertical text in this scenario?
    – DaveAlger
    Feb 17, 2015 at 20:50
  • @DaveAlger assuming your goal is to create horizontal space, not that I can think of.
    – JohnGB
    Feb 17, 2015 at 20:56

Top to bottom ensures that the first word is visible

Below is one example from Microsoft Visual Studio.

Panels can be docked and also collapsed to either side of the window. The vertical text always reads from top to bottom when the panel is collapsed to either the left or right side.

A user may have many of these dockable frames and by making the text of collapsed panels read from top to bottom it ensures that the first word of long titles is visible up top even if the rest of the title is truncated. The beginning of the title could also be shown going from bottom to top but in the case of truncation this would put the ellipse ... up top making it more prominent.

visual studio

Not the answer you're looking for? Browse other questions tagged or ask your own question.