Ext.ux.PanelCollapsedTitle - Cross-browser vertical text

**joeri** · 10 Jan 2010 12:07 PM

This plugin renders Ext.Panel collapsed title bar text, and rotates that text for west and east Panels. Go to the bottom of this post for the download and demo links, and for screenshot goodness.

----------------

The problem

The collapsed title thread got me thinking about how to do vertical (rotated) text in a cross-browser way.

A quick recap of all the known ways text can be rotated in the browser:

CSS transform
Supported in newer webkit and gecko browsers, not supported in Opera or IE.
CSS writing-mode
Supported in IE 5.5+, not supported anywhere else.
IE Rotate Filter
Supported in IE 5.5+, not supported anywhere else.

Sadly, none of those methods allow support for older gecko browsers, and none offer support for opera. Because of this, rotated text in the real world is still done with images, because that's the only known cross-browser method.

The solution: SVG

SVG supports rotated text. SVG is supported in Opera 8+, Firefox 2+, Safari 3+ and Chrome. Aside from IE, that's pretty much every browser out there. So, SVG provides a theoretical path to rotated text. The idea to try it had crossed my mind, but I hadn't taken it seriously. When Condor suggested the same thing, I felt obligated to at least try to make it work.

Using SVG to actually rotate text turns out to be tricky, mostly because browsers won't let you embed it as part of the DOM without using javascript. But, in the end the required code is pretty reasonable:

Code:

var SVGNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(SVGNS, 'svg');
// container is the DOM element to add the rotated text to
container.appendChild(svg);
var textBlock = document.createElementNS(SVGNS, 'text');
textBlock.setAttribute('transform', 'rotate(90)');
// SVG text nodes use 'fill' instead of 'color'
textBlock.setAttribute('style', 'fill:red;');
svg.appendChild(textBlock);
var text = document.createTextNode('rotated text');
textBlock.appendChild(text);

Combining this with SVG feature detection and fallback support for IE using CSS writing-mode, I arrived at a simple cross-browser rotated text example:

Then, it was just a matter of combining this knowledge with the code on the collapsed title thread, to get a generic Ext.Panel plugin. While a pure-css solution doesn't seem to be possible, javascript once again comes to the cross-browser rescue.

This solution works in Firefox 2+, Opera 8+, Safari 3+, IE 6+ and Chrome.

----------------

Plugin

Plugin code: Ext.ux.PanelCollapsedTitle.js

Demo page

To use on an Ext.Panel, pass the following in the config object:

Code:

plugins: [Ext.ux.PanelCollapsedTitle]

The plugin also supports a collapsed title bar icon via the collapsedIconCls property, and patches the setTitle function so you can update the Panel title at run-time.

Demo screenshot:

Licensed under http://www.gnu.org/licenses/lgpl-3.0.txt

History

1.0 (2009-01-10): First version
1.1 (2009-01-11): Fixed compatibility with complex layouts

**elnove** · 10 Jan 2010 3:51 PM

very cool man

**elnove** · 10 Jan 2010 4:01 PM

kaltxì ma joeri,

I wanted to point out that: "Aside from IE, that's pretty much every browser"...Well, whether we like it or not, IE is still 80% of the market. We developers mast take that into considuration.
Also, I checked it with IE 8 and IE8 in competability mode and it works fine.

Éywa ngáhu

**joeri** · 10 Jan 2010 11:58 PM

For IE, it uses a CSS fallback to rotate the text, using the writing-mode style. My point was that IE is pretty much the only browser actively used that doesn't support SVG. Even the older versions of popular browsers support it well enough for something like this.