Seeker_44
Threadersteller
Dabei seit: 15.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 20.03.2018 22:06
Titel Text verkleinern, sobald breiter als Elternelement |
|
|
Hallo zusammen
Es gibt Javascripts, die Text entsprechend des Viewports oder des Elternelements verkleinern und vergrössern. Es gibt inzwischen sogar responsive Einheiten für font-size (vw, vh, vmin, vmax).
Ich suche jedoch nach einer responsiven Lösung für Schriftgrössen mit ganz bestimmten Verhaltensweisen, die ich so leider noch nirgends gefunden habe:
Die Schrift soll so gross angezeigt werden, wie ich sie im CSS via font-size definiert habe, unabhängig vom Viewport. Erst wenn ich den Viewport so stark verkleinere, bis responsive Elternelemente so schmal werden, dass das Wort darüber hinausragt, soll der Text verkleinert werden, damit die Wörter in die Breite des Elternelements passen.
Jetzt kommt der knifflige Teil: Die Wörter im Text sollen unbedingt zuerst auf die nächsten Zeile umgebrochen werden, bevor eine Verkleinerung stattfindet. Erst wenn trotz des automatischen Umbruches noch Worte breiter sind als das Elternelement, soll der ganze Text so stark verkleinert werden, dass er im Elternelement wieder Platz findet.
Und es geht noch weiter: Ich habe ein tolles Javascript namens "Hyphenator" gefunden, welches Silbentrennungen einfügt. Ich setze es gerne ein. Das Text-Verkleinerungs-Script soll, wenn es irgendwie möglich ist, nicht schon dann damit beginnen, die Schrift zu verkleinern, wenn die automatischen Umbrüche stattgefunden haben, wie weiter oben beschrieben, sondern sogar erst, wenn auch die Silbentrennung durch ist. So bleibt die Schrift so lange wie möglich in ihrer Originalgrösse, bevor schlussendlich nichts mehr geht und sie verkleinert werden muss, um nicht über das Elternelement zu ragen.
Ich hoffe, ich habe mich verständlich ausgedrückt. Wenn ich es anders erklären soll, gebt mir bitte Bescheid.
Ist so etwas technisch machbar?
|
|