Text vertical instead of horizontal

gwar2k1 · Jul 18, 2003

Hey, just wondered how i could get text to be written up (or down) a vertical space using html / css.

Thanks

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

RISTMO · Jul 18, 2003

Do you mean like this?

H
e
l
l
o

W
o
r
l
d

Or where the letters are actually flipped sideways? I can dig up a solution to either way, just let me know--the second way is IE only.

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

EdwardMartinIII · Jul 18, 2003

Or maybe like this:

Code:

<img src=&quot;SidewaysO.gif&quot; alt=&quot;O&quot; height=&quot;15&quot; width=&quot;10&quot;></img><br /><img src=&quot;SidewaysL.gif&quot; alt=&quot;L&quot; height=&quot;15&quot; width=&quot;10&quot;></img><br /><img src=&quot;SidewaysL.gif&quot; alt=&quot;L&quot; height=&quot;15&quot; width=&quot;10&quot;></img><br /><img src=&quot;SidewaysE.gif&quot; alt=&quot;E&quot; height=&quot;15&quot; width=&quot;10&quot;></img><br /><img src=&quot;SidewaysH.gif&quot; alt=&quot;H&quot; height=&quot;15&quot; width=&quot;10&quot;></img>

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Wullie · Jul 18, 2003

Hi mate,

<html>
<head>
<style>
#vertit {
position: absolute;
left: 150px;
top: 150px;
writing-mode: tb-rl;
filter: flipv fliph;
}
</style>
</head>
<body>
<div id="vertit">Test</div>
</body>
</html>

This is IE only though.

Hope this helps

Wullie

http://www.necomputers.org.uk

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.whiland.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

RISTMO · Jul 18, 2003

True, but a single image would be easier then....unless you used javascript:

<script type="text/JavaScript">

</script>

Rick
P.S. I've never heard of </img>! Or maybe I have...a long time ago....but I thought it was <img /> that was supposed to be used? </img> is XHTML Standard?

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

lillu · Jul 18, 2003

http://www.geocities.com/lillamarta

http://www.geocities.com/lillamarta/purple

EdwardMartinIII · Jul 18, 2003

Code:

</img>

is a standard XHTML closing tag.

Every tag requires a closing tag:

Code:

<img></img>

,

Code:

<br></br>

,

Code:

<input></input>

, but for some tags, you can "cheat" and combine the closing and opening tags into one sequence:

Code:

<br />

,

Code:

<hr />

, etc.

I try to do an opening + closing pair to assist in eye-reading, but I can't seem to train myself to do it with

Code:

<br />

, probably because I just think of it to much as a single line-return character.

Rick, would your code work, or should it be a caps call:

Code:

document.write(H+E+L+L+O);

You know, using that scheme, a person could write a script that would parse pages sideways. Very funny trick, that!

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

RISTMO · Jul 19, 2003

Sorry...you're right...JavaScript is case-sensitive. It should have been document.write(H+E+L+L+O);. It seemed like something was wrong, but it was too late to think clearly! ;-)

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Jul 19, 2003

Yeah the letters flipped

thanks for all your replies im gonna try the none-image ones first.

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

gwar2k1 · Jul 19, 2003

hey, Wullie, ur example didnt work =( Im using IE 6.1 and it just showed up as normal. I added type="text/css" but that had no effect either.

Suggestions?

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

ThomasJSmart · Jul 20, 2003

its quite easy to do this with PHP, you can use php with the GDlib to make on the run graphics with fonts in. that way the programming automatically makes the flipped over fonts and puts them in the browser, as this is just done with jpgs or pngs it works on all browsers anywhere,

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

gwar2k1 · Jul 20, 2003

i really dont wanna use images. surely it'll make the page load slower etc.
I was hoping for a CSS property or something like that which Wullie did suggest, though it's not working in my browser (IE6.1) and I dunno if it will on other ppls. I know I should test in other browsers, but my target audience isnt exactly the type to have anything but IE so if its not working on mine, its not working on theres

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

Wullie · Jul 20, 2003

Hi mate,

What happened when you tried it?

Did you use the actual code above or add it to other code?

Hope this helps

Wullie

http://www.necomputers.org.uk

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.whiland.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

RISTMO · Jul 20, 2003

If you use Edward's and my method, it will not be terribly slow, because once the images are called once, they will be reused over and over again, and each letter, in 12px font, would only be about 70bytes each.

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Jul 20, 2003

nm, thanks all! i got rid of the div and used a cell with class vrtit. thus further supports my argument div is annoying and pointless. <span> is more favorable to me though where avoidable I use neither!
mwuhahahaha

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

EdwardMartinIII · Jul 21, 2003

gwar2k1: i really dont wanna use images. surely it'll make the page load slower etc.

You're forcing a web page to rotate text sideways, making it a pain in the bazoom to read and you're worried about throughput? [rofl]

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

bonumtibor · Aug 6, 2003

gwar2k1 · Aug 6, 2003

Thanks for the heads up =)

and... ive come off my little anti-div trip. Ive started using them (not through choice) and they are actually... infact... awesome. *hangs head in shame*

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Text vertical instead of horizontal

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Technical User

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor