font-size dem eltern div anpassen

[T-Rex]

Moin,

ich bin mal wieder auf der Suche nach der Eier-legenden-Woll-Milch-Sau. Um genau zu sein würde ich gerne die Schriftgröße nach der Breite des Elternelements ausrichten.

Jetzt habe ich natürlich vorher im Netz gesucht. Da wird einem %, vw, vh, em etc... empfohlen. Das Problem ist, dass die Einheiten immer auf höhere Elemente oder Eigenschaften gehen und nicht auf das Eltern-div.

Das div das ich habe, hat eine min-height und eine max-height. Das heißt, es skaliert nicht synchron mit dem viewport mit. Es kann auch mal kleiner oder größer sein.

Als Beispiel an vw. Schiebe ich den Browser größer, so bleibt das div irgendwann Aufgrund der max-height Eigenschaft auf einer bestimmten Größe stehen. Die font-size wird dennoch größer.

Eine native JS (JQuery kann ich an der stelle leider nicht verwenden) Lösung, würde mir an dieser Stelle auch helfen.

Gruß "die Größe meiner Dankbarkeit hängt von der Größe der Hilfe des Eltern-Antworters ab" T-Rex

[Gunnar Bittersmann]

@@T-Rex

Eine native JS (JQuery kann ich an der stelle leider nicht verwenden) Lösung, würde mir an dieser Stelle auch helfen.

Wo ist das Problem? Beim Auslesen der Elementbreite oder beim Setzen der Schriftgröße?

Beides findest du in diesem Beispiel. (Die Schriftgröße wird dort allerdings anders berechnet als du es vorhast.)

LLAP 🖖

[T-Rex]

Sieht genau nach dem aus, was ich suche :).

Danke!

Gruß ergebener T-Rex

[T-Rex]

Nein passt doch nicht :(.

In deinem Beispiel passt es, aber ich bekomme es nicht auf meine Anwendung hin. Dabei kann ich noch nicht mal sagen woran es happert. Die Umrechnung funktioniert einfach nicht.

Gruß deprimierter T-Rex

[Matthias Apsel]

Hallo T-Rex,

Woran hapert es denn? 😂

Bis demnächst
Matthias

[T-Rex]

Hiho,

schwer zu beschreiben. Das Problem ist aber, dass die Schrift nicht mit skaliert. Ich hab hier ein Block. Der kann ein Verhältnis von 1:1 haben (quadratisch) oder 1:1.2 also eher hochkant oder 1:0.9 also eher quer. Ich habe alle angaben mittels % angegeben. Alle inneren Blöcke "drehen" sich also mit dem Eltern block mit. So auch Hintergrundgrafiken. Sieht auch mal ein wenig gezerrt aus, ist aber für die Anwendung nicht schlimm.

Nur eben die Schrift nicht. Und das ist manchmal sehr doof. Auf dem einen Testgerät kann ein Textblock ca. 1000 Zeichen enthalten in einem anderen Testgerät sind es nur 900.

Aber ich bin schon einen großen Schrift weiter. Ich hab Gunnars Code genommen und habe ihn auf den Hauptblock angewandt. Dabei benutze ich einen Standardschriftzug. Dieser bekommt dann eine zu Grunde liegende Schriftgröße. In den anderen Blöcken nehme ich mittels em Vererbung Bezug darauf.

Außerdem habe ich Gunnars Code erweitert und noch einen Block mit mehreren Schriftzügen erstellt die Zeilenumbrüche haben. Damit checke ich die Schriftgröße in der Höhe. Dann wird die jeweils kleinere Schriftgröße als Grundlage benutzt.

Aktuell sind damit die meisten Probleme behoben. Ideal wäre aber wenn es ein font-scale gäbe mit dem man das breite höhe Verhältnis der Schrift angeben könnte. Denn wenn eine Schrift höher werden soll, dann soll sie nicht zwingend breiter werden. Mit line-height und letter-spacing kommt man da nicht weiter. Die schrift mittels transform irgendwie zu verzerren ist auch nicht der Hit. Aber wie gesagt mit Gunnars erweitertem Code auf dem Hauptblock + em Vererbung bin ich nahe an der perfektion :).

Gruß verzerrter T-Rex