Rotation d’un caractère 90 degré

**elghali_sofiene** · 16/05/2007, 16h09

Bonjour,

J’ai un petit souci, que j’aimerai bien que vous m’aide là-dessus. Je veut afficher un caractère avec une rotation de 90 degré "par exemple : V --> < ";
100% javascript

Merci d’avance.

**SpaceFrog** · 16/05/2007, 16h13

sous IE seulement avec writingmode ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html><head><style type='text/css'>
    .clsHorizLR { writing-mode:lr-tb }
    .clsHorizRL { writing-mode:rl-tb }
    .clsVertTB  { writing-mode:tb-rl }
    .clsVertBT  { writing-mode:bt-rl }
</style></head><body>
<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>
 
</div></body></html>

pour les autres navs => une image ou une police pivotée ... mais bon là du coup il faut heberger la police ...

**E.Bzz** · 16/05/2007, 16h15

Bonjour,
dans l'attente du CSS3 qui le permettra, apparemment, une solution IE only (désolé, j'ai pas eu à chercher pour les autres nav

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<style>
.toto
{
vertical-align:bottom;
white-space: nowrap;
width:1em;
height:1em;
filter: Progid: DXImageTransform.Microsoft.Matrix(
M11='-1.836909530733566e-16',
M12='1',
M21='-1',
M22='-1.836909530733566e-16',
sizingmethod='auto expand');
}
 
.capsule {
width:20px;
overflow:hidden;
}
</style>
 
</head>
<body>
 
<table border="1">
<tr style="vertical-align:bottom;">
<td><div class="capsule"><div class="toto">un nom de colonne particuièrement long</div></div></td>
<td><div class="capsule"><div class="toto">encore un nom long</div></div></td>
<td><div class="capsule"><div class="toto">encore un nom long</div></div></td></tr>
<tr><td>10</td><td>20</td><td>30</td></tr>
</table>
</body>
</html>