Vertikaler Text mit CSS

Ich wollte damit mal meine Erfahrungen kund tun. Die einzige Möglichkeit sowas bisher Browser übergreifend zu realisieren war ja, ein Bild mit dem Text zu generieren.

Oder man macht es so: http://snook.ca/archives/html_and_css/css-text-rotation
Die größte Anzahl Benutzer mit inkompatiblen Browser dürfte die Gruppe Nutzer mit FF älter als 3.5 sein. Aber die aktualisieren recht zügig.

Nun wie sieht das aus? In jedem Browser anders! Außerdem brauchte der IE bei mir noch eine spezielle Anpassung der Positionierung.

Von links nach rechts:

• FF macht es als einziger richtig, die Schrift sieht aus wie normale Schrift
• IE schaltet die Schriftglättung aus
• dafür glättet Chrome die Schrift noch mal extra dolle

Fazit: Wenn man mit diesen Einschränkungen leben kann, ist es eine praktische Möglichkeit Text vertikal auszurichten.

Interessant.

Mit Opera geht das ab Version 10.5 auch:

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms

Danke für den Beitrag.

Original von tector

Mit Opera geht das ab Version 10.5 auch:

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms

 Oha, dann sieht die komplette Liste der Eigenschaften nun so aus...

CSS:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);	
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Cool wenn ich mir jetzt die Möglichkeiten der Gestalltung überlege kommen nen paar gute ansätze raus, also finde ich

Vertikale Schrift in Ordnung (für Firmennamen usw.), aber vertikale Menüs, wie im Screenshot von Klaus zu sehen: no go. Das ist doch aus Usabilitysicht absoluter Schwachsinn.

Ok, ich lenke vom Thema ab ...

> IE schaltet die Schriftglättung aus

Mit IE 9 wird alles besser

http://www.heise.de/newsticker/meldung/PDC-Erster-Ausblick-auf-den-Internet-Explorer-9-864346.html

Original von Dunedan

Vertikale Schrift in Ordnung (für Firmennamen usw.), aber vertikale Menüs, wie im Screenshot von Klaus zu sehen: no go. Das ist doch aus Usabilitysicht absoluter Schwachsinn.

Das ist gar kein Menü sondern eine Tabelle. In den Zeilen stehen Handyhersteller und in den Spalten obige Eigenschaften. In den einzelnen Zellen kann man dann ne Bewertung abgeben.

So eine Matrixdarstellung ist da wohl durchaus legitim.

Original von Klaus

Das ist gar kein Menü sondern eine Tabelle. In den Zeilen stehen Handyhersteller und in den Spalten obige Eigenschaften. In den einzelnen Zellen kann man dann ne Bewertung abgeben.

So eine Matrixdarstellung ist da wohl durchaus legitim.

Ok, schon eher sinnvoll. Allerdings wäre eine Drehung im 45°-60° noch sinnvoller und vor allem lesbarer.

Das ist korrekt und das war im Entwurf sogar so vorgesehen.

Allerdings wäre es dann mit den Rahmen zwischen den Zellen kompliziert geworden. Abgesehen davon unterstützt die IE-Methode nur Drehungen um 90°.

Aber um mal wieder zum Thema zurück zu kommen:

Schön, dass sowas in CSS endlich mal vorgesehen ist.

und wer hat's erfunden? Die Kalifornier!