Spieleentwicklung

Vertikaler Text mit CSS

gepostet vor 14 Jahre, 10 Monate von Klaus

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.

Zitieren

gepostet vor 14 Jahre, 10 Monate von tector

Interessant.

Mit Opera geht das ab Version 10.5 auch:

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

Zitieren

gepostet vor 14 Jahre, 10 Monate von SysWar-Admin

Danke für den Beitrag.

Zitieren

gepostet vor 14 Jahre, 10 Monate von Klaus

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);

Zitieren

gepostet vor 14 Jahre, 10 Monate von Nerosmeel

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

Zitieren

gepostet vor 14 Jahre, 10 Monate 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.

Ok, ich lenke vom Thema ab ...

Zitieren

gepostet vor 14 Jahre, 10 Monate von TheUndeadable

> 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

Zitieren

gepostet vor 14 Jahre, 10 Monate von Klaus

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.

Zitieren

gepostet vor 14 Jahre, 10 Monate von Dunedan

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.

Zitieren

gepostet vor 14 Jahre, 10 Monate von Klaus

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°.

Zitieren

gepostet vor 14 Jahre, 10 Monate von Dunedan

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

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

Zitieren

gepostet vor 14 Jahre, 10 Monate von Klaus

und wer hat's erfunden? Die Kalifornier!