nicht angemeldet
Text drehen in einem Grid-Layout
Gunnar BittersmannHallo Forum,
ich habe auf Basis des Grid-Layout 6 (siehe Link) ein Layout angepasst. Ich möchte nun in einem der aside-Felder (links) den Text um 90 Grad nach links drehen.
Das Ergebnis mit
#most-clicked p { -ms-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }
sieht aber leider so aus:
Wie kann ich es schaffen, dass der Text nachher tatsächlich hochkant in einer Zeile in dem Feld erscheint? Ich denke, man müsste dem Browser sagen, dass der Text aus dem Grid-Raster "rausfließen" soll. Geht sowas...?
Vielen Dank für Eure Hilfe
Ralf
-
@@Ralf E
Wie kann ich es schaffen, dass der Text nachher tatsächlich hochkant in einer Zeile in dem Feld erscheint? Ich denke, man müsste dem Browser sagen, dass der Text aus dem Grid-Raster "rausfließen" soll.
Nein. Man müsste dem Browser sagen, dass der Text vertikal dargestellt werden soll.
Geht sowas...?
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Das (und wie) es geht hat Gunnar Dir mit dem "display:inline" bereits richtig gezeigt. Allerdings möchte ich schon jetzt auf etwas hinweisen, was Du wohl auch selbst schnell feststellen wirst: Das "Nutzungserlebnis" einer Mehrheit der Besucher der Webseite wird durch den um 90° gedrehten Text negativ beeinflusst. Ist es nur "Zierde" kann man das stehen lassen, aber bei einem Menü oder auch nur bei Ausgaben mit einem reellen Informationswert ist es eine nur scheinbar gute Idee.
-
@@Regina Schaukrug
Das (und wie) es geht hat Gunnar Dir mit dem "display:inline" bereits richtig gezeigt.
display: inlineist nur ein Teil davon. Der andere ist, eben nicht den Text um 90° zu drehen, sondernwriting-mode: vertical-rl(bzw. das IE-Pendant) zu verwenden und dann bei Bedarf den Text um 180° zu drehen (was an den Ausmaßen der Box nichts ändert).Dabei fällt mir noch ein: Die Drehung um 180° darf man natürlich nur machen, wenn
writing-mode: vertical-rl(bzw. das IE-Pendant) unterstützt wird. Das sollte also in einem@supports-Block stehen. Nachtrag: Im Pen jetzt gemacht.Man kann sich überlegen, ob man den Text in dem Fall dann vertikal, aber andersrum (nicht um 180° gedreht) möchte oder gar nicht vertikal.
Im zweiten Fall kommt
writing-mode: vertical-rlmit in den@supports-Block. Das IE-Pendant ist dann hinfällig.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@@Gunnar Bittersmann
Dabei fällt mir noch ein: Die Drehung um 180° darf man natürlich nur machen, wenn
writing-mode: vertical-rl(bzw. das IE-Pendant) unterstützt wird. Das sollte also in einem@supports-Block stehen. Nachtrag: Im Pen jetzt gemacht.Man kann sich überlegen, ob man den Text in dem Fall dann vertikal, aber andersrum (nicht um 180° gedreht) möchte oder gar nicht vertikal.
Im zweiten Fall kommt
writing-mode: vertical-rlmit in den@supports-Block. Das IE-Pendant ist dann hinfällig.Gunnar, was erzählst du da für einen Unsinn? „In dem Fall“ meint hier nicht: wenn
writing-mode: vertical-rlunterstützt wird. Das wird ja sowieso nur von Browsern interpretiert, die dieses Feature unterstützen. Da ist es gleich, ob das in einem@supports(writing-mode: vertical-rl)-Block steht oder nicht.Was eigentlich mit „in dem Fall“ gemeint war: wenn
@supports()unterstützt wird. Also nicht im IE. (Aber in Edge, Firefox, Safari, Chrome.)Für IE muss man sich überlegen, ob man den Text vertikal (aber eben andersrum als in anderen Browsern) haben möchte oder ganz normal aufrecht.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@@Gunnar Bittersmann
Dabei fällt mir noch ein: Die Drehung um 180° darf man natürlich nur machen, wenn
writing-mode: vertical-rl(bzw. das IE-Pendant) unterstützt wird.Für IE muss man sich überlegen, ob man den Text vertikal (aber eben andersrum als in anderen Browsern) haben möchte oder ganz normal aufrecht.
Nö, muss man gar nicht, da die Unterstützung von
-ms-transform(ab IE 9) erst nach der Unterstützung von-ms-writing-mode(ab IE 6 oder sogar noch früher) implementiert wurde.Die Deklaration
-ms-transform: rotate(180deg);(mit Präfix!) sollte also außerhalb eines@supports-Block stehen dürfen.Im Codepen ergänzt.
In IE 8 und früher ist der Text dann eben vertikal, aber andersrum als in anderen Browsern. Die Relevanz ist kleiner als ε.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
@@Gunnar Bittersmann
Nachtrag: Im Pen jetzt gemacht.
Außerdem nachgeholt:
-webkit-writing-modemit Präfix, damit’s auch in Safari funktioniert.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
@@Regina Schaukrug
Das "Nutzungserlebnis" einer Mehrheit der Besucher der Webseite wird durch den um 90° gedrehten Text negativ beeinflusst.
Kann sein. Oder auch nicht. Müsste man sich im Kontext ansehen – aber auf jeden Fall im Auge haben.
Etwas verwirrend finde ich, dass der Textcursor gedreht ist (in meinem Pen bei „Turn around“), der Pointer bei den Links jedoch nicht.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo zusammen,
vielen Dank für Eure Antworten und auch die Kritik zu meinem Vorhaben. Ich werde das mal testen, ob es so funktioniert. Es sollen hier übrigens tatsächlich nur ein paar "wichtige" Links, die es natürlich im normalen Menü auch gibt, als eye-catcher so dargestellt werden. Auf einem Entwurf im Zeichenprogramm sieht es gut aus... 😉
Viele Grüße
Ralf E
-
-
-