Sideways HTML?

Is it possible to display html on a page so that it is vertical instead of horizontal? Like can I make an HTML table vertical instead of horizintal?

Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Devario JohnsonSoftware EngineerCommented:
you can make it look that way by hving the rows tall and the columns small

It is not easy for tables to orient the text sideways -- but for text in a graphics file, like GIF -- it is very easy.  Any capable graphics editor or designer like Photoshop of GIF designer can do this with great ease.  As for just raw text in an HTML page -- you would have to get a 90 degree rotated font, and these are hard to come by, but not impossible.   You will see here that almost ALL references to this are either just referring to text going down the page in a long thin column, but the characters still horizontal, or graphics images.

If you can find the right font, rotated 90 degrees, you can do it like this --
Something like this?  (only works in IE though)
#verticaltext { 
writing-mode: tb-rl; 
filter: flipv fliph; 
<div id="verticaltext" style="height:150px;">
It's all vertical to me!

Open in new window

The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Sort can change the orientation in IE with CSS, and achieve something similar with Firefox using SVG, which is kinda sorta an open Flash.  The code snippet below is the source for TWO files - a couple of lines for HTML page inclusion, and a separate file that's called by the EMBED.

You could instaed have a really narrow table (1em) and put a space between every letter of text so it will wrap it's way down...but that's just vertical orientation, and I suspect you're going for actual sideways...

<div style="border:1px solid blue;writing-mode:tb-rl;">hello this is sideways in IE</div>
<embed src="sample.svg" width="555" height="555" autostart="false" class="svgex" type="image/svg+xml" frameborder="no" scrolling="no" scrollbars="no">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg version="1.1"   xmlns="" xmlns:xlink="">
	<script type="text/javascript">
	function changeText(txt){
		var newText = document.createTextNode(txt);
		targetText.replaceChild(newText,targetText.childNo  des[0]);
	// ]]>
	<text id="thetext" transform="rotate(90,10,10)" font-size="20" x="10" y="10" font-family="Arial">Sideways in Firefox!</text>
	<text id="thetext" transform="rotate(270,230,100)" font-size="20" x="10" y="10" font-family="Arial">Sideways the other way in Firefox!</text>
	<text id="thetext" transform="rotate(180,250,80)" font-size="20" x="100" y="10" font-family="Arial">Inverted in Firefox!</text>

Open in new window

those codes above do not orient the characters themselves to 90 degrees rotated, do they?
Richard KortsAuthor Commented:
To pwrBall:

Yes, that's exactly the idea. Can it be made to work the other way? Text going from the top down rather than the bottom up?

How does the browser know about writing-mode: tb-rl;
filter: flipv fliph; ?

It only works in IE? that probably won't fly with my customer.
Straight from the horses mouth...M$

It's in the browser's render engine, but only IE's.

You might want to revert to good ole' GIF's if this will be on the Internet, and not an Intranet.
    .clsHorizLR { writing-mode:lr-tb }
    .clsHorizRL { writing-mode:rl-tb }
    .clsVertTB  { writing-mode:tb-rl }
    .clsVertBT  { writing-mode:bt-rl }
<h1>writing-mode Attribute</h1>
<p>This example shows how to use the <b>writing-mode</b> attribute to display horizontal text (<span>lr-tb</span>) 
within vertical text (<span>tb-rl</span>).</p>
<p>The following <b>div</b> element has a <b>writing-mode</b> of tb-rl and contains text and <b>span</b> child elements. 
The text flow alternates between vertical and horizontal. Note the effect of the <b>BR</b> element after the second 
set of vertical text.</p>
<div style="writing-mode:tb-rl">First Set of Vertical Text<span class="clsHorizLR">First Set of Horizontal Text</span>
Second Set of Vertical Text plus a line break<BR><span style="writing-mode:lr-tb">Second Set of Horizontal Text</span>
Third Set of Vertical Text<span class="clsHorizLR">Third Set of Horizontal Text</span>
</div><p>This example shows how to use the new <b>writing-mode</b> attribute to display horizontal text (<span>rl-tb</span>).<div class="clsHorizRL">Fourth Set of Horizontal Text</div><p>This example makes use of the new<b>writing-mode</b> attribute to display vertical text (<span>bt-rl</span>).<div class="clsVertBT">Fourth Set of 
Vertical Text</div>

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsAuthor Commented:
To pwrBall:

Very interesting. But this will be on the web, not Intranet.

"Good old gif's" are fine and of course obviously can be shown "sideways". But the content is going to be dynamic. I've used the php library image functions but the capability IS NOT robust & they are difficult to manage. I don't really want to go that route.

Unless you can suggst a "dynamic" gif creator that can be programatically built on the server?

But I'll give you the points.

Richard KortsAuthor Commented:
Know of a way to (Javascript or CSS) to "force" a page to print in Landscape? That would negate the need for all this.

In other words, when the web visitor clicks "print" in the Browser file menu, if forces a landscape mode. Or maybe we have a print button on the page & Javascript behind it that sets orientation to landscape? Can that be done?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.