2

I have vertically rotated span element with some text in it:

span{
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  height: 100%;
}

.container{
  width: 40px;
  height: 500px;  /* <- this can change */
}

How can I make it so the spacing between the letters of the text from the span changes depending on the container's height? Basically I want the text to span over the entire height of the element...

Alex
  • 66,732
  • 177
  • 439
  • 641
  • 1
    Do you want this with CSS _only_? I think you'd have to use JavaScript... – Czechnology Apr 03 '11 at 15:19
  • I'm using jQuery anyway, so javascript is ok, but I don't know how :( – Alex Apr 03 '11 at 17:48
  • You may also check out this answer to adjust letter spacing to the container's width : http://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of-div/23168507#23168507 – web-tiki Nov 14 '14 at 18:23

2 Answers2

4

...somewhere, in a javascript file far far away...

$(".container").each(function(idx, el) {
    $(el).css("letter-spacing", calculateSpacing(el, $(el).height()));        
});

You can use the plugin found here, which contains the calculateSpacing function, albeit it works on width, not height (so some modification may be necessary):

http://heychinaski.com/jquery/js/jquery.charjustify.js

Jeff Meatball Yang
  • 37,839
  • 27
  • 91
  • 125
3

I think you can't do it without javascrit, because sizes in % use width but not height. Write a script that divide the height of the element by the number of chars inside and set it as letter-spacing.

Adrien Rey-Jarthon
  • 1,015
  • 2
  • 9
  • 22