You are here

Tips on rotating text with css and Javascript

I recently developed a Drupal module to turn sidebar content blocks into sliding blocks for mobile devices.  I was turning the title of the block into a tab, rotating it sideways and stashing the content in a hidden div that would push out when the tab was clicked or swiped.  I hadn't used css to rotate text before and liked how easy it was - a simple transform:rotate(90deg) - simple except for the multiple browser language calls.

Here's my class

.rotate90 {
  padding: 5px 10px 5px 0; 
  white-space: nowrap;
  transform: rotate(90deg);
  /* Safari */
  -webkit-transform: rotate(90deg);
  /* Firefox */
  -moz-transform: rotate(90deg);
  /* IE */
  -ms-transform: rotate(90deg);
  /* Opera */
  -o-transform: rotate(90deg);

There was a problem I hadn't anticipated, though it made sense.  When you rotated the text in div.rotate90, it shows perfectly, except that the original width and height remain the same: the div is still the width of the original title text and the height doesn't expand to fit the now turned text.  I had to do some scratching before coming up with the solution.

The first part of the solution is to wrap the rotated div in a parent div.  Next is to set the height of the parent div to the computed text length of the rotated div and then force the width of the parent to the tab width.