1. #1
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    577
    Vote Rating
    136
    joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light

      0  

    Default Ext.ux.PanelCollapsedTitle - Cross-browser vertical text

    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

  2. #2
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Thumbs up

    very cool man

  3. #3
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Default

    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

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    577
    Vote Rating
    136
    joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light joeri is a glorious beacon of light

      0  

    Default

    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.

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    374
    Vote Rating
    45
    Scorpie will become famous soon enough Scorpie will become famous soon enough

      0  

    Default

    Nice, good work!
    I`m from Holland!

  6. #6
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    292
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default

    Excellent work!

  7. #7
    Ext User
    Join Date
    Aug 2009
    Location
    Paris, France
    Posts
    3
    Vote Rating
    0
    Alshten is on a distinguished road

      0  

    Default

    Excellent plugin ! So easy to use !

  8. #8
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,090
    Vote Rating
    56
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default

    super cool... and useful!
    Lead Trainer / Sencha Specialist
    Teahouse Training Company

    Comprehensive Javascript, Sencha and 3rd Party Stack Training available worldwide online, and onsite in APAC, written by certified official Sencha trainers.



    Unofficial Sites:

    SenchaWorld.com - Videos, and stuff
    Sencha.Community - Tools, Extensions and Resources
    TeahouseHQ.com - Sencha Ecosystem Training Portal

    Code Validation : JSLint | JSONLint | JSONPLint

  9. #9
    Ext User
    Join Date
    Feb 2010
    Posts
    11
    Vote Rating
    0
    chrismarx is on a distinguished road

      0  

    Default

    more praise, works great!

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Location
    London, UK
    Posts
    143
    Vote Rating
    0
    albeva is infamous around these parts albeva is infamous around these parts

      0  

    Default

    Great plugin. only minor complaint - could you indent code properly? with each level nested? that would make it perfect