Fred: grid mit image

problematische Seite

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

--
I � Unicode
  1. problematische Seite

    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

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      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

      --
      Wenn ich den See seh, brauch ich kein Meer mehr.
      1. problematische Seite

        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

        1. problematische Seite

          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:

          Screenshot aus jsfiddle

          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

          --
          Wenn ich den See seh, brauch ich kein Meer mehr.
    2. problematische Seite

      @@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

      --
      „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
      — Joachim Gauck über Impfgegner
      1. problematische Seite

        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

        --
        sumpsi - posui - obstruxi
      2. problematische Seite

        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

        --
        I � Unicode
        1. problematische Seite

          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).

          --
          I � Unicode
          1. problematische Seite

            @@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

            --
            „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
            — Joachim Gauck über Impfgegner
            1. problematische Seite

              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.

              --
              I � Unicode
              1. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  @@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

                  --
                  „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                  — Joachim Gauck über Impfgegner
              2. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  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

                  --
                  sumpsi - posui - obstruxi
                  1. problematische Seite

                    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

                    --
                    I � Unicode
                    1. problematische Seite

                      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

                      --
                      sumpsi - posui - obstruxi
                      1. problematische Seite

                        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

                        --
                        I � Unicode
                2. problematische Seite

                  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

                  --
                  I � Unicode
  2. problematische Seite

    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

    --
    I � Unicode
    1. problematische Seite

      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%"

      --
      I � Unicode
      1. problematische Seite

        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

        1. problematische Seite

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

          Gruß Fred

          --
          I � Unicode
          1. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              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

              --
              I � Unicode
              1. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  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

                  --
                  I � Unicode
                  1. problematische Seite

                    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

                    --
                    sumpsi - posui - obstruxi
                    1. problematische Seite

                      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

                      --
                      I � Unicode
                      1. problematische Seite

                        @@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

                        --
                        „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                        — Joachim Gauck über Impfgegner
                        1. problematische Seite

                          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

                          --
                          I � Unicode
                          1. problematische Seite

                            @@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

                            --
                            „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                            — Joachim Gauck über Impfgegner
                            1. problematische Seite

                              Aber im Codepen ist der Link zur Erklärung.

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

                              --
                              I � Unicode
                              1. problematische Seite

                                @@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

                                --
                                „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                                — Joachim Gauck über Impfgegner
                                1. problematische Seite

                                  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

                                  1. problematische Seite

                                    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

                                    --
                                    Wenn ich den See seh, brauch ich kein Meer mehr.
                                2. problematische Seite

                                  Versteckt in der Ecke unten links.

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

                                  --
                                  I � Unicode
                      2. problematische Seite

                        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

                        --
                        sumpsi - posui - obstruxi
                        1. problematische Seite

                          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

                          --
                          I � Unicode