displaying rotated text with special font and variable spacing in css

I want to display some text (lets say ABCDHFEJBF) rota开发者_Go百科ted -90 degrees. I put it in a span and did

display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

but then I could not resize the span to custom dimensions. I need the text to maintain a certain font size (say 20px) but I need the spacing between the letters to increase or decrease depending on the browser height.

something like this: 100% of browser height, fixed to the left of the page, rotated, and the spacing between the characters needs to be variable so the spaces between letters increase as the height of the browser increases.

If anyone can help that would be appreciated.

CSS has letter-spacing which allows you to specify gaps between letters. Setting this to a percentage value will let you get the effect you want.

Edit: Apparently it doesn't take a percentage value. Good to know, so all the more reason to look at the JS bit :P

Using this in conjunction with some simple Javascript would give you more control over the spacing, if you want - see this fiddle for a working JS implementation.

$(document).ready(function()
{
    $(window).resize(function()
    {
        var spacing = Math.floor($(this).height() / 70) + 'px';
        $('span').css('letter-spacing', spacing);
        $('#spacing').html(spacing);
    });
});

<span>Hello there</span>
<div id="spacing"></div>

What you want can be done... but without some script, you need to set the css rules each time. Something like this

span{
    display: block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    font-size:20px;
    letter-spacing:1em;
    margin-top:200px;
    position:absolute;
    top:0;
    left:-180px;
}

Note

I used letter-spacing to separate the letters and position to set it against the side of the page. margin-top was needed to make it appear on the page.

Example: http://jsfiddle.net/jasongennaro/qkghV/

You could probably make this dynamic, too, but that would take a lot of calculations!! ;-)