CSS Schriftgröße automatisch anpassen

[Lulu89]

Hi,
ich habe mithilfe von grid ein Raster erstellt und dieses mit Text gefüllt. Den Text kann ich natürlich manuell an die einzelnen Gridfelder anpassen, sodass diese vollständig ausgeüllt sind. Wenn ich jedoch die größe der Textfelder ändere passt der Text nicht mehr in die Felder. Kennt ihr eine Lösung für das Problem. Ich möchte nicht die Größe der Felder ändern sondern die Schriftgröße automatisch anpassen. Hier der CSS Code:

.wort-grid{
--gap: 15px;
--row-height: auto;
padding: var(--gap);
display: grid;
grid-template-columns: 30% 12% 31% ;
grid-auto-rows: var(--row-height);
gap: var(--gap);
background-color: white;
grid-template-areas:
"eins eins zwei"
"eins eins drei"
"funf vier sechs";
}
.wort-grid > p {
width: auto;
height: auto;
border: 5px dotted black;
border-color: aqua;
margin-left: px;
}
.p0{
grid-area: eins;
font-size: 3em;
font-weight: bold;
text-align: justify;
text-align-last: none;

 

[djerunX]

Ich kann mir noch nicht so ganz vorstellen was du machen willst, kannst du das HTML dazu noch reinstellen? Du möchtest, dass sich die Schriftgröße automatisch ändert, wenn sich die Größe der umliegenden Gridfelder anpasst? Oder du möchtest in die Gridfelder Text schreiben der automatisch so groß ist, dass es das Gridfeld quasi komplett ausfüllt?

 

[User007]

Hi und willkommen im Forum...

Wenn ich jedoch die größe der Textfelder ändere [...] Ich möchte nicht die Größe der Felder ändern [...]

Sorry, aber das widerspricht sich doch - was genau soll das zu erreichende Ziel sein?

 

[Lulu89]

Hi erstmal vielen Dank für die Antworten...HTML folgt - ist jedoch nur mit Beispieltext gefüllt

Sorry wenn ich mich unklar ausgedrückt habe.

Ziel ist dass die Grid Felder immer komplett mit Text ausgefüllt sind. Angenommen ein Gridfeld ist height 200px *width 200px groß. Ich füge einen belieben Text ein und das Feld wird von Anfang bis Ende komplett ausgefüllt ohne das was fehlt.
Ändere ich nun die Größe des Gridfelds (manuell) auf z.B. 100px*100px soll sich die Schriftgröße automatisch so anpassen, dass das Gridfeld mit dem selben Text komplett ausgefüllt wird.

Ich hoffe das es verständlich ist.

Vielen Dank für Eure Hilfe :-)


<div class="wort-grid">
<p class="p0" > Lorem ipsum dolor sit amet co</p>
<p class= "p1" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, voluptatum eaque ab dolor te </p>
<p class="p2" >cc c c c cc c c c </p>
<p class="p3" > id d d d d </p>
<p class="p4" >e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e ega i e e e e </p>
<p class="p5" >f f f f f f f f f f f f f f f f f f f f f fffff f temporibus fuga i f </p>
</div>

Ergänzung (17. Juni 2022)

Ergänzung (17. Juni 2022)

So sieht es momentan aus...Die Felder sollen automatisch komplett ausgefüllt werden

 

[netzgestaltung]

das wird nur mit JS gehen (leider auch nicht gerade unkompliziert). Einen Bezug der Schriftgröße auf den umliegenden Container ist leider nicht möglich bzw wäre es mir nicht bekannt.

Wenn das HTML mit PHP oder einer Serverseitigen Sprache generiert wird könnte man die Buchstaben zählen und eine klasse vergeben, das ist aber auch eher eine frickelei.

Ergänzung (17. Juni 2022)

hier gibts eine JS Lösung mit der sichs starten lässt: https://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size

 

[Lulu89]

Alles klar vielen Dank für Eure Antworten :-)

 

[djerunX]

@netzgestaltung hat mich auf die Idee gebracht mit seinem Link, und dadurch bin ich auf die Seite https://css-tricks.com/fitting-text-to-a-container/ gestoßen.

Das geht scheinbar an sich recht einfach indem man die font-size an den viewport anpasst. Allerdings wird es im Grid ein bisschen fummelig, man muss die einzelnen Werte an das Grid anpassen, hier ein Beispiel:

Spoiler: HTML

<div id="container">
  <div id="container1">Grid 1</div>
  <div id="container2">Grid 2</div>
  <div id="container3">Grid 3</div>
  <div id="container4">Grid 4</div>
  <div id="container5">Grid 5</div>
  <div id="container6">Grid 6</div>
</div>

Spoiler: CSS

#container {
  display: grid;
  grid-template-columns: 70% 20% 10%;
  padding: 10px;
  margin: 5px;
}

#container > div {
  border: 2px solid;
  margin: 5px;
}

#container1 {
  text-align: center;
  font-size: 17.5vw;
}

#container2 {
  text-align: center;
  font-size: 5.1vw;
}

#container3 {
  text-align: center;
  font-size: 2.55vw;
}

#container4 {
  text-align: center;
  font-size: 17.5vw;
}

#container5 {
  text-align: center;
  font-size: 5.1vw;
}

#container6 {
  text-align: center;
  font-size: 2.55vw;
}

Mit Javascript sind vermutlich deutlich einfachere (und bessere) Lösungen möglich.

Ansonsten würde mich noch der Anwendungsfall interessieren. Ich kann mir irgendwie noch nicht vorstellen wofür das gut sein soll, aber die Idee an sich finde ich trotzdem interessant.

 

[Lulu89]

@djerunX Vielen Dank nochmal für deinen Lösungsvorschlag.
Nunja mir kam deulich die Idee als ich ein Bilder Grid erstellt habe und sich die Bilder je nachdem welche Größe die Felder hatten automatisch angepasst haben. Ich dachte, dass sowas doch bestimmt auch mit Text möglich wäre.
Man hätte Text ganz einfach in verschiedenen Formen anordnen können, so wie das bei den Bildern eben auch möglich ist - hätte die Anordnung von exten irgendwie interessant gemacht, und ggf. auch vereinfacht. Leider bin ich mit JavaScript nicht vertraut - ist aber ein Grund das mal anzugehen. Danke nochmal :-)

​

 

[netzgestaltung]

Grundsätzlich ist es schon möglich diesen Effekt zu erzielen, aber nicht automatisch(nur mit CSS). Du kannst manuell klassen setzen und unterschiedliche schriftgrößen nutzen. wenn du die gesamtbreite begrenzt passt es auch auf allen bildschirmgrößen die breiter sind.

auf mobilgeräten kann ich mir den effekt eher weniger vorstellen, daher kann dort dann normale schriftgröße(oder irgendeine andere variation) gesetzt werden.

was ich mir noch überlege ob nicht die calc() CSS funktion irgendwie genutzt werden könnte, ca so:
font-size:calc(100vw - 100%); oder kombinieren mit fixen werten em oder px oder ähnliches. damit kannst du herumspielen in den Browser Dev-Tools für eine Live-Preview, aber vermutlich wirds immer irgendwo haken

hier gibts zb experimente in diese richtung, allerdings nur für den ganzen viewport, nicht nur für container:
https://stackoverflow.com/questions...ze-changing-font-size-based-on-container-size

interessantes thema jedenfalls ;-)

weiter unten in dem stack overflow artikel meinte im April jemand das es nun gehen würde mit vi/vb
https://stackoverflow.com/a/71901468/1165121
font-size: 0.5vi;
https://developer.mozilla.org/en-US/docs/Web/CSS/length#vb


teste das mal ;-) aber leider ist der Browsersupport noch nicht so weit: https://caniuse.com/mdn-css_types_length_vb https://caniuse.com/mdn-css_types_length_vi