grid mit image

[Fred]

Hallo in die Runde,

jetzt komme ich nicht weiter. Ich habe eine svg erstellt, die nur Text enthält. Es handelt sich um die Überschrift. Die Idee ist, dass sich der Text der Viewportbreite anpasst. Im Firefox und Chrome (am Win PC) sieht es auch genau so aus, die Grafik scaliert prima mit. Nur im Smartphone und Tablet (beides Samsung) ragt die Grafik links und rechts aus dem Viewport raus.
Wie bekomme ich das in den Griff?

Gruß
Fred

[Rolf B]

Hallo Fred,

das Anpassen vom Text an den Viewport bekommt man ggf. auch mit etwas vw-Spielerei für die font-size hin (unter Verwendung von magics wie calc und clamp (oder min und max).

Das beschriebene Phänomen kann ich mit Chrome auf Android nachvollziehen. Im Smartphone-Simulator des Desktop-Chrome nicht. Auf den ersten Blick sehe ich noch keine Ursache.

Rolf

[Der Martin]

Mahlzeit,

das Anpassen vom Text an den Viewport bekommt man ggf. auch mit etwas vw-Spielerei für die font-size hin (unter Verwendung von magics wie calc und clamp (oder min und max).

aber nicht, wenn die Schriftgröße so skalieren soll, dass der Text den Viewport (oder ein bestimmtes Vorfahrenelement) in der Breite gerade so ausfüllt.

Oder übersehe ich da eine Möglichkeit?

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Samuel fiedler]

Hallo Der Martin!

aber nicht, wenn die Schriftgröße so skalieren soll, dass der Text den Viewport (oder ein bestimmtes Vorfahrenelement) in der Breite gerade so ausfüllt.

Oder übersehe ich da eine Möglichkeit?

Kurz recherchiert, dann im SelfHTML-Wiki gefunden: CSS/Wertetypen/Maßangaben. (JSFiddle)

Man müsste aber immer bestimmen, mit welcher Schriftart was funktioniert.
Es ist also nicht optimal, aber es geht.

Au revoir,
Samuel Fiedler

[Der Martin]

Hallo Samuel,

aber nicht, wenn die Schriftgröße so skalieren soll, dass der Text den Viewport (oder ein bestimmtes Vorfahrenelement) in der Breite gerade so ausfüllt.

Oder übersehe ich da eine Möglichkeit?

Kurz recherchiert, dann im SelfHTML-Wiki gefunden: CSS/Wertetypen/Maßangaben.

ist mir geläufig, danke. Bis auf die Einheit ch, die kannte ich bis eben noch nicht.

(JSFiddle)

Nice try, passt schon nicht:

Wie man sieht, ist rechts noch Platz. Ist ja auch kein Wunder: Du gibst an, die Schrifthöhe möge bitte 30% der Bildschirmbreite sein. Das kann zufällig passen, muss aber nicht.

Man müsste aber immer bestimmen, mit welcher Schriftart was funktioniert.
Es ist also nicht optimal, aber es geht.

Aber so nicht. Denn mit font-size kannst du nur die Schrifthöhe festlegen, nicht die Breite. Und bei einer Proportionalschrift ist die Breite noch dazu für jedes Zeichen anders. Vielleicht kann man sich annähern, indem man die Schriftgröße in ch angibt.
Hmm, nee, das gibt eine böse Rekursion ...

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Gunnar Bittersmann]

@@Rolf B

das Anpassen vom Text an den Viewport bekommt man ggf. auch mit etwas vw-Spielerei für die font-size hin (unter Verwendung von magics wie calc und clamp (oder min und max).

Wobei „vom Text“ hier „von genau diesem Text“ meint. Bei jeder Textänderung muss man neu anpassen.

Und du gehst davon aus, dass beim Client die Schriftart installiert ist, für welche die Anpassung gemacht wurde. Bzw. dass der betreffende Webfont geladen wurde. Und auch dann ist nicht sichergestellt, dass sie Schrift auf allen Clients gleich gerendert wird – verschiedene Systeme können das durchaus unterschiedlich tun.

Ich hatte vor einiger Zeit mal was gebastelt, was diese Probleme nicht hat.

😷 LLAP

[Rolf B]

Hallo Gunnar,

stimmt, da war was.

Da bräuchte man jetzt nur noch eine Limitierung der Fontsize nach unten. Nach oben ergibt es sich ja automagisch über die max-width des Containers.

Rolf

[Fred]

Ich hatte vor einiger Zeit mal was gebastelt, was diese Probleme nicht hat.

Gunnar, magst du mal schauen, da scheint was zu gehen, ich bekomme aber eine Fehlermeldung in der Konsole: "Uncaught TypeError: headerElement is null"

https://www.gwfb.de/design/header/js-test.php

[Fred]

Fehlermeldung in der Konsole: "Uncaught TypeError: headerElement is null"

Aha, das Script muss hinter den header...

https://www.gwfb.de/design/header/js-test-02.php

Es scaliert sogar, h1 ist aber viel zu klein (2em).

[Gunnar Bittersmann]

@@Fred

Fehlermeldung in der Konsole: "Uncaught TypeError: headerElement is null"

Aha, das Script muss hinter den header...

Ganz unten in den body. Was sowieso der beste Platz für Scripte ist, damit sie das Rendern der Seite nicht blockieren.

Und du kannst nicht auf Elemente zugreifen, die noch gar nicht im DOM sind.

😷 LLAP

[Fred]

Hast du eine Idee weshalb h1 so klein ist? Es ist völlig egal was ich bei captionElement.style.fontSize = '2em';
eintrage, es kommen immer Werte um die 1 heraus.

[Rolf B]

Hallo Fred,

Gunnars figcaption ist display: inline-block und darum nicht breiter als nötig. Deswegen funktioniert seine Breitenrechnung.

Dein h1 ist (defaultmäßig) display: block und füllt darum das Fenster bis zum rechten Rand. Deshalb ist deine initiale Breite zu groß.

Wie man das in deinem Kontext optimal löst, weiß ich noch nicht; ein genereller display: inline-block für das h1 dürfte kontraproduktiv sein. Ggf. muss in das h1 ein span hinein, für das Du die Rechnung ausführst.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dein h1 ist (defaultmäßig) display: block und füllt darum das Fenster bis zum rechten Rand. Deshalb ist deine initiale Breite zu groß.

Wie man das in deinem Kontext optimal löst, weiß ich noch nicht

width: fit-content? (so ins Blaue)

😷 LLAP

[Rolf B]

Hallo Fred,

ja, geht.

<h1><span>Goldsaft Freunde Grafschaft e.V.</span></h1>

Ich hatte es mit display:inline-block für den span probiert, aber eigentlich müsste auch display:inline gehen.

Was aber gar nicht geht, ist dies:

if (!captionElement.initialWidth)
	{
		captionElement.style.fontSize = '20em';
		captionElement.style.whiteSpace = 'nowrap';
		captionElement.initialWidth = captionElement.offsetWidth;
	}

Mit dieser Initialgröße kann die Berechnung der initialWidth ja nur zu Mikroschrift führen.

Rolf

[Rolf B]

Hallo Rolf,

update: Nein, geht nicht so gut. Die h1 Überschrift bringt von Haus aus eine höhere Fontgröße mit. Dem span font-size: 1em zu geben, bezieht sich auf diese Fontgröße. Das ist zunächst unproblematisch, aber nun kommen wir zu einem Punkt den ich schonmal hatte: Mindestgröße. Die h1-Schrift sollte nicht zu klein werden. Bevor das passiert, sollte sie umbrechen. Das erreicht man, indem man für scale einen Mindestwert vorsieht.

Aber bei der h1+span Konstruktion führt das (bei mir) zu einem zu großen Zeilenabstand im span.

Das kann man vermutlich irgendwie heilen, aber ich glaube, es ist einfacher, wenn man das h1 Element für die Dauer der Einmessung auf display:inline-block umschaltet, captionElement auf das h1 Element zeigen lässt und auf den span verzichtet. Das nachstehende Beispiel verwendet eine Mindestgröße von 0.5em.

function scaleCaption(containerElement, captionElement)
{
	if (!captionElement.initialWidth)
	{
		captionElement.style.fontSize = '1em';
		captionElement.style.whiteSpace = 'nowrap';
		captionElement.style.display = 'inline-block';
		captionElement.initialWidth = captionElement.offsetWidth;
		captionElement.style.display = '';
		captionElement.style.whiteSpace = '';
	}
	
	var scale = containerElement.offsetWidth / captionElement.initialWidth;
  captionElement.style.fontSize = Math.max(0.5, scale) + 'em';
}

Rolf

[Fred]

Hallo Rolf,

Das kann man vermutlich irgendwie heilen, aber ich glaube, es ist einfacher, wenn man das h1 Element für die Dauer der Einmessung auf display:inline-block umschaltet, captionElement auf das h1 Element zeigen lässt und auf den span verzichtet. Das nachstehende Beispiel verwendet eine Mindestgröße von 0.5em.

function scaleCaption(containerElement, captionElement)
{
	if (!captionElement.initialWidth)
	{
		captionElement.style.fontSize = '1em';
		captionElement.style.whiteSpace = 'nowrap';
		captionElement.style.display = 'inline-block';
		captionElement.initialWidth = captionElement.offsetWidth;
		captionElement.style.display = '';
		captionElement.style.whiteSpace = '';
	}
	
	var scale = containerElement.offsetWidth / captionElement.initialWidth;
  captionElement.style.fontSize = Math.max(0.5, scale) + 'em';
}

Ich habe dies jetzt mal im Test-03 eingebaut, sieht doch gut aus 😃
Ich habe nur dieses geändert: captionElement.style.fontSize = '1.1em';

Nochmals vielen Dank, ich mache gleich den PC aus und vor Montag nicht wieder an.

Gruß
Fred

[Rolf B]

Hallo Fred,

Ich habe nur dieses geändert: captionElement.style.fontSize = '1.1em';

Das verändert die Skalierungsrechnung. Der Font, mit dem Du die Breite ausmisst, ist dann um 10% zu groß, mit der Folge, dass der Text nachher um 10% zu klein ist. Wenn das dein Begehr ist, ist es okay.

Rolf

[Fred]

Hallo Rolf,

Das verändert die Skalierungsrechnung. Der Font, mit dem Du die Breite ausmisst, ist dann um 10% zu groß, mit der Folge, dass der Text nachher um 10% zu klein ist. Wenn das dein Begehr ist, ist es okay.

mit der Angabe 1.0em wurde der e.V. noch umgebrochen, so ist alles bestens.

Gruß
Fred

[Fred]

Hallo Rolf,

Was aber gar nicht geht, ist dies:

if (!captionElement.initialWidth)
	{
		captionElement.style.fontSize = '20em';
		captionElement.style.whiteSpace = 'nowrap';
		captionElement.initialWidth = captionElement.offsetWidth;
	}

Es war in dem Beispiel total egal ob ich da 1, 2 oder 20em stehen hatte.

Fred

[Fred]

Es liegt scheinbar an der svg. Hab mal eine abgespeckte html hochgeladen:
https://www.gwfb.de/start/test.php
Am PC okay, Handy nicht 😟

Fred

[Fred]

Habe gerade mal eine Änderung in der svg gemacht, bringt aber auch nix,
von:
width="960" height="72"
zu:
viewBox="0 0 960 72" width="100%" height="100%"

[Samuel fiedler]

Hallo Fred!

viewBox="0 0 960 72" width="100%" height="100%"

Dann kannst du auch gleich <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 72"> benutzen.

Au revoir,
Samuel Fiedler

[Fred]

Hi Samuel, danke, doch auch damit bleibt das Problem bestehen...

Gruß Fred

[Rolf B]

Hallo Fred,

Ich habe im Moment keine Zeit zum Experimentieren.

Hast Du mal versucht, von dem Matrix-Transform wegzukommen? Vielleicht stört der die saubere Skalierung.

Gib dem Text eine font-size und eine Position, so dass er ohne Transform die Viewbox ausfüllt. Aber nicht zu groß, eher nach dem Prinzip "passt, wackelt und hat Luft" - denn die Schrift "Times" muss nicht überall verfügbar sein und eine Ersatzschrift könnte breiter sein. Füge eine generische Fallback-Family hinzu (serif), und verwende - wenn dein Tooling das zulässt - ein <style> Element statt direkte Formatierung mit Attributen.

Rolf

[Fred]

Hallo Rolf,

ich gestehe ich habe mich heute das erste mal mit svg beschäftigt und echt keinen Plan. Erstellt hab ich die Datei über ein Onlinetool:
https://svgedit.netlify.app/editor/index.html

Gruß
Fred

[Rolf B]

Hallo Fred,

Schau mal hier: https://self.borchmann.one/testsvg.html

Oberes h1: Ein svg (handgemacht)

Unteres h1: Skalierung mit normalem Text und CSS.

Die Border nur zur Visualisierung der h1 Grenzen.

h1 {
   text-align: center;
   border: 5px solid red;
}
h1.gw {
   color: white;
   font-size: clamp(1em, 5.2vw, 4em);
   font-family: serif;
}

<h1 class="gw">Gold Wing Freunde Bielefeld e.V.</h1>

Mittels clamp wird sichergestellt, dass die Schriftgröße in sinnvollen Bereichen bleibt (ok, für die Obergrenze könnte man auch 4em statt 60px angeben), und die vw Angabe in der Mitte sorgt dafür, dass die Schriftgröße abhängig von der Bildbreite skaliert. 5.2vw heißt: 5,2% der Bildschirmbreite. Diesen Wert habe ich experimentell ermittelt, so dass der Text nicht umbricht, solange wie die 1em Schriftgröße überschritten wird.

Die Textversion finde ich ohnehin besser, für ein Bild müsstest Du den Inhalt ins alt-Attribut doppeln.

Rolf

[Fred]

Hallo Rolf,

hab gerade mal schnell drüber geschaut, sieht auf dem Tablet gut aus. Ich weiß nicht ob ich heute noch dazu komme, aber ich werde berichten wenn ich es eingebaut habe oder doch nicht klarkomme....

Gruß
Fred

[Rolf B]

Hallo Fred,

guck Dir auch mal den JavaScript-basierenden Vorschlag von Gunnar an, an den er um 16:36 erinnert hat. Damit geht es ganz präzise und Font-unabhängig. Hängt von deiner JS-Affinität ab 😉

Rolf

[Fred]

Hallo Rolf,

ich habe alle Varianten mal in einer test.html zusammengefasst. Die SVG finde ich nicht so prickelnd, zumal sie nicht linksbündig sind.
Die mit clamp gestylten h1 sind schon besser, ich mußte aber auf 5.0vw runter gehen, weil die Überschrift im Tablet noch umgebrochen ist.
Was spricht eigentlich gegen die unterste Variante mit dem 8kB großen PNG? Damit sieht es noch am besten aus.

Gunnars Lösung hab ich mir angesehen, da steig ich aber bei dem Javascript aus.

Danke dir (euch alle) für die Hilfe

Gruß
Fred

[Gunnar Bittersmann]

@@Fred

Gunnars Lösung hab ich mir angesehen, da steig ich aber bei dem Javascript aus.

Dem Link zur Erklärung bist du gefolgt?

😷 LLAP

[Fred]

Hallo Gunnar,

Dem Link zur Erklärung bist du gefolgt?

In deinem Posting von 16:36 ist nur der Link zum codepen. Wie ich Rolf gerade schrieb, werde ich mir mal die Zeit nehmen und es mir zur Gemüte führen.

Auch dir meinen Dank und ein schönes Wochenende
Fred

[Gunnar Bittersmann]

@@Fred

Dem Link zur Erklärung bist du gefolgt?

In deinem Posting von 16:36 ist nur der Link zum codepen.

Aber im Codepen ist der Link zur Erklärung.

😷 LLAP

[Fred]

Aber im Codepen ist der Link zur Erklärung.

Ah, versteckt unter Comments. Nein da hatte ich nicht geschaut 🧐

[Gunnar Bittersmann]

@@Fred

Aber im Codepen ist der Link zur Erklärung.

Ah, versteckt unter Comments. Nein da hatte ich nicht geschaut 🧐

??

Versteckt in der Ecke unten links.

Zu gut versteckt?

😷 LLAP

[Tabellenkalk]

Hallo,

Zu gut versteckt?

Das Offensichtliche ist nicht immer für jeden offensichtlich. In diesem Fall muss man erkennen, dass Backlink was anderes ist als history.back()...

Gruß
Kalk

[Der Martin]

Hi,

Zu gut versteckt?

ich finde schon.

Das Offensichtliche ist nicht immer für jeden offensichtlich. In diesem Fall muss man erkennen, dass Backlink was anderes ist als history.back()...

Genau das (oder etwas Vergleichbares) hätte ich bei dem Begriff auch erwartet.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Fred]

Versteckt in der Ecke unten links.

Eigentor, cdpn.io war durch NoScript blockiert und somit nicht sichtbar 😬

[Rolf B]

Hallo Fred,

Die SVG finde ich nicht so prickelnd, zumal sie nicht linksbündig sind.

Bündigkeit ist etwas, was man einstellen kann. Kommt halt drauf an, wie Du es haben willst.

Wenn Du Bündigkeit innerhalb des SVG steuern willst - dann setze für den Text x auf 0 und text-anchor auf start. Feddich.

Wie sich das SVG-Element dann in seinen jeweiligen HTML Container ausrichtet, steuerst Du mit text-align auf diesem Container.

Gegen das PNG spricht eigentlich nur, dass ein SVG viel kleiner ist und sich auch als inline-SVG darstellen lässt.

Gegen jegliche Grafik spricht, dass Du schlecht ein Minimum für die Schriftgröße festlegen kannst. Das ist eine Frage der Lesbarkeit = Zugänglichkeit der Seite. Das ist der Vorteil der Textversion, wird eine Mindestgröße der Schrift unterschritten, bricht der Text im Zweifelsfalle um. Das geht weder mit PNG noch SVG.

Gunnars Lösung hat den Vorteil, dass sie sich automatisch an den Font anpasst, weil sie die Breite der Schrift bei font-size:1em ausmisst und dann einfach per Dreisatz das Verhältnis von realer Größe zu Normgröße in em umrechnet.

Das setzt aber eine bestimmte Eigenschaft des Fonts voraus. Denn font-size definiert die Schrifthöhe, nicht die Schriftbreite. Gunnar rechnet aber das Breitenverhältnis in einen Skalierungsfaktor für die font-size um. Eine Schriftart, deren Breite nicht proportional zur Höhe skaliert, funktioniert für diese Logik nicht. Ich weiß nicht, ob es solche Schriften gibt.

Rolf

[Fred]

Hallo Rolf,

Wenn Du Bündigkeit innerhalb des SVG steuern willst - dann setze für den Text x auf 0 und text-anchor auf start. Feddich.

Man man man, wie einfach wenn man weiß wie. So ein Teil wollte ich haben.

Gegen jegliche Grafik spricht, dass Du schlecht ein Minimum für die Schriftgröße festlegen kannst. Das ist eine Frage der Lesbarkeit = Zugänglichkeit der Seite. Das ist der Vorteil der Textversion, wird eine Mindestgröße der Schrift unterschritten, bricht der Text im Zweifelsfalle um. Das geht weder mit PNG noch SVG.

Okay, ich habe jetzt erstmal deinen Vorschlag mit h1 font-size: clamp(1em, 5.0vw, 4em); umgesetzt.

Gunnars Lösung hat den Vorteil, dass sie sich automatisch an den Font anpasst, weil sie die Breite der Schrift bei font-size:1em ausmisst und dann einfach per Dreisatz das Verhältnis von realer Größe zu Normgröße in em umrechnet.

Da werde ich mich dann wohl doch mal mit beschäftigen.

Ich danke dir für deine Zeit und Hilfe
Ein schönes Wochenende
Fred