Label with fixed width and height docked to left and text drawn Vertically

[Kumaravel Sadras]

How do I add a Label that has fixed width and height and can be docked to the left with text appearing vertically centered in the editor?

-Kumar.

[Jack Lee]

// The default code is a com class (inherited from linb.Com)
Class('App.mainform', 'linb.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new linb.UI.SLabel)
                .setHost(host,"ctl_slabel3")
                .setDock("middle")
                .setLeft(0)
                .setTop(220)
                .setCaption("Left - Vertical Middle")
            );
            
            return children;
            // ]]code created by jsLinb UI Builder
        }
    }
});

[Kumaravel Sadras]

Thanks much. 

I guess my question was not property put. Try one more time.

I am looking to dock a panel or a Label to the right or left with the text drawing Vertically.

Some thing like this http://www.cult-f.net/vertical-text-in-html/

How do I do this in the Editor to a Panel, Block or a sime Label. 

Thanks,

-Kumar.

[Jack Lee]

I guess you can use SVG or canvas code ,and set the code to Controls

Class('App', 'linb.Com',{
    Instance:{

        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(

                (new linb.UI.Div)
                .setHost(host,"ctl_div12")
                .setLeft(170)
                .setTop(50)
                .setWidth(100)
                .setHeight(100)
                .onRender("_ctl_div12_onrender")

            );
            
            return children;
            // ]]code created by jsLinb UI Builder

        },
        _ctl_div12_onrender : function (profile){
            
var code=""+
"<style>"+
".canv { display: none }"+
".obj  { display: block }"+
".canv, .obj,  svg{  height:80px; }"+
".old_canv { font-family: 'Tahoma', Arial, sans-serif; font-size: 12px; width: 40px; margin-top: 40px}"+
"</style>"+
"<!--[if IE]>"+
"<style>"+
".canv { filter: flipv() fliph(); writing-mode: tb-rl; font-size:12px; font-family: Tahoma; background-color: white; display: block; color: #888 }"+
".obj  { display: none }"+
"</style>"+
"<![endif]-->"+


"    <div class='canv'>some text</div>"+
"<!--[if !IE]><!-->"+
"<svg><text x='-60' y='10' font-family='Tahoma' font-size='12' transform='rotate(-90)' text-rendering='optimizeSpeed' fill='#888'>some text</text></svg>"+
"<!--<![endif]-->";


            var ns = this, uictrl = profile.boxing();
            uictrl.setHtml(code);
        }
    }
});