vertical/rotated text

[[RZ]]

after a few questions here about rotated texts (not to be published as an image, because doesn't support links), i did a few tries and here is a workaround:

some features:

* vertical/rotated text
* no image-based text
* you can have links, colors, fonts sizes, etc...
* cross-browser near-pixel-perfect (at least acceptable approximation)
* modern browsers required (can't believe... works in ie9!)
* tested on: chrome, ie, firefox, maxthon, opera, safari

how-to:

1. drag and drop a text object
2. double click to edit
3. enter your text
4. set sizes, fonts, colors, etc
5. right click on the text object and select html
6. add this in 'before-tag' tab:

Code: Select all

<div style="
-moz-transform: rotate(-90deg) translate(0, 100%);
-moz-transform-origin: 0% 100%;
-o-transform: rotate(-90deg) translate(0, 100%);
-o-transform-origin: 0% 100%;
-webkit-transform: rotate(-90deg) translate(0, 100%);
-webkit-transform-origin: 0% 100%;
-ms-transform: translate(0%, 106%) rotate(-90deg);
-ms-transform-origin: 0% 0%;
transform: translate(0%, 106%) rotate(-90deg);
transform-origin: 0% 0%;
">

7. add this in 'after-tag' tab:

Code: Select all

</div>

8. click ok, preview, publish, enjoy!

FORGOT TO MENTION: THIS SNIPPET (AND OTHER STUFF EVENTUALLY WRITTEN BY ME) IS NOT TO BE TAKEN AND PUBLISHED/TRANSLATED IN ANY WAY IN WHOLE OR IN PART AND/OR IN ANY OTHER FORUM. IF YOU FIND IT USEFUL, IT IS INTENDED TO BE USED BY http://www.wysiwygwebbuilder.com/forum USERS/MEMBERS IN THEIR WWB PROJECTS ONLY. (i think our loyal and valuable friend baconfries will understand me and knows what i'm talking about.)