Vertical Text in CSS

I don’t know. Thanks to anyone who could bring the relevant specs.

I thought so, but after searching, reading, trying many ways of writing the implied code, I found no way to do it; if you can do it, please post the exact code that worked (including defining the character set if necessary)! TIA,

Paris, sam. 26 mars 2005 21:52:10 +0100

Hello in IE

Paris, France, la langue française? even more basic people must be able
to reed it.

In a 90 dgr rotation there are only two options (-90 +90)


<!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">jetaime&nbsp;mon&nbsp;amour</span></td>
<td><span class="txtvbt">jetaime&nbsp;mon&nbsp;amour</span></td>
</tr>
</table>
</body>
</html>

Here’s a working example.


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd)">
<head>
<style type="text/css">
 body{margin:0;
			 padding:0;
			 background:white;}
 .verticaltext1{position:relative;
					  top:200px;
		margin-left:125px;
		width:1px;
		height:100%;
		font-weight:bold;
		color:red;}
 .verticaltext2{position:relative;
					  top:-408px;
					  left:150px;
		width:1px;
		height:100%;
		font-weight:bold;
		color:blue;}
</style>
</head>
<body>

 <div class="verticaltext1">
		 V E R T I C A L 
 </div>
 <div class="verticaltext2">
		 L A C I T R E V 
 </div>

</body>
</html>
 

If it doesn’t work for you, I would be at a lose as to why not, as it works fine for me.

That’s why I don’t understand why just one works. As I reported, there are dozens pages showing writings at +90° clockwise (thus Top-to-Bottom), and your code is just one more; so far I found just one example of -90° (Bottom-to-Top), but I didn’t understand the example well enough to reproduce it. If ever you can, thanks to enlighten me!

That example was case (5), part “t-s1”, in W3’s 7.27 Writing-mode-related Properties, that I tried (adapted) in my test #10 (reported 21:20:00 +0100 above, 2nd bold dot).

Thaks to anyone who could make it work!

Paris, sam. 26 mars 2005 22:30:30 +0100

it doesn’t work by me… :cry: It gives this:

[indent][indent]L
A
C
I
T
R
E
V
[/indent][/indent][indent]V
E
R
T
I
C
A
L
[/indent]Paris, sam. 26 mars 2005 22:31:00 +0100
edited (trying - and failing - to remove undue vertical spaces) 22:40:00

Hello

in IE

Pardon me, Pardonnez-moi not Working?

or do you main the text also hase to be on the right, or (left?) side
of the screen, that is an other problem

Now I see what you mean by 90 degree rotation.

Edit:

I’m not sure that can be done with write-mode.

I think their may be a way, but it’ll take some experimentation to get it to work.

I love a challenge!

Thanks all4nerds for your sreen dump, it makes things much clearer (and my apology for not doing what I requested from others…:blush: )

In my OE6, as well as in my IE6 (both quite up to date - in FR versions, but this shouldn’t make a diff… or does it?), the 2 lines are the same direction, Top-to-Bottom. So your post makes things much clearer: I must have something wrong in my system. This is a new Notebook, bought 14 Dec 2004 (This is why I haven’t my screen capture at hand), WXPHome FR SP2, apparently quite OK.

No problem here (But you were right to ask).

Paris, sam. 26 mars 2005 23:00:25 +0100

Sorry I didn’t explain better - and thanks again to all4nerds for his screen dump, which made things much clearer! and thanks to you as well for your continuous tries on that question - that seems rather hard to me.

Paris, sam. 26 mars 2005 23:04:35 +0100

I love it when people present difficult problems.

It forces you to look for solutions where their are no obvious ones.

As a result your skill level goes way up.

I make an HTML file, named “jetaime_B-to-Top.htm”, containing exactly all4nerds’s code of 22:10 +0100, entire and inaltered, with nothing added or removed or changed.

I double-click that file in Windows Explorer, which opens it in a new IE window. I can see the 2 lines are in the same direction, Top-to-Bottom. But I didn’t pay attention to the IE Information Bar at the top of that IE window, notifying me that « an active contents has been blocked »; if I click and chose to allow that active contents, then click “Yes”, then at once the 2nd line flips to Bottom-to-Top, while the 1st line remains Top-to=Bottom.

Unfortunately the same fails in DocType’s VERTICAL test, as well (or as bad in that case!) as in my tests above (#10 in particular).

Paris, sam. 26 mars 2005 23:38:10 +0100

Don’t you just love browser options, even if you do figure out how to do something like vertical text, the user can still have it disabled.

If you use an image to display vertical text they can have images turned off.

If you use JavaScript to display vertical text, they could have JavaScript disabled.

You could write a bit of JavaScript to detect if they have the method you’re using disabled, and pop up an alert asking them if they want to enable it, and turn it on if they select “yes”.

Or turn it on when the page loads without asking, which might be considered rude.

It’s a hit or miss proposition, for the most part.

Most people will be able to see your affect, as long it, not displaying for those who have your method disabled, doesn’t wreck your layout, then you’re good to go.

It’s a good idea to test your page/s in different browser, with all those options disabled to see how it affects your page.

It takes some extra time, but it’s worth it in the long run.

Following DocType’s recall of trying to work anywhere without hurdle, I tried to simplify it. The 2 lines have now different texts (easier to understand); streamlining the details.

Table version:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Moi aussi (TABLE)</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=iso-8859-1">
<STYLE>TD {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: Arial;
WRITING-MODE: tb-rl
}
.bottom2top {
FILTER: flipv() fliph()
}
</STYLE>
 
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY bgColor=white>
<TABLE>
<TBODY>
<TR>
	<TD>Je&nbsp;t'aime</TD>
	<TD class=bottom2top>Moi&nbsp;aussi</TD></TR>
</TBODY></TABLE></BODY></HTML>

DIV Version:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Moi aussi (DIV)</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=iso-8859-1">
<STYLE>
BODY {
FONT-SIZE: 10pt; BACKGROUND: white; COLOR: black;
FONT-FAMILY: Arial
}
.top2bottom {
WRITING-MODE: tb-rl
}
.bottom2top {
FILTER: flipv() fliph(); WRITING-MODE: tb-rl
}
</STYLE>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY bgColor=white>
<DIV><SPAN class=top2bottom>Je&nbsp;t'aime</SPAN></DIV>
<HR>
<DIV><SPAN class=bottom2top>Moi&nbsp;aussi</SPAN></DIV>
</BODY></HTML>

Thanks again all4nerds and DocType!

Paris, dim. 27 mars 2005 00:59:35 +0100
edited (detail) 01:04:10

Lmao

what you need is…

writing-mode: tb-rl; filter: fliph() flipv();

flips vertically bottom to top…

Thanks idevil_himslf for replying, and sorry for not having everything in mind or at hand right now (one year and 2 computers later…). But I had tried this (I think I reported it, but haven’t time to check all above right now), it “worked” (that is, for some undemanding people), I used it in a few private documents, but it didn’t really work reliably, for instance:

[list]
[]in one PC/OS/browser (W2K) it would display in +90° as I wanted, but print in -90°;
[
]in another PC/OS/browser (WXPSP2), as reported sam. 26 mars 2005 23:38:10 +0100 above, it would first display in the wrong direction (-90°) with the IE Information Bar at the top of that IE window notifying me that « an active contents has been blocked », and display correctly only after I click that IE Information Bar (and then again it would print in the wrong direction).
[/list]All this doesn’t fill my need:

[list]
[]when reading a book or a newspaper article, I don’t expect to have to turn the material +90° or -90° or upside-down, or to turn another page, to get able to read it comfortably;
[
]so in 2006 (internet year 13), when writing a web page, I don’t expect others to have to turn it +90° or -90° or upside-down, or to click another bar, to get able to read or print it comfortably and correctly.
[/list]Paris, Mon 20 Mar 2006 12:17:35 +0100

[B]bt-lr is now available (in IE8)[/B]

That thread, even if old and uncontinued, needs some updating (at least concerning my posts).

  1. The bt-lr attribute that I badly needed in my [B]“writing-mode: bt-lr” would fit (when implemented in CSS…)[/B] of Sat 26 Mar 2005 18:00:00 GMT, and that was inexistent despite considered in [B]W3C Working Draft 24 October 2002[/B] ([URL=“http://www.w3.org/TR/2002/WD-css3-text-20021024/#Progression”]3.2. Setting the inline and block progressions: the ‘writing-mode’ and ‘direction’ properties), finally has been apparently introduced in IE8 (according to 4th link below).

  2. in my What I searched and found of Sat 26 Mar 2005 12:13:20 GMT:

[LIST]
[]2nd link has been moved under [B]A.1 Additional “writing-mode” values[/B], and apparently updated.
[
]4th link has been moved under [B]writing-mode Attribute | writingMode Property[/B], and apparently updated.
[*]5th link has been moved to [B]Using Vertical Layout in Internet Explorer 5.5[/B].
[/LIST]3) in my [B]Anyone can explain W3’s Bottom-to-Top case?[/B] of Sat 26 Mar 2005 21:30:30 GMT, the link has been moved, upgraded and updated to [B]W3C Candidate Recommendation 20 February 2006[/B], [URL=“http://www.w3.org/TR/2006/CR-xsl11-20060220#writing-mode-related”][B]7.29 Writing-mode-related Properties[/B].

Versailles, Wed 3 Dec 2008 14:20:30 +0100
edited (added title, lost by initial posting) 15:39:20