A customer wants vertical text in a table cell (the columns to be exact). I’ve looked here and google and can’t seem to find a way to accomplish this?
Any help is appreciated!
Mike
hello
1 the old way text img ?
2 IE only:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.txtvtb,.txtvbt{
writing-mode: tb-rl;
font-family:Arial,Helvetica,sans-serif;
color:#000000;
font-size:60px;
font-weight:900;
}
.txtvbt{
writing-mode: tb-rl; filter: flipv() fliph();
}
-->
</style>
</head>
<body>
<table>
<tr>
<td><span class="txtvtb">Text here</span></td>
<td><span class="txtvbt">It's working</span></td>
</tr>
</table>
</body>
</html>
3 JavaScript?
4: CSS3 (for the future…)
Try using write-direction.
It’s intended for implementing different languages, as you may know, some languages are read from left to right, top to bottom, while others are read from top to bottom and left to right.
The write-direction enables you to correctly display different languages, and can be used to creat vertical text as well.
A GOOGLE search on: CSS write-direction should provide you with the correct syntax for any situation you might encounter.
I’m sorry, it’s writing-mode :tb-rl.
And as All4Nerds pointed out, it’s IE only.
Another way to do it without JavaScript, is to define a seperate rule for each charactor, and place each in it’s own division, one on top of the other.
Theirs probably a better way, I just haven’t figured out how yet.
Here’s one way, you could work on the letter and word spacing to get it to look right, and remove the non-breaking-spaces.
<style type="text/css">
body{margin: 0;
padding:0;
background:white;}
#verticaltext{position:relative;
top:25px;
left:25px;
width:.1em;
height:450px;
font-weight:bold;
font-size:.5em;
color:black;}
</style>
</head>
</body>
<div id="verticaltext">
T h i s I s V e r t i c a l T e x t
</div>
</body>
</html>
Or you could do it like this.
<style type="text/css">
body{margin: 0;
padding:0;
background:white;}
#verticaltext{position:relative;
top:25px;
left:25px;
height:300px;
font-weight:bold;
font-size:1em;
color:black;}
</style>
</head>
</body>
<div id="verticaltext">
V<br />e<br />r<br />t<br />i<br />c<br />a<br />l<br /><br /> T<br />e<br />x<br />t
</div>
</body>
</html>
Not the prettiest code, but it gets the job done.
How about using a list?
<style type="text/css">
body{margin: 0;
padding:0;
background:white;}
#verticaltext{position:relative;
top:25px;
left:25px;
height:300px;
font-weight:bold;
font-size:1em;
color:black;}
.removebullets{list-style-type:none;
margin-left:0;
margin-right:800px;
background:gainsboro;}
</style>
</head>
</body>
<div id="verticaltext">
<ul class="removebullets">
<li>V</li>
<li>e</li>
<li>r</li>
<li>t</li>
<li>i</li>
<li>c</li>
<li>a</li>
<li>l</li>
<li></li>
<li>T</li>
<li>e</li>
<li>x</li>
<li>t</li>
</ul>
</div>
</body>
</html>
A little better.
Thank you for all your examples. But for each one, could you show an image of what it actually does?
I am trying to write English, Bottom to Top, like it is often done on the right border of a paper sheet; Google lets me find dozens pages with examples as you; I tried many of them, but all of them, without a single exception, are just repeating what is known by everyone (writing Top to Bottom), so I have not the time to also test yours (since they most probably just add another Top to Bottom case); it would be easier for everyone if you posted somewhere the HTML document, and if you posted here a link to that document.
TIA,
Paris, sam. 26 mars 2005 12:34:20 +0100
maybe because there isn’t a cross-browser solution. Use images for now. 
Unless:
<pre>
v
e
r
t
i
c
a
l
t
e
x
t
</pre>
I forgot some precisions: I searched Google “writing bottom to top in HTML”, visited [URL=http://www.w3.org/TR/xsl/sliceA.html]W3’s Additional “writing-mode” values, then searched [URL=http://www.google.com/search?q=WRITING-MODE%3A+tb-rl&btnG=Search]Google “WRITING-MODE: tb-rl”, then visited (among plenty others) Microsoft pages [URL=http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/writingmode.asp]writing-mode Attribute | writingMode Property and [URL=http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie55/html/verticaltext.asp]Using Vertical Layout in Internet Explorer 5.5. On the plenty pages I met, many examples were with HTML code, there were all Top to Bottom, without exception - as verified by trying in IE (and OE) all the ones that left some ambiguity. Thanks to mstwntd’s try… that makes no exception either.
Paris, Sat 26 Mar 2005 13:13:20 +0100
Actually the attributes are rtl-tb ltr-tb
The wrapping will occure at the end of the last word for which their is enough space in the div.
So
at
best
you’ll
end
up
with
vertical
text
that
looks
like
this
To get it like
T
h
i
s
using write-mode you’ll have to put a s p a c e between each letter.
Which makes using write-mode to achieve the effect of “single charactor vertical text” redundant
You can achieve the same effect, without using write-mode, by setting the width of the divions so that it will only hold 1 charactor of text per line, that way it’ll wrap at the end of each charactor, creating vertical text.
If you want it to start from the bottom like
s
i
h
T
Type the text backwards.
With write-mode; However, the text will wrap at the end of a word, regardless of division width.
I don’t think so: according to the 2 Microsoft pages I linked (my 2 last links),The writing-mode attribute has only two values:
[list]
[]tb-rl
[]lr-tb
[/list]Thanks anyway for replying
Paris, sam. 26 mars 2005 17:36:25 +0100
I don’t recall the exact syntax, you have to give it a width though, else it won’t work.
I’ll check the syntax in the working experiments I’ve done.
hello
writing-mode:tb-rl;
writing-mode:tb-rl; filter: flipv() fliph();
I just checked my working examples, it’s ltr, and rtl.
“ltr” and “rtl” are AFAIK value for the “dir” attribute (in BLOCKQUOTE for instance), not for “writing-mode” in STYLE.
Sorry for my previous reply, your post had just its 1st line on my screen when I posted my reply (may be you edited yours later?).
Sorry also for not explaining clear enough what I wanted: I want quite regular writing, the whole line rotated 90° trigo-wise (i.e. -90° clock-wise). So your solution (lining characters vertically without rotating them), while useful, is not what I am looking for here.
Thanks anyway for replying despite my imprecise question!
Paris, sam. 26 mars 2005 18:12:25 +0100
What do you mean by “quite regular writing”?
Excuse me for not getting your post, but that is a very vague term.
I’m not sure what you’re referring to in your post, when you say ltr and rtl are AFAIK values for write-mode. Could you explain that in more detail? Please?
ltr, and rtl are the only way write-mode will work with the fliph(), and flipv() attributes(only works in IE). Try it.
I mean quite regular writing, the whole line rotated 90° trigo-wise, i.e.:
- assume a quite regular line, written left to right, with characters upside up;
- rotate the whole line 90° trigo, i.e. everything is rotated in one solid block: the whole layout, as well as each character.
I didn’t say that. I said ltr and rtl are not valid values for the writing-mode attribute; AFAIK (As Far As I Know) they are for the dir attribute, for instance in:[indent]<BLOCKQUOTE dir=ltr>[/indent]and I don’t know a tag or attribute called “write-mode” in HTML.
I feel like you may have a solution to my problem; in that case could you copy here entirely (without changing or removing a single char) the exact code of a working example.
To explain better what I need, here is an example of the opposite, which is often done:
<DIV style="WRITING-MODE: tb-rl">PRESSING</DIV>
Please try this code in an HTML piece of page, and you will see “PRESSING” written vertically, the whole line rotated 90° clockwise, thus top-to-bottom.
What I need is the samething but the opposite way, i.e. the whole line rotated -90° clockwise, thus bottom-to-top.
IOW, what I would need is the “bt-lr” additional value for the “writing-mode” attribute, exposed in « A.1 Additional “writing-mode” values » (2nd link in my post of 13:13:20 +0100 above). Unfortunately this is probably just a project, as it doesn’t work so far in IE/OE.
Paris, sam. 26 mars 2005 19:00:00 +0100
édited (simplifying code example; presentation) 21:17:00
Hello
<div style="writing-mode: tb-rl; filter: flipv() fliph(); ">PRESSING</div>
Instead of writting “PRESSING” write it like this “GNISSERP”, backwards.
It will display like this.
G
N
I
S
S
E
R
P
If you use write-mode, or write-direction, whichever it is, it will display like this.
PRESSING, or like this GNISSERP, because the text will only break at the end of a word, regardless of the div width. Unless you put a space between each charactor.
words are treated as blocks in this case, so in order to seperate the charactors you have to space them, otherwise the charactors that make up a word will be treated as a block, and will wrap as blocks/words, instead of breaking at the end of each charactor.
So it would be redundant to use write-mode/direction to achieve this affect.
You can simply set the division’s width so that it will only hold 1 charactor per line, and will wrap vertically.
Use a style rule and position:relative, or absolute with the bottom or top value set to where ever you want the bottom or top to be.
Thanks for the try, but I had already tried it, and it doesn’t work: it gives the same result (line rotated 90° clockwise, thus top-to-bottom).
I had already tried this, no avail (in addition it would be too complicated for regular use); please actually try it:
- my way #2bis: <DIV dir=rtl style=“FILTER: flipv() fliph(); WRITING-MODE: tb-rl”
align=middle>GNISSERP</DIV> - my way #10: <DIV
style=“FILTER: flipv() fliph(); DIRECTION: rtl; unicode-bidi: bidi-override; WRITING-MODE: tb-rl; glyph-orientation-vertical: -90”
align=middle vAlign=“center”>PRESSING</DIV> - your way: {Please write it in reply}
Please copy-paste the entire and exact code you tried, as I did, i.e. without omitting, adding or changing a single character from what you actually tested; “use write-mode, or write-direction, whichever it is” is just what we all think before working at it, and isn’t enough to find what you mean.
Thanks again anyway to both for trying (not easy! :fangel: )
(I also edited my post of 19:00:00 +0100 above)
Paris, sam. 26 mars 2005 21:20:00 +0100 edited 21:22:40
Hello
Do you not make a fundamental mistake text (charset=iso-8859-1) is always
written in the same direction from left to right and letters are never upside down you just rotate the text on screen by CSS, filters
It seems that W3C and other authorities (individuals or organizations) have been focused on handling the differences in languages (Arabic, Chinese, etc), not on building a more general system to enable writing anything in any direction (including Bottom to Top, useful in tables and in advertizing): surprisingly they defined only 2 of the 8 possible combinations, tb-rl and lr-tb (as pointed in my post of 17:36:25 +0100 above).
Paris, sam. 26 mars 2005 21:45:25 +0100