Jquery to change text between normal and vertical
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...
Standard Orientation which would just be: Class of 2004
Vertical Orientation which would be:
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.
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
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here