1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to rotate text in the browser?

Discussion in 'HTML & Website Design' started by Sly, Mar 30, 2006.

0
  1. #1
    Anyone know of a good and easy way of rotating text in the browser 90 degress - without resorting to turning my monitor on its end ! :)

    Static Text not animated .

    I am wanting to print the generated text to envelopes - my printers chew up envelopes if not fed in lengthways.

    I had thought of using Flash. Any other ideas?
     
    Sly, Mar 30, 2006 IP
  2. T0PS3O

    T0PS3O Feel Good PLC

    Messages:
    13,219
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Are you sure you don't just want to find the right printer setting?

    You can put text on an image and rotate it with the PHP GD library I guess, or use CSS for the job. JavaScript can probably do it too.
     
    T0PS3O, Mar 30, 2006 IP
  3. 87654321

    87654321 Well-Known Member

    Messages:
    317
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #3
    this method works only in IE, if you are looking for crossbrowser compatibility, use images!

    heres the code:

    in the <head>

    
<script>

var i = 0;
function rot()
{
i = ++i % 4;
if (!document.all.rotateDiv.style.filter)
document.all.rotateDiv.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + i + ')';
else
document.all.rotateDiv.filters.item('DXImageTransform.Microsoft.BasicImage').Rotation = i;
} // ends function rot(void)

</script>
    Code (markup):
    and in the <body> tag:

    
<BODY onLoad="rot();">
    Code (markup):
    now all you have to do is create a 
    <div>
    Code (markup):
    with the id set to rotateDiv, so it will become 
    <div id="rotateDiv">
    Code (markup):
    and add the text to be rotated within this div!

    and the text should rotate in IE ONLY

    But the best solution is to use images!
     
    87654321, Mar 30, 2006 IP
  4. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Here's something else you can do (only works in IE though)...

    
<div style="writing-mode: tb-rl">This text should be rotated 90 degrees.</div>
    Code (markup):
    You can read more about it here.
     
    brian394, Apr 10, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Why don't you just go into page setup and select landscape instead of portrait?

    cheers,

    gary
     
    kk5st, Apr 10, 2006 IP
  6. compwiz3000

    compwiz3000 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    This isn't perfect, as technically it generates new unicode characters, but as long as you stick to lower case, they do look rotated. Here's the link: http://www.UpsideDownText.com/
     
    compwiz3000, Mar 21, 2010 IP