Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog
W i l l k o m m e n   a u f   m e i n e r   H o m e p a g e

Vertikal Schreiben - wie geht das?

Das ist eigentlich ganz einfach: Das ist ein Div-Container, der einfach die Buchstaben aufnimmt. Die Position des Container wird im Stylesheet festgelegt.

der Code:

.box1 {
width:8px; /* die Breite muss unbedingt angegeben werden
height:100%; /* Vorsicht bei festen Höhenangaben: siehe hier
border:1px solid black;
padding:5px; /* sollte festgelegt werden, wenn ein Rahmen gezogen wird.
background:#eee;
float:left; /* das bedeutet, dass das nächste Element rechts daneben angeordnet wird
font-weight:bold;
text-align:center;
}

Eine Alternative dazu gibt es nur für den Internet Explorer, aber mit Hilfe einer Browserweiche kann man das auch für andere Browser tauglich machen.

Der Code:

<!--[if gte IE 6]> <strong id="vertical">vertikaler Text</strong> /* wir bilden eine Identity */
<span style="display: none; "> /* das ist notwendig, damit der IE das Bild nicht anzeigt */
<![endif]-->
<img src="vertikal.gif"> /* Alternativbild */
<!--[if gte IE 6]>
</span>
<![endif]-->

#vertical {
writing-mode: tb-rl;
filter: flipv fliph;
}

Hier wird der Browser abgefragt. Alles, was zwischen <!--[if gte IE 6]> <strong id="vertical">vertikaler Text</strong>
<span style="display: none; ">
<![endif]-->
steht gilt nur für den IE ab Version 6. Alle anderen Browser zeigen das Bild - am besten ein Screenshot - an.
Nur - valider Code ist das nicht.