Wie findet man die Höhe eines Textes im Flex-Kontainer nur mit CSS zur Ausrichtung heraus?

[MB]

moin,

Code Darstellung:

.cm-header {
  position: relative;
  display: flex;
  flex-flow: row;
}

<!-- Flex Kontainer -->
<span class="cm-header">
  <!-- Flex-Element before: -->
  <!-- Flex-Element Überschrift -->
  <!-- Flex-Element after: -->
</span>

Meine Absicht:

• Ich möchte das Flex-Element .cm-header::after mit text-valign: baseline; auf einer horizontalen Linie zum Flex-Element .cm-header ausrichten.
• Ich möchte mit .cm-header::after ein quadratische Fläche definieren, welches sich zur Text höhe des .cm-header-Element orientiert.

Mein Problem:

• text-valign-Property funzt irgend wie nicht 😕
• Das auslesen von der Text höhe des .cm-headers krige ich nicht auf die kette 😕.

Meine Frage:

• Wie krige ich die dynamische Höhe des Textes im .cm-header-Element raus, sodass ich dann mit der dynamischen höhe des Textes eine quadratische größe des .cm-header::after-Element definieren kann.
• Wie kann man .cm-header::after-Element vertikal zur .cm-header ausrichten wenn nicht durch text-valign: baseline; oder geht das mit Kniffen doch 😃???

Meine provisorische Lösung:
Ich habe eine leider eine fixe Breite in px und eine dynamische Höhe 1em des .cm-header::after-Elementes zur der dazugehörigen .cm-header-Element verwendet. Ich habe mit display: inline-block; des .cm-header::after-Elementes gearbeitet, sodass die vertikale Zentrierung des .cm-header::after-Elementes zum .cm-header-Element einiger Maße ok ist, leider aber nicht zum Text der .cm-header-Element selbst 😕.

Mein Ziel:
Durch die Veränderung der Breite des Viewports ordnen sich die Flex-Elemente über @media in der Reihenfoge anders an.

lgmb

[Rolf B]

Hallo MB,

• text-valign gibt's nicht. Es gibt text-align und valign vertical-align.
• ::before und ::after nehmen meiner Erinnerung nach nicht am Flex-Layout teil, das verifiziere ich aber noch mal war ein Irrtum.

Ich möchte mit .cm-header::after ein quadratische Fläche definieren, welches sich zur Text höhe des .cm-header-Element orientiert.

Klingt nach einer Anwendung für aspect-ratio: 1/1;.

Rolf

[MudGuard]

Hi,

• text-valign gibt's nicht. Es gibt text-align und valign.

valign gibt's in css auch nicht, das heißt dort vertical-align.

In HTML gibt/gab es ein Attribut valign, IIRC bei th und td.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MB,

sieht so aus als gänge das nicht.

Grund ist, dass die Flexbox noch keine definitive Höhe hat, wenn die Größe des ::after bestimmt wird.

Wenn Du die Höhe der Flexbox explizit festlegst, dann geht es.

Höhen bestimmen sich entweder von außen nach innen (das äußere Element bekommt eine feste Höhe und die inneren berechnen ihre Höhe basierend darauf) oder von innen nach außen (das innere Element bekommt eine feste Höhe und die drumherum haben eine auto-Höhe und legen sich mit Padding, Border und Margin drumherum). Was Du bräuchtest, wäre eine Kombination: die Flexbox bestimmt ihre Höhe an Hand des Inhalts (von innen nach außen) und das ::after-Element orientiert sich an der Flexbox (von außen nach innen).

Soweit ich weiß, tun die Browser das nicht, weil das zu Endlosschleifen im Layout führen kann.

Ein align-self:stretch auf dem ::after hilft auch nicht, weil der stretch nachträglich passiert und sich die Breite dann nicht mehr anpasst, trotz aspect-ratio.

Ich würde sagen: Size-Observer und JavaScript.

Rolf

[Rolf B]

Hallo MB,

das mit dem ResizeObserver ist auch nicht so einfach. Dadurch, dass Du eine baseline-Ausrichtung möchtest, darfst Du dem Rechteck nicht die Höhe der Flexbox geben.

Ist die Flexbox bspw. 20 Pixel hoch, liegt die Baseline irgendwo bei 17px. Wo genau, liegt am Font. Nehmen wir mal an, es wären 17. Dann hat das ::after unter sich 3px frische Pixel-Luft, d.h. wenn Du es nun 20px hoch machst, braucht die Flexbox 23px. Was einen Resize auslöst, der das ::after 23px hoch macht. Was einen Resize auslöst, der... und so weiter.

Und da man an ::after-Elemente auch nicht rankommt (weil es die pseudo()-Methode, die in der Spec schon steht, noch nicht gibt), kannst Du auch nicht die echte Position des Elements abfragen und so die Differenz zwischen Bottom und Baseline bestimmen. Dafür brauchst Du ein Dummy-div, das in der Flexbox versteckt ist. Meine Versuche sind allerdings noch nicht wirklich erfolgreich und ich muss mich jetzt um andere Dinge kümmern.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Klingt nach einer Anwendung für aspect-ratio: 1/1;.

Klingt nach höherer Mathematik: 1/1 ist gleich 1.

🖖 Живіть довго і процвітайте

[Thomas]

<span class="cm-header">Hamburgers</span>

.cm-header {
    align-items: baseline;
    display: flex;
}

.cm-header::after {
   aspect-ratio: 1 / 1;
   background: currentcolor;
   block-size: 1em;
   content: "";
}

Sollte tun, was du beschreibst. (Randnotiz: .cm-header möchte wahrscheinlich ein header oder ein h1–h6 Element sein.)

[Rolf B]

Hallo Thomas,

Ich möchte mit .cm-header::after ein quadratische Fläche definieren, welches sich zur Text höhe des .cm-header-Element orientiert.

::after { block-size: 1em; }
Sollte tun, was du beschreibst.

Tut aus meiner Sicht genau das Gegenteil: Die Flexbox orientiert sich am ::after-Element.

Rolf

[MB]

moin,

[…] Sollte tun, was du beschreibst. […]

Hat @Rolf B auch erwähnt. Schau's mir jetzt an. Vielen Dank !!!

[…] (Randnotiz: .cm-header möchte wahrscheinlich ein header oder ein h1–h6 Element sein.)

Jo, is es 😀👍. Ich hab fast n TAG damit verbracht meine Eingangsfrage Wie findet man die Höhe eines Textes im Flex-Kontainer nur mit CSS zur Ausrichtung heraus? zu stellen 😓. Diesbezüglich habe ich alles an meinen gecodeten CSS als konkreten Sachverhalt rausgeholt, was es rauszuholen gab. Jedoch habe ich das alles spät Abends wieder verworfen und nur die essenziellen Dinge herausgearbeitet. Das wäre zu aufbauschent und für euer Verständnis nicht förderlich gewesen. Zumal je ausführlicher ich werde, um so unverständlicher ist mein Schwall an Worten 😭. Die fertige Fassung gibt in GitHub denke ich.

lgmb

[MB]

moin,

<span class="cm-header">Hamburgers</span>

.cm-header {
    align-items: baseline;
    display: flex;
}

.cm-header::after {
   aspect-ratio: 1 / 1;
   background: currentcolor;
   block-size: 1em;
   content: "";
}

[…] Sollte tun, was du beschreibst.[…]

nicht ganz… jedoch align-items: baseline; tut GENAU DAS was es soll!! Vielen Herzlichen Dank 😊👍!!!

Leider tut block-size und aspect-ratio nicht das von mir erwünschte resultat 😕 oder ich hab's falsch angewand 🙄.

lgmb

[Rolf B]

Hallo MB,

dieses Snippet tut - wie gesagt - das Gegenteil von deiner ursprünglichen Formulierung: Die Höhe der Flexbox passt sich an die Höhe des Quadrats an, und nicht das Quadrat an die Höhe der Flexbox.

1em ist auch zu viel. Mach das Ganze mal größer (font-size 400%), dann siehst Du das. Was Du bräuchtest, ist die Einheit cap (Höhe der Großbuchstaben im Font), aber die kennt nur der Firefox.

Eine saubere Lösung, die fontunabhängig die korrekte Texthöhe UND den Abstand Baseline zu Text-Bottom berücksichtigt, braucht JavaScript. Wobei auch die an die Buchstabenhöhe nicht herankommt. Das TextMetrics-Objekt aus dem Canvas-API könnte genug Informationen hergeben. Aber das lass ich jetzt liegen.

Rolf

[MB]

moin,

Meine Absicht:

• Ich möchte das Flex-Element .cm-header::after mit text-valign: baseline; auf einer horizontalen Linie zum Flex-Element .cm-header ausrichten.

Natürlich gibt's text-valign NICHT 🙄! @Rolf B und @MudGuard haben mich drauf aufmerksam gemacht! Danke 😊🙏!

gibt's nicht. Es gibt text-align und valign vertical-align

lgmb

[MB]

moin,

Mit simplen Ergänzung width: 1em; und height: 1em; im Pseudo-Selektor cm-header::after habe ich über position: relative; und display: inline; die fläche eines Quadrates bekommen passend zum Text des Flex-Kontainers .cm-header-Selektor. Danke für eure Unterstützung @Rolf B und @Thomas 😀👍!!!

lgmb

[Rolf B]

Hallo MB,

GELÖST:

nein, wirklich nicht. Das ist ein Workaround, der das Gegenteil von deiner Problemstellung tut, und NICHT die Lösung. Begründet habe ich das jetzt schon drei mal.

Danke für eure Unterstützung @Rolf B

die Du ignorierst

und @Thomas

der Dich auf dieses falsche Pferd gesetzt hat. Eine echte Lösung mit CSS braucht die cap Einheit oder JavaScript, das den Font ausmisst. Die Fontmetriken des Canvas reichen dafür aber auch nicht hin, und da es Dir ja offenbar egal ist, hake ich das Thema jetzt ab.

Rolf

[MB]

moin,

GELÖST:

nein, wirklich nicht. Das ist ein Workaround […]

Ich vermutete es, aber dennoch funzt es 🤷.

Eine echte Lösung mit CSS braucht die cap Einheit […].

Verstehe 🤔.

und da es Dir ja offenbar egal ist, hake ich das Thema jetzt ab.

…ja fürs erste. Bitte versteh mich nicht falsch. Ich will ja korrekten und sauberen Code schreiben. Aber aus meiner aktuellen Situation sind meine CSS-Files ok. Also nix für ungut 😉.

Schönes Wochenende.

lgmb

[Gunnar Bittersmann]

@@MB

Mit simplen Ergänzung width: 1em; und height: 1em;

Das, was du da machst, ist eben nicht simpel.

Du willst ein Quadrat? Eine Quadrat wird über eine Seitenlänge festgelegt. Eine, nicht zwei. Es sollte nicht zweimal 1em im Code auftreten. Wie hier ein single point of truth zu erreichen ist, wurde im Thread bereits genannt.

🖖 Живіть довго і процвітайте

[MB]

moin,

Wie hier ein single point of truth zu erreichen ist, wurde im Thread bereits genannt.

Sry, ich bin kein CSS Profi und habe nur bezogen auf CSS auch einen solchen Anspruch nicht. Ich greife hier in das CSS-Default-Theme einer bestehenden App ein und pfusche für meinen persönlichen Nutzen darin rum. Natürlich bin ich sehr Dankbar, dass ihr mich drauf Aufmerksam macht, dass es bessere Wege gibt um meine CSS Probleme zu lösen. Um auf die Wege zu gelangen, müsste ich das Profi Wissen von CSS erlernen, dann zur Festigung des gelernten CSS anwenden und mich komplett mit der CSS-Default-Theme der App befassen um effektiven CSS Code schreiben zu können, welches den SPOT Anspruch genügt und eine prifessionelle CSS-Erweiterung der App leisten zu können. Das benötigt viel Zeit. Mein CSS Basis Wissen reicht mir vollkommen aus um Lösung mit eurer Hilfe zu erarbeiten. Deswegen hatte ich Hier die Probleme geschildert. Nochmals Danke dafür.

lgmb

[Gunnar Bittersmann]

@@MB

Um auf die Wege zu gelangen, müsste ich das Profi Wissen von CSS erlernen, […] um effektiven CSS Code schreiben zu können, welches den SPOT Anspruch genügt

Nö.

Ich würde auch sagen, dass viele Profis nicht das Wissen haben. (Profis in dem Sinne, dass sie das beruflich machen; nicht, dass sie das besonders gut machen.)

Profis verwenden oft CSS-Präprozessoren, da hat man dann mit

$size: 1em;
width: $size;
height: $size;

auch einen single point of truth. (Dass daraus width: 1em; height: 1em erzeugt wird, ist irrelevant.)

Ohne Präprozessor kriegt man das mit custom property auch hin:

--size: 1em;
width: var(--size);
height: var(--size);

Das geht aber besser:

aspect-ratio: 1;
width: 1em;

oder

aspect-ratio: 1;
height: 1em;

Fun fact: Das wird nach CSS counters, @counter-style und ::marker-Pseudoelement das nächste sein, was ich bei meiner nächsten Präsentation zeigen werde. Nur in rund: Zifferblatt.

Am Ende wird die Uhr auch Zeiger haben und gehen.

Der Anstoß dazu kam auch hier aus dem Forum.

🖖 Живіть довго і процвітайте

[MB]

moin,

Um auf die Wege zu gelangen, müsste ich das Profi Wissen von CSS erlernen, […] um effektiven CSS Code schreiben zu können, welches den SPOT Anspruch genügt.

Ich würde auch sagen, dass viele Profis nicht das Wissen haben. (Profis in dem Sinne, dass sie das beruflich machen; nicht, dass sie das besonders gut machen.)

Danke für deine erweiterte Fassung des Begriffs "Profi" und Stimme dem zu 😁. Ich hab den Begriff "Profi" mit einer hohen Qualität der Ausübung seiner Arbeit verbunden und verwendet und nicht mit einer Erwerbstätigkeit.

Das geht aber besser: […]

Vielen Dank. Schaue ich mir an und übernehme das in meinen Code 👍😀.

Fun fact:

Sehr geil 😀👍. Und das meine ich mit "Profi" bezogen auf die hohe Qualität der Arbeit 😉.

lgmb

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Fun fact: Das wird nach CSS counters, @counter-style und ::marker-Pseudoelement das nächste sein, was ich bei meiner nächsten Präsentation zeigen werde. Nur in rund: Zifferblatt.

Bis dahin hab ich das schon präsensiert. Angefangen mit nicht in rund, aber mit IIII statt IV, wie es auf manchen Uhren zu sehen ist: counter style: Roman numerals. (Aber nicht XIIII, sondern XIV, siehe Shepherd Gate Clock.)

Und mit Edelmetall für die Medaillenränge: counter style: medals. Und da auch den Zieleinlauf von Waldemar Cierpinski gezeigt, kommentiert von Heinz-Florian Oertel, der damit Fehrnsehgeschichte sprach.

Am Ende wird die Uhr auch Zeiger haben und gehen.

Dazu ist es noch nicht gekommen. Stay tuned.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Am Ende wird die Uhr auch Zeiger haben und gehen.

Dazu ist es noch nicht gekommen. Stay tuned.

Das wird dieses Jahr auch nichts mehr mit der Fortsetzung. Hab die komplette Präsentation schon mal online gestellt, incl. Links zu Codepens und weiteren Ressourcen.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@MB

Meine Absicht:

• Ich möchte das Flex-Element .cm-header::after mit text-valign: baseline; auf einer horizontalen Linie zum Flex-Element .cm-header ausrichten.
• Ich möchte mit .cm-header::after ein quadratische Fläche definieren, welches sich zur Text höhe des .cm-header-Element orientiert.

Du denkst mal wieder in Lösungen, anstatt dein Problem zu beschreiben, was du zu lösen gedenkst.

Ich werde nicht schlau draus, was du eigentlich erreichen willst. Eine Skizze sagt da möglicherweise mehr als tausend Worte.

🖖 Живіть довго і процвітайте

[MB]

moin,

Du denkst mal wieder in Lösungen, anstatt dein Problem zu beschreiben, was du zu lösen gedenkst. […] Ich werde nicht schlau draus, was du eigentlich erreichen willst.

Sry, ich dachte das wäre Klar. Schließlich hat die Community dazu beigetragen, meine Lösungen in der jüngsten Vergangenheit mit mir zu erarbeiten. Auch du, also nochmals Dankeschön 😊👍.

Welche Informationen wären denn explizit für DICH wichtig und sinnvoll, damit du besser verstehen kannst, vor welchem Problem ich stehen werde, damit die Community und du mich zu einer Lösungen führen oder gar eine Lösung präsentieren kannst?

Eine Skizze sagt da möglicherweise mehr als tausend Worte.

Ja habe ich auch schon Nachgedacht. Welche Skizzen wären den für die Community und für DICH wichtig, damit du mein zukünftiges Problem besser verstehen kannst?

Wie gesagt bin ich neben der Spur 🤷.

lgmb

[Gunnar Bittersmann]

@@MB

Welche Informationen wären denn explizit für DICH wichtig und sinnvoll, damit du besser verstehen kannst, vor welchem Problem ich stehen werde

Alle, die notwendig sind, um dein Problem zu verstehen. Dein Problem, nicht deinen angedachten Lösungsweg.

Den kannst du zusätzlich schildern. Dann kann man dir auch sagen, ob dein Lösungsweg zum Ziel oder in die Irre führt.

Welche Skizzen wären den für die Community und für DICH wichtig, damit du mein zukünftiges Problem besser verstehen kannst?

Sowas in der Art, wo zu erkennen ist, wie groß und woran ausgerichtet das Quadrat sein soll.

🖖 Живіть довго і процвітайте

[MB]

moin,

@@MB

Welche Informationen wären denn explizit für DICH wichtig und sinnvoll, damit du besser verstehen kannst, vor welchem Problem ich stehen werde

Alle, die notwendig sind, um dein Problem zu verstehen. Dein Problem, nicht deinen angedachten Lösungsweg.

Ich meine, ich hätte alle notwendigen infos schon geben. Es ist mir dennoch scheiherhaft, welche notwenigen infos ich noch zusätzlich anführen kann, damit es besser verstanden wurd, sry.

Den kannst du zusätzlich schildern. Dann kann man dir auch sagen, ob dein Lösungsweg zum Ziel oder in die Irre führt.

Ist mir klar.
Mir wäre wirklich wichtig, dass ich deutliche und klare Formulierungen bzgl. Rückfragen von der Community an mich zu lesen bekomme. Dann ist es auch für mich klarer, welches Problem mit meinen Formulierungen besteht. Mit meinem gewonnenen Verständnis, kann ich das eigentliche Problem besser ausformulieren, eingrenzen und ergänzen. Das ist mein Wusch.

Ich gebe zu das ich viele Aussagen der Community an mich übergangen habe, weil ich eure Aussagen selbst einfach nicht verstand. Dabei handelt es sich keines Wegs um Fachliche-Qualität von euch ☝️. Phrasen, kleine grammatikalische und syntaktische Fehler, querverweise die ich nich verstehe von euch an mich gerichtet, machen mir manchmal gehörig Probleme! Ich sehe es ja selbst an mir, dass ich zuhauf genau die selben Fehler mache die ich hier der Community aufzeige und noch sehr viel mehr. Ich rede da von meiner Orthografie, meinen Begriffsverwechselungen, zusammenhanglose Querverweise usw., was euch mit Sicherheit "auf die Palme" bringt! Dahingehend nochmals Verzeihung an dich bzw. die Community gerichtet!!! Trotzdem verschwindet das Problem der Kommunikation von uns nicht. Verstehst du was ich meine? Ich tue mein Bestes und bekomme Unterstützung 😀👍. Ich hoffe das zeigt sich bezogen auf meine Verständlichkeit von damals und heute 😁.

Bitte versteh mich nicht Falsch. Das ist keinesfalls ein versteckter Vorwurf! Ich weis ja was ihr großartiges in der Community leistet. Das ihr fachlich Aufklärt, Wissen weiter gebt, privat in der Community neben beruflichen Angelegenheiten. Dafür bin ich sehr sehr Dankbar 😊🙏.

Welche Skizzen wären den für die Community und für DICH wichtig, damit du mein zukünftiges Problem besser verstehen kannst?

Sowas in der Art, wo zu erkennen ist, wie groß und woran ausgerichtet das Quadrat sein soll.

Das ist ein guter Anhaltspunkt!!! Danke 🙏!!!

lgmb

[Rolf B]

Hallo MB,

Schließlich hat die Community dazu beigetragen, meine Lösungen in der jüngsten Vergangenheit mit mir zu erarbeiten

Bitte bedenke, dass die Community nicht nur mit Dir spricht. Gehe darum nicht davon aus, dass wir alles noch im Kopf haben, was wir miteinander geschrieben haben. Und erstmal alle alten Threads nachzulesen, das tu ich auch nicht.

(Gunnar) Ich werde nicht schlau draus, was du eigentlich erreichen willst.

Dass Du derzeit mit Obsidian streitest, wissen wir wohl. Aber ich denke, Gunnar wollte wissen, was genau Du mit dem Quadrat erreichen wolltest.

Rolf

[MB]

moin,

Bitte bedenke, dass die Community nicht nur mit Dir spricht.

Ja, Danke für deinen Hinweis 🙏!!! Das vergesse ich zu Hauf 😟.

Gehe darum nicht davon aus, dass wir alles noch im Kopf haben, was wir miteinander geschrieben haben. Und erstmal alle alten Threads nachzulesen, das tu ich auch nicht.

Bitte tut das auch nicht. Ihr seit mir ohne hin schon eine große hilfe 👍.

(Gunnar) Ich werde nicht schlau draus, was du eigentlich erreichen willst.

Dass Du derzeit mit Obsidian streitest, wissen wir wohl. Aber ich denke, Gunnar wollte wissen, was genau Du mit dem Quadrat erreichen wolltest.

Das ist doch Schnuppe 🤨? Trotzdem erkläre ich es gern: Ich verwende das Quadrat in ::after und maskiere es damit ich importierte SVGs als Icons im verschachtelten Flex-Kontainern hinzufügen kann.

Original:

Skizze:

+ MDHeader ----------------------------------------------+
| + cm-formatter --------------------------------------+ |
| | ##                                                 | |
| +----------------------------------------------------+ |
| + cm-header -----------------------------------------+ |
| | Übrschrift 1                                       | |
| +----------------------------------------------------+ |
+--------------------------------------------------------+

Resultat:

---

##.

Überschrift 1

---

Modifiziert:

Skizze:

+ MDHeader ----------------------------------------------+
| + ::after + ::before + cm-header ---+ + cm-formatter + |
| | 💯      | 1.       | Übrschrift 1 | | ##           | |
| +---------+----------+--------------+ +--------------+ |
+--------------------------------------------------------+

Resultat:

---

💯 1. Überschrift 1

---

Passt das @Gunnar Bittersmann?

lgmb

[Gunnar Bittersmann]

@@MB

Passt das @Gunnar Bittersmann?

Nein.

Aus keiner der Skizzen geht hervor, was du im OP zu beschreiben versuchtest.

🖖 Живіть довго і процвітайте