Private Anfrage erhalten: Wie dreht man die Überschrift

[Rolf B]

Hallo alle,

ich hatte eine Anfrage per PN. Darin wurde um Hilfe für ein Layout dieser Art gebeten:

Der Headerbereich war als SVG dargestellt. An Hand einer @media-Abfrage sollte bei genügend breitem Bild der Header links an die Seite rücken. Ich wurde gefragt, wie man das im SVG hinbekommt.

Da sich die fragende Person direkt an mich gewendet hat, nenne ich keine Namen. Aber ich möchte meinen Lösungsvorschlag vorstellen, falls es weitere Ideen dazu gibt.

Es wäre sicherlich irgendwie machbar gewesen, mit @media-Abfragen im SVG Element zu arbeiten. Man hätte das SVG auch rotieren können. Das fand ich aber beides wenig responsiv und vor allem nicht zugänglich (bzw. man hätte den SVG Inhalt als alt-Text doppeln müssen). Deswegen habe ich Abstand davon genommen und eine reine HTML Lösung vorgeschlagen.

Normalfall: schmaler Viewport. Header steht oben.

Enhancement-Fall: breiter Viewport. Header kommt nach links und wird senkrecht gestellt.

Dazu habe ich:

• den Body als Grid layoutet
• bei breitem Bild den head-Bereich nach links gestellt
• mit writing-mode:vertical-rl und text-orientation:sideways die Überschrift senkrecht gestellt
• mit rotate:180deg dafür gesorgt, dass sie so herum steht, wie sich der Autor das vorstellt. Mit writing-mode und text-orientation habe ich das nicht lösen können.

Fixe Abmessungen, die ich für eine SVG Implementierung gebraucht hätte, entfallen damit. Und der Text im Header kann obendrein noch umbrechen, wenn der Viewport noch schmaler wird.

body {
  display: grid;
  height: calc(100vh - 16px);
  grid: "head" auto 
        "main" 1fr
        "footer" auto / 1fr;
}
@media (min-width: 50em) {
  body {
    grid: "head main" 1fr
          "head footer" auto / auto 1fr;
  }  

  header {
    writing-mode: vertical-rl;
    rotate: 180deg;
    text-orientation: sideways;
  }
}

Nachtrag: text-orientation:sideways scheint unnötig, es gibt aber genügend Zeichen, die ohne diese Angabe nicht mitgedreht werden.

Ja, den body-margin habe ich als magic number drin, kann man verbessern. Den footer habe ich in meinem Fiddle noch mit drin, für die Attributierung meiner Textquelle.

So sieht's aus

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dazu habe ich

warum nicht eingfach TIL about text-orientation verlinkt, wo ich das alles gemacht hatte?

Kwakoni Yiquan

PS: Die Fortsetzung TIL about love minus zero/no limit^[1] ist zum Glück nicht mehr relevant. Da ging’s darum, dass für Internet Explorer right: 0 und right: 0% nicht dasselbe waren.

---

1. Titel (Rechenaufgabe) geklaut von Bob Dylan ↩︎

[Rolf B]

Hallo Gunnar Bittersmann,

warum nicht einfach TIL about text-orientation verlinkt,

weil es mein Gedächtnis überfordert, ein Announcement von vor 4 Jahren zu erinnern. Und ich nicht im Forum gesucht habe, ob da ein Altbeitrag hilft. Das hätte die anfragende Person natürlich tun können, dort war aber mit SVG der Ansatz so daneben, dass es wohl am passenden Stichwort gefehlt hätte.

Bei deinen Notist-Folien kommt hinzu, dass sie nicht für eine isolierte Betrachtung erstellt wurden und deshalb ohne deine Tonspur sehr schwierig zu nutzen sind. Powerpoint kann Folien zweiteilen: Präsi und Vortrag. Die Präsi geht auf den Beamer, der Vortrag als Gedankenstütze auf den Referentenlaptop. Kann Notist sowas auch? Zumeist würden wohl ein paar Stichpunkte genügen.

PS: Wieso "musik" als Tag?!

Rolf

[Gunnar Bittersmann]

@@Rolf B

Powerpoint kann […] Kann Notist sowas auch?

Äpfel und Birnen?

Notist ist keine Plattform zum Erstellen von Präsentationen, sondern zum – ähm – Präsentieren und Archivieren von Präsentationen: Slides, Video des Vortrags, Links zu Ressourcen, Codepens, Tweets oder Tröts.

Eine Möglichkeit ist es, ein PDF hochzuladen, das dann in einzelne Bilder zerlegt wird. Das PDF kann aus Outlook oder Keynote^[1] generiert oder sonstwie zusammengehäkelt worden sein.

Oder man gibt einen URL zu einer Website an, worauf die Präsentationen läuft (auf Notist dann im Iframe) – wie ich’s am 15., 16. und 17. Dezember (allerdings in verschiedenen Jahren) sowie am 4. April (2011 – mein erster Auftritt auf einer Bühne ohne Gitarre) gemacht habe.

Folien zweiteilen: Präsi und Vortrag. Die Präsi geht auf den Beamer, der Vortrag als Gedankenstütze auf den Referentenlaptop. Kann Notist sowas auch?

Keynote kann das auch.

Bei Notist kann man auch zwei PDFs hochladen – eins für die Slides, eins für die Notizen, woraus dann die Alternativtexte für die Slides generiert werden. Und du kann dir die Notizen durch Click auf (View all slides) anzeigen lassen – sofern vorhanden …

Zumeist würden wohl ein paar Stichpunkte genügen.

… bei mir meist spärlich, da ich i.d.R. im Kopf habe, was ich erzählen will, und keine Vortragsnotizen habe.

Bei deinen Notist-Folien kommt hinzu, dass sie nicht für eine isolierte Betrachtung erstellt wurden und deshalb ohne deine Tonspur sehr schwierig zu nutzen sind.

Ja, das ist dann leider so.

---

PS: Wieso "musik" als Tag?!

Auch wenn man das Gekrächze von Bob Dylan^[2] nicht Musik nennen mag, so ist es doch mit Musik hinterlegt. 🤪

Kwakoni Yiquan

---

1. warum ich vor Jahren von Powerpoint auf Keynote gewechselt bin und den Schritt nie bereut habe ↩︎

2. der vermutlich beste Singer/Songwriter, der nicht singen kann ↩︎

[Matthias Scharwies]

Servus!

@@Rolf B

Dazu habe ich

warum nicht eingfach TIL about text-orientation verlinkt, wo ich das alles gemacht hatte?

Das gibt's auch im Wiki: CSS/Tutorials/Schreib-_und_Leserichtung#vertikale_Image_Credits Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

den Wiki-Artikel hatte ich in meiner Antwort an die anfragende Person verlunken. Allerdings zur Überschrift writing-mode. Und gerade habe ich gemerkt, dass text-orientation:sideways gar nicht nötig ist. Das ist nur erforderlich, wenn mathematische Symbole oder Notenzeichen im Text sind - die sind offenbar vom Unicode Konsortium blöd eingestuft worden und werden vom writing-mode nicht mitgedreht.

Das von Dir verlinkte Anwendungsbeispiel im Wiki hat übrigens die gleiche Macke wie die Noti.st Folien: Keine Kommentare.

Das Fiddle sollte adressieren, wie man das basierend auf der Viewportbreite umschaltet und dass man kein SVG dafür braucht. Der Noti.st Link hätte das, selbst bei vollständigem Audiomitschnitt von Gunnars Vortrag, nicht hinreichend erklärt, denke ich.

Mal gucken, ob die Person jetzt hier weiter mitdiskutiert. In meiner PN hatte ich mitgeteilt, dass wir nicht privat beraten möchten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Und gerade habe ich gemerkt, dass text-orientation:sideways gar nicht nötig ist. Das ist nur erforderlich, wenn mathematische Symbole oder Notenzeichen im Text sind

Das stimmt nicht – wie auch meiner hier im Thread und auch im Wiki verlinkten Präsentation zu entnehmen ist.

die sind offenbar vom Unicode Konsortium blöd eingestuft worden

Das glaub ich nicht.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Das stimmt nicht

Ja, danke für die irreführende Korrektur. Zuerst hatte ich das so gelesen, dass Du der Tatsache widersprichst, dass ± oder ♯ nicht gedreht würden.

Aber nachdem ich mir jetzt den Notist angetan habe: Ja, es sind noch mehr Zeichen. Wie bei Dir auf Seite 11/13/14 mit dem ©️ Zeichen zu sehen. Verdammich, das Ding ist doch nun überhaupt nicht ungewöhnlich. Ich habe den Nachtrag mal geändert.

Aber wieso sollte es nicht blöd sein, diese Zeichen so einzustufen? Mathematische Symbole oder das ©️ können doch sehr gerne in normalem Fließtext auftauchen, warum sind die so eingestuft, dass der Default text-orientation:mixed sie nicht mitdreht? Die Spec schreibt:

Typographic character units from horizontal-only scripts are typeset sideways. (...) Typographic character units from vertical scripts are typeset with their intrinsic orientation.

Sind ±, ♯ oder ©️ intrinsisch vertikal? Oder lautet die Ausrede, dass das keine typographischen Zeichen sind und deshalb von dieser Aussage nicht betroffen sind? Ich habe noch keinen chinesischen Formelsatz gesehen. Schreiben die die Ziffern und Operatoren übereinander?

Mann mann mann, ist das alles kompliziert…

Wie sehe ich es einem Zeichen denn nun an, welche intrinsische Ausrichtung es hat? Ich guck ja meistens bei compart nach, da finde ich keinen Hinweis dazu.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber wieso sollte es nicht blöd sein, diese Zeichen so einzustufen?

Das Unicode Consortium kategorisiert Zeichen nach deren Eigenschaften, nicht nach deren irgendwo gewünschter Orientierung.

Wenn, dann ginge deine Kritik eher Richtung CSS Working Group. Hier sollten wir im Hinterkopf haben, dass sie ganze Sache nicht entwickelt wurde, damit wir damit Bildnachweise vertikal schreiben können, sondern primär für die Darstellung von Wörtern in (bspw.) lateinischer Schrift in vertikal geschriebenem CJK^[1].

Kwakoni Yiquan

---

1. CJK: Chinesisch, Japanisch, Koreanisch ↩︎

[Rolf B]

Hallo Gunnar,

Das Unicode Consortium kategorisiert Zeichen nach deren Eigenschaften, nicht nach deren irgendwo gewünschter Orientierung.

Ja, gut. Aber ist die Eigenschaft "intrinsisch horizontal" oder "intrinsisch vertikal" nicht Teil der Eigenschaften eines Zeichens? Das hätte ich jetzt als Teil des CLDR angesehen, und irgendwoher muss der Browser es ja auch wissen.

Rolf

[nix]

… sondern primär für die Darstellung …

ist aber da nicht unkritisch zu sehen. Denn: das Drehen von Inhalten, ob nun Text oder nicht, ist doch schon zu Gensfleischs’ Zeiten praktiziert worden. Und da wird es aber mit CSS nicht einfach: transform: rotate dreht zwar, aber der Fluß ingesamt wird damit gequält. (Wobei sich alle „Transformer“ da nicht sehr einfühlsam bzw. rücksichtsvoll gegenüber ihres Umfeldes verhalten.)

[Gunnar Bittersmann]

@@nix

das Drehen von Inhalten, ob nun Text oder nicht, ist doch schon zu Gensfleischs’ Zeiten praktiziert worden

Du sprichst mal wieder in Rätseln; aber dieses kann ich lösen. Was für ein Glück, dass wir das SELFHTML-Treffen letztens in Mainz hatten. Für alle, die nicht dabei waren (und für alle, die dabei waren, bei denen aber von der Stadtführung nicht viel hängengeblieben ist 😏): Gensfleisch.

Und da wird es aber mit CSS nicht einfach: transform: rotate dreht zwar, aber der Fluß ingesamt wird damit gequält. (Wobei sich alle „Transformer“ da nicht sehr einfühlsam bzw. rücksichtsvoll gegenüber ihres Umfeldes verhalten.)

Man kann auch argumentieren, dass sie sich sehr einfühlsam bzw. rücksichtsvoll vehalten, indem sie ihr Umfeld einfach machen lassen, was es will. Sie beeinflussen den Fluss überhaupt nicht, was das Gegenteil von quälen ist.

Kwakoni Yiquan

[nix]

Da sic hier in der Umgebung ab und an schon mal Hadern auf Lumpen herumdrucken, war zu erwarten, daß sich nicht „das häufigste Wort an der Zonengrenze“ reindrückt. 😆

Und die Frage der Rücksicht wäre ob Ignoranz Bestandteli derseben sein kann — oder sein muß. Was dann aber, festgeschrieben, wiederum rücksichtslos gegenüber ihnen wäre?

[tk]

Moin,

ich hatte eine Anfrage per PN. Darin wurde um Hilfe für ein Layout dieser Art gebeten:

zur Info: das gleiche Thema wird bereits auf html.de behandelt.

Gruß
Tobias

[Rolf B]

Hallo tk,

danke für den Hinweis.

Aber es ist mir doch eine innere Freude, dass Sempervivium letztlich die gleiche Antwort gegeben hat wie ich 😀.

Rolf

[Matthias Scharwies]

Servus!

So sieht's aus

Auf dem Surface (12''-Monitor) ist die Ansicht ziemlich klein und deshalb hat der head 4 Zeilen.

Da müsste man mit getBoundingClientRect die benötigte Höhe ermitteln und dann ins CSS schicken.

Siehe JavaScript und CSS.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

nee, mit Grid und writing-mode geht das alles automatisch. Siehe mein Fiddle. Oder klappt das auf deinem Surface nicht?

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

nee, mit Grid und writing-mode geht das alles automatisch. Siehe mein Fiddle. Oder klappt das auf deinem Surface nicht?

Rolf

Ist aber nur so, weil der Platz im Fiddle so klein ist. Als „Vollbild“ geht's.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Ups?! Wenn ich die Höhe reduziere, sieht das bei mir so aus:

Der verwaiste Bindestrich stört. Keine Ahnung, ob es CSS Tricks gibt, diesen nur erscheinen zu lassen wenn alles auf eine Zeile steht. Außer mit einer Container-Abfrage auf den header, vielleicht. Inline-size zu klein: Unterstelle den Umbruch und mach den Strich weg.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Der verwaiste Bindestrich stört.

Stimmt. Du solltest wissen, dass da kein Bindestrich hingehört, sondern ein Gedankenstrich – ein Halbgeviertstrich (so wie hier).

Keine Ahnung, ob es CSS Tricks gibt, diesen nur erscheinen zu lassen wenn alles auf eine Zeile steht.

Den Gedankenstrich(!) nicht zwischen die spans tun, sondern mit ins erste:

<p>
  <span>Keep the future alive&nbsp;&ndash;</span>
  <span>Deep Space 9, Season 5, Episode 6</span>
</p>

---

Außer mit einer Container-Abfrage auf den header, vielleicht.

BTW, anstatt header scheint mir hier hgroup angebracht.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Den Gedankenstrich(!) nicht zwischen die spans tun, sondern mit ins erste:

<p>
  <span>Keep the future alive&nbsp;&ndash;</span>
  <span>Deep Space 9, Season 5, Episode 6</span>
</p>

Was man noch tun kann: Wenn sich geignete Media-Querys dafür finden lassen, für kleine Viewports die beiden spans auf display: block setzen und den Gedankenstrich (der dann mit dem NBSP in einem span stecken muss) ausblenden. Wenn zwischen „alive“ und „Deep“ garantiert ein Zeilenumbruch ist, braucht man den Gedankenstrich ja nicht unbedingt.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

das war jetzt mein Beispieltext, aus Memory Alpha kopiert. Für eine allgemeine Lösung kann man - meine ich - nicht mit angepassten Mediaqueries für jede Überschrift arbeiten, das wäre nicht zuzumuten. Ich würde es, wenn es meine Seite ist, mit einen ResizeObserver lösen.

Das Problem dürfte beim Fragesteller nicht bestehen, weil genug Text da ist und keine Höhenlimitierung auf dem body ist. Ich habe nämlich jetzt einen ersten Implementierungsversuch bekommen, der sich "Wandzeitung" nennt, und soll was dazu sagen. Das lehne ich aber ab und verweise hierher. Seid gnädig!

Rolf

[nix]

hgroup hat aber, spät wiederbelebt, doch an Glanz eingebüßt:

header { font-size: 5rem; }
header header { font-size: 80%; }

legt sich IMHO nämlich mit hgroup und h1…6 auf einmal an, hätte auch vor h7 usw. keine Angst. Spart man so schließlich auch das ständige Durchzählen der Hierarchien.^[1]

So viele h? h1: „Das ganz große und richtig dicke Lexikon“ h2: Ausgabe Jul. 2037 h3: Abschnitt „Bea … Bel“ h4: Artikel h5: Artikel-Gliederung

Ich weiß, das sind auch nur fünf, die ganz schön aufgeblasen daher kommen. (Weshalb ich dann auch nicht unter dem Schlagwort „Arznei“ – “medizinsich“ - „Humanmedizin“ – „aktuelle Situation“ – Rezept/Verschreibungspflicht – Packung –Beipackzettel - Warnhinweise …)

Man entkommt so zumindest dem Gemecker über „h1 h5 h2 h6“^[2] und man muß beim (mehr oder weniger) kreativen Umstellen von Textabschnitten nicht unbedingt auf mehr achten als daß man dabei zueinander gehörende <tag> … </tag> ausschneidet und an passender Stelle (also vmtl. einer, die auch Blöcke verdauen mag) wieder einfügt.

---

1. Was habe ich schon das gehaßt! Damals, als ich noch dazu genötigt wurde, mich damit abzugeben. Eine der ersten Aktionen nach „administrativen Eingriffen“ („oh, toll, ein ganz neues und vieeeel besseres Wort-Programm“) den „h1526-Müll“, der dabei ohne Not mitgeliefert wurde, in eine grundsätzlich erst mal hierarchische Form (vgl. CSS oben) zu bringen … ↩︎

2. … Sie sollten keine Lücken in der Hierarchie … ↩︎

[Rolf B]

Hallo nix,

Dein Vorschlag ist weder praktikabel noch erlaubt.

header header { ... }

Mein Mathelehrer selig pflegte zu Dingen dieser Art zu sagen: Wer das tut, gehört standrechtlich mit der Bratwurst erschossen

Die HTML Spezifikation, header Element besagt: Ein header-Element darf weder ein header- noch ein footer-Element als Kind haben

Praktikabel deshalb nicht, weil man die Sections schachtelt, wenn man die Dokumentgliederung in der HTML Hierarchie abbilden will, aber nicht die Header. Und die h1,h2,h3...-Elemente muss man immer noch korrekt verwenden, ein generisches "hx" Element gibt es nicht. Es sei denn, du fummelst Dir etwas mit p Elemente zurecht, mit role="heading" und automatischer level-Zuordnung. Aber mich deucht, das wäre übertrieben.

Rolf

[Raketenwilli]

Brrrrr.

Was passiert denn, wenn man das Smartphone/Laptop dreht um die Überschrift und den Sub lesen zu können?

[Rolf B]

Hallo Raketenwilli,

Beim Smartphone sollte das wegen der @media Abfrage nicht passieren.

Beim Tablet? Hm. Man kann ja auch den Kopf drehen 😉. Es ist die Überschrift. Die hat der Screenreader schnell vorgelesen und dreht sie dabei nicht einmal!

Rolf

[Rolf B]

Hallo Matthias,

Ich habe das mal Mozilla gemeldet

Rolf

[Felix Riesterer]

Lieber Rolf,

ich hatte eine Anfrage per PN. Darin wurde um Hilfe für ein Layout dieser Art gebeten:

wie unverschämt! Und Du hast nicht darauf gedrungen, dass die Person das in anständiger Form öffentlich fragt? Gefällt mir nicht.

Bei html.de hat man auch Wind von dieser Doppelbefragung bekommen und findet das „vorsichtig ausgedrückt - nicht die feine englische Art“.

Wie gut, dass man Dich gefragt hat und nicht mich. Meine Antwort wäre kurz und anstrengend gewesen.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Rolf B

ich in meinem Fiddle

Meine Abneigung gegen diese Plattform bleibt ungebrochen. Nicht nur, dass sie nicht meine Einstellungen respektieren, es gibt auch keine Möglichkeit, dass ich mir selbst den Code auf für mich gut lesbar stellen kann. Das heißt für mich: light mode, dunkel auf hell.

JSFiddle ist was für Nerds, die in ihrem Keller hocken, nichts für mich.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

dass jsFiddle den Light-Mode rausgeschmissen hat, hat mich auch genervt. Aber angeblich will den ja keiner. Was mich auch nervt, ist, dass es regelmäßig hängt. Aber keine Ahnung, vielleicht tut CodePen das für Non-Pro User ja auch.

Codepen ist mir zu schwergewichtig, viel zu viel Gedöns drumrum, ich bin ständig am Suchen, wo jetzt was sein soll. Die 2x2 Ansicht, die ich bei jsFiddle liebe, fehlt ganz. Und manches, was es geben soll (z.B. Debug Mode außerhalb von Pro) finde ich gar nicht. Das Auto-Run „Feature“ nervt mich massivst. Ich hasse es, vor allem, wenn man JavaScript baut. Und man muss es für jeden Pen einzeln abschalten. Nee, sorry, nicht mein Ding.

Rolf

[Gunnar Bittersmann]

@@Rolf B

dass jsFiddle den Light-Mode rausgeschmissen hat,

Waaas? Deppen!

hat mich auch genervt. Aber angeblich will den ja keiner.

JSFiddle – eine Plattform von Nerds für Nerds.

Was mich auch nervt, ist, dass es regelmäßig hängt. Aber keine Ahnung, vielleicht tut CodePen das für Non-Pro User ja auch.

Nö. Ich bin da auch nur Non-Pro.

Die 2x2 Ansicht, die ich bei jsFiddle liebe, fehlt ganz.

Was dem einen sin Uhl, ist dem andern sin Nachtigall. Ich finde die 2×2-Ansicht scheußlich; vermisse ich bei CodePen überhaupt nicht.

Das Auto-Run „Feature“ nervt mich massivst. Ich hasse es, vor allem, wenn man JavaScript baut.

Kann man abschalten.

Und man muss es für jeden Pen einzeln abschalten.

Ach so, ja.

Kwakoni Yiquan