XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Zeilenumbruch durch Anpassung Schriftgröße verhindern (http://xhtmlforum.de/showthread.php?t=74122)

hatschiii 05.08.2020 00:56

Zeilenumbruch durch Anpassung Schriftgröße verhindern
 
Ich habe auf meiner Website im Header die Überschrift mit 36 px definiert
In der Breite des Überschriftsblock belegt dit Überschrift ca 66%
Wird das Fenster schmäler verringert sich der Leerbereich
Ist der Leerbereich aufgebraucht findet ein Zeilenumbruch statt.

So weit so gut...

Den Zeilenumbruch möchte ich durch stufenloses verkleinern der Schriftgröße verhindern.
Gleichzeitig muss es eine Mindestschriftgröße geben. Ist diese erreicht soll ein Zeilenumbruch stattfinden.

Bastel jetzt schon seit Stundennn Hat jemand nen Tipp für mich?

cloned 05.08.2020 10:33

Eine spezielle Lösung kann ich nicht bieten, aber zumindest einen Denkanstoß:

Erstens (und das nur als allgemeine Diskussion): Wozu diese spezifische Anforderung? Web ist nicht print und so genau wird eigentlich nirgends Text im Web gesteuert. Einfach auch deshalb weil ja alles dynamisch ist.

Zweitens (ist hoffentlich hilfreicher): Verwende variable Größen für deine Schrift. Also keine px, sondern eventuell etwas in Kombination mit CSS calc() und zb vw?

So etwas wie hier?

Eventuell in Kombination mit variable fonts?

hatschiii 05.08.2020 14:15

Die Überschrift ist am Desktop in der Größe perfekt (pixelgenau muss es nichts ein). Wenn nun das fester kleiner wird bricht die Überschrift irgendwann in 2, 3 oder am Handy sogar in 4 Zeilen um und das sieht dann bescheiden aus. Je kleiner der Bildschirm wird desto kleiner darf die Schrift ruhig sein /zu groß sieht hier nicht gut aus. Am Ende wäre dann eine etwas kleinere Schrift und 2 Zeilen am Handy perfekt :)

Das ich von fix auf variable umsteigen muss ist mir schon klar... Habe schon mit der calc Funktion gespielt, aber habe da noch nichts zufriedenstellendes hin bekommen.

hatschiii 11.08.2020 18:04

Also... ich habe es selbst gelöst :)

Die kleinste Schriftgröße ist 24px, die größte 36px
Ich habe nun für 13 verschiedene @media min-with die px größe der Schriftgröße definiert.

Das klingt jetzt kompliziert. In den Browser Deloper Tools kann man die Festerbreite Pixel für Pixel ändern und glechzeitig die Schriftgröße ändern... so bekommt man innerhalb von ein paar Minuten die nötigen min-with Breiten raus.

Nun habe ich am Mobile statt 4 Zeilen überschrift eine etwas kleinere Schrift udn nur 2 Zeilen... und bis zur Desktop Breite wird die Schrift in 1px Schritten größer... immer zum richtigen Zeitpunkt. :)

Mit Calc oder irgendwas anderem hätte ich das nie so genau hin bekommen. So kann ich Pixel genau auf die Breite eingehen und Pixel genau die Schriftgröße anpassen.

Mit 13 Schritten ist die @media Lösung machbar. Währen es deutlich mehr gewesen wäre der Aufwand udn der zusätzliche Code zu groß gewesen.

Hier im Video sieht man den Umbruch schön. Es geht nur um die Überschrift "Customer Experience & Digital Transformation"

https://dlgo.de/header.mp4

----------------------

Dylan 12.08.2020 13:28

Das ganze nennt sich Breakpoints. 13 sind definitiv zu viel, ganz gleich was Browser Developer Tools vorschlagen. 5 Breakpoints reichen:

Code:

@media screen and (max-width: 1280px) {
       
        }

@media screen and (max-width: 960px) {
       
        }
       
@media screen and (max-width: 840px) {
       
        }

@media screen and (max-width: 600px) {
       
        }
       
@media screen and (max-width: 480px) {
       
        }

Neben der / den Headline/s muss auch das hero image hinzugefügt werden, es wird momentan auf 100 % width gezogen, height bleibt statisch fix. Das hero image kann als background-image mit einer height-Angabe in den breakpoints und background-size cover im CSS auf Linie gehalten werden. So bleibt das image proportional sauber, wenn es in der max-width hinterlegt wird.


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:17 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020