Problem mit 'writing-mode: sideways-lr'

  • Hiho :)
    Ich habe eine Webapp, die auf einem Spieltisch (ein Couchtisch mit eingebautem Bildschirm mit einem Raspberry Pi) laufen soll. An jeder Seite am Bildschirmrand habe ich einen Balken mit Text. Der Text soll jeweils zentriert sein und zum Bildschirmrand hin zeigen. Der Text am unteren Bildschirmrand zeigt ohnehin zum Rand. Für die anderen drei Seiten habe ich folgenden CSS-Code:

    Code
    transform: rotate(180deg);
    transform-origin: 50% 50%; /*oben*/
    
    
    writing-mode: sideways-lr; /*rechts*/
    
    
    writing-mode: vertical-rl; /*links*/

    Dies funktioniert im Firefox problemlos. Ich würde auf dem Raspi aber gerne Chromium nutzen, welcher aber die Zeile für 'rechts' nicht unterstützt.
    Gibt es eine Alternative für diese Zeile, die auch unter Chromium läuft? Ich habe es schon mit 'transform' versucht, dabei wird aber der ganze Balken und nicht nur der Text rotiert.

    Edit: der Balken ist ein 'section'-Element, welches ein 'span'-Element mit dem Text enthält. Wenn ich die 'transform'-Eigenschaft auf das 'span'-Element anwende hat es keine Auswirkung.

    2 Mal editiert, zuletzt von MrChangeLog (26. Januar 2018 um 11:11)