CSS Vertikalen text in th element mittig zentrieren

[JanKrohn]

Ich hab da mal ein CSS-Problem, das sich als sehr hartnäckig erweist...

Die vertikalen Texte in den th-Elementen hätte ich gern genau in der Mitte. Die sonst üblichen Methoded (margin, padding etc.) funktionieren allerdings nicht, ich vermute, gerade weil die Texte vertikal sind:

http://www.vic-fontaine.com/d_ent.php

Noch irgend eine Idee dazu...?

Gruß,
Jan

 

[Daaron]

Ich seh grad auf Chrome v24 gar keine Drehung... scheinbar macht der deinen writing-mode nicht mit.

Aber für dein Problem gibt es eine viel elegantere Lösung: wende "transform: rotate(90deg)" an.

 

[Standar(D!)]

opera 12.12 zeigt auch keine Drehung

 

[palace4d]

Entweder die CSS Lösung von Daaron, mit den dazugehörigen Vendor Prefixe.
Oder mit SVG.

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <text x="20" y="20" writing-mode="tb-rl"> Text </text>
 </svg>

 

[Daaron]

Hm, interessante SVG-Lösung, sowas werd ich mir für komplexere Aufgaben mal merken. Aber wie ist die semantisch zu bewerten? Ein <th> - Element, bzw. dessen Inhalt, ist ja semantisch sehr wichtig. Kann ein Screen Reader oder auch ein Suchmaschinen-Crawler mit dem Textinhalt eines <svg><text> umgehen?

 

[JanKrohn]

Danke schon mal für den Input.

Transform: rotate(90deg) hatte ich gestern schon ausprobiert. Der Text ist dann zwar mittig, allerdings ignoriert die IE dann komplett die vorgegebenen Zellengrößen, und vergrößert jede Zelle so, als ob der Text horizontal wäre.

SVG hat wie schon angesprochen ein semantisches Problem. Ansonsten vom optischen her die schönste Lösung...

Muss mich heute Abend wohl noch mal mit dem rotate auseinandersetzen, da Chrome den writing-mode nicht unterstützt...

Jan

 

[Daaron]

Bei Problemen mit Spaltenbreiten hilft <colgroup> + <col>
http://www.w3schools.com/tags/tag_colgroup.asp

 

[palace4d]

Screenreader können SVG interpretieren und Google indiziert SVGs schon seit einiger Zeit.
Leider unterstützt erst der IE9 SVGs, deshalb ist die Technik bei B2B Umsetzungen hinfällig, da leider noch IE7 Support... .

 

[Daaron]

ja, aber da kannste auch nicht mit CSS3 ankommen.... wobei du für ne CSS-Lösung wahrscheinlich viel leichter n JS-Fallback schreiben kannst.

 

[palace4d]

Für wenige CSS3 Effekte gibt es wenigstens noch die IE Filter. Um SVG im IE anzeigen zu lassen benötigt man Rahpael, Ample SDK oder Bonsai.js. Die Libs übersetzen dann die SVG Anweisungen in VML.

 

[JanKrohn]

So, rotate hab ich aufgegeben. Width und height scheinen immer relativ zur Schreibrichtung genommen zu werden, was in einer Tabelle, in der zwei verschiedene Rotationen vorhanden sind, nicht mehr kontrollierbar bleibt.

Writing-mode, und ein etwas unschöner Hack funktionieren zumindest in MSIE. Andere Browser werden sicherlich in den nächsten Versionen irgendwann supported, schließlich ist writing-mode eine valides CSS3-Eigenschaft...

SVG hat mir übrigens riesige Blöcke von ca. 10em x 10em reingeknallt, unabhängig von der in col definierten Weite...

Danke nochmals!
Jan