Vertical positioned text

Forum Moderators: not2easy

Message Too Old, No Replies

Vertical positioned text

webguzs

5:58 pm on May 14, 2004 (gmt 0)

Can someone please advise me on how to display text
vertically without using images or flash?
im looking for something like

t
h
i
s

Is there a style or tag I can give an attribute to, to make this happen?

Thanks

BlobFisk

7:23 pm on May 14, 2004 (gmt 0)

Welcome to WebmasterWorld, webguzs!

No CSS to do this as far as I know, but what about using <br>s after each letter?

crashomon

7:26 pm on May 14, 2004 (gmt 0)

Yes, use float:left or clear to force new lines.

Also, you can see my posting (next up) about how to force elements to play nice like this:

1 2 3
4 5 6
7 8 9

and when 5 is pulled, all the following numbers shifted left -- or 'up' if there is an opening on the line above it.

Patrick

afficionado

7:41 pm on May 14, 2004 (gmt 0)

I believe css3 specify's something like this called glyph-orientation-vertical.

crashomon

7:52 pm on May 14, 2004 (gmt 0)

I'm now testing to see if I can make this work.

Right now, I'm trying to see if I can force text downward (right now, its only forcing the words downward)

</style>

<div class="vertical_hold">there is something funny here </div>

--------------
<Test results>

NOPE, I can't get it to work on the words, only if i encase each letter in its own div like so:

<div class="vertical_hold">t</div>
<div class="vertical_hold">h</div>
<div class="vertical_hold">e</div>
<div class="vertical_hold">r</div>
etc . . .

So, that will work, but its a bit of work if you don't know regular expressions . . . .

perhaps another CSS guru can help here . . .

Patrick Elward

SuzyUK

8:30 pm on May 14, 2004 (gmt 0)

crashomon.. I was actually looking at this at the same time as you.. your thinking is good but you would need some way to force letter wrap within a word.. is there such a thing?

afficionado is right CSS3 proposal.. [w3.org] but whether that even comes to fruition or not is another story..

M$ has something close [msdn.microsoft.com] but it's still not possible to get the effect desired without a lot of spans, divs and floats..

Here's my go.. with as little code as I could muster!

<style type="text/css" media="screen">
pre {
margin: 0;
padding: 0;
font: bold 20px georgia, serif;
}
</style>
</head>
<body>
<div style="width: 28px; float: left; border: 1px solid #000; text-align: center;">
<pre>
s
o
m
e
t
e
x
t
</pre>
</div>
<p>and then put the rest of your content here..</p>
</body>

good ol' <pre> :)

Suzy

webguzs

12:53 pm on May 17, 2004 (gmt 0)

Hey guys...for those who are interested. use this

SPAN.verticalStyle
{
writing-mode: tb-rl;
filter: flipH() flipV();
}

displays fine but doesnt print very well

Bonusbana

2:39 pm on May 17, 2004 (gmt 0)

SPAN.verticalStyle
{
writing-mode: tb-rl;
filter: flipH() flipV();
}

Have you tried this in any other browser that IE/win? I believe "filter" is internet explorer exclusive, and not a part of the CSS standard.

Rhys

11:15 am on May 18, 2004 (gmt 0)

I always take the easy way out and use tall skinny <td>'s with a <br> after each letter and set align='center'
to make the letters sit neatly above each other