Question

I am creating a custom graduation stole configurator. In this configurator a customer can enter a line of text like “Class of 2004”. I need to have a button that changes the text between two formats…

1. Standard Orientation which would just be: Class of 2004

2. Vertical Orientation which would be:

C

l

a

s

s

o

f

2

0

0

4

What would be the best way to do this where I can swap back and forth between the two orientations? My idea was to save the original orientation somewhere in a hidden div so I could recall it at any time and then when they click the vertical text button, convert spaces to “

” and then add a single
between every character. It sounds like a kind of hacky way to do it so I’m trying to figure out how other people would do it. Need it to work with IE8+ too.

Answer 1

One approach would be with the jQuery plugin lettering.js. This plugin wraps each letter (or word) in a span, and allows you to manipulate text by individual words or letters…

So, you can do this, and just use jquery to toggle clear:both, or some such thing on each letter.

Here’s a jsfiddle example