Vertical Text with jQuery

Question

I'm looking to vertically align text by adding <br /> tags between characters with jQuery.

<div id="foo"><label>Vertical Text</label></div> 

would look like this:

V
e
r
t
i
c
a
l

T
e
x
t

Answer 1

It looks like you should able able to hack the following jQuery library to handle the task:

Flipv jQuery Script Example

Answer 2

Not tested, but it should work.

var element = $( '#foo label' );
var newData = '';
var data = element.text();
var length = data.length;
var i = 0;

while( i < length )
{

    newData += data.charAt( i ) + '<br />';
    i++;

}

element.html( newData );

Answer 3

This builds on Sebastian H's answer, but I tested it and this works

 var element = $( '#foo label' );
 var newData = '';
 var data = element.text();
 var length = data.length;
 var i = 0;
 $( '#foo label' ).html("");
 while( i < length )
 {
   $( '#foo label' ).append(data.charAt( i ) + "<br />")
   i++;
 }

Answer 4

Let's go golfing!

$('#foo label').html($('#foo label').text().replace(/(.)/g,"$1<br />"));

Completely untested, but the pattern in the regex looks like a boob.

Answer 5

Why use a while loop when you can use jQuery's builtin each method?

$.each( $('#foo').text(), function(){ $('#foo').append(this + '
'); } );

There. It works. You can test it.

Answer 6

hi..I tried this.. but it works only when I have a single text: ie.. as Text 1: then it aligns the alphabets vertically.. however i have a div where in i have multiple lables.. contained within a div..

now.. when I use this :

$('#verticaltext label').html($('label').text().replace(/(.)/g,"$1
"));

on two labels: such as: label1, label2.. then theere is a repetion of all the labels:

as in:

l a b e l 1

l a b e l 2

then i get this repeated twice: l a b e l 1

l a b e l 2

---

Can you shed some light on what I am doing wrong?

thanks ajay

Answer 7

I've published a jQuery plugin to flip any text vertical; it's cross browser and works with almost all font-family.

You can find it at: http://pupunzi.open-lab.com/mb-jquery-components/mb-fliptext/

Answer 8

Mr Kurt's answer works well for a single id, but if you want something more useful that can be applied to several elements try something like this:

$.each( $(".verticalText"), function () { $(this).html($(this).text().replace(/(.)/g, "$1<br />")) } );

Then just set class="verticalText" on the elements you want to be formatted like this.

And as a bonus it keeps the boob regex.

Answer 9

document.write("vertical text".split("").join("<br/>"));

Edit: Hole in one!