• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1646
  • Last Modified:

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 Korts
Richard Korts
  • 3
  • 2
  • 2
  • +2
1 Solution
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Sort of...you 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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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

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?

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now