-moz-transform on table headers

While working on a new feature for DrupalvB, a Drupal module that integrates the vBulletin forum software with the Drupal CMS, I had to create a rather large matrix table allowing to map Drupal roles to vBulletin user groups. Because the group titles in the table header took up most of the space, I decided to test drive an upcoming CSS3 feature in Firefox 3.5: -moz-transform: rotate(). Here's what the result looked like:

Note: the bad font rendering quality isn't the fault of Firefox, rather it comes from using an old version of Microsoft's Terminal Server which doesn't support anti-aliasing.

Unfortunately, rotating elements just cuts the element out of its current position and draws it with the transformation applied, but doesn't touch the reserved space of the untransformed element. This lets the rotated text paint over adjacent DOM elements. However, since the length of the text is dynamic and thus not known in advance, trying to avoid this would need dynamic calculation of the required padding.

1 comment:

lucent said...

I'm pretty disappointed it leaves space for the original box, too. Let me know if you find a workaround that deals with this inside tables.