Barksalot: Schrift automatisch verkleinern

0 100

Schrift automatisch verkleinern

Barksalot
  • css
  1. 0
    Gunnar Bittersmann
    1. 1
      Barksalot
      1. 0
        Barksalot
        1. 0
          Regina Schaukrug
          1. 0
            Barksalot
            1. 0
              Robert B.
              1. 0
                Barksalot
                1. 0
                  Robert B.
                2. 0
                  marctrix
                  1. 0
                    Gunnar Bittersmann
              2. 0
                Gunnar Bittersmann
          2. 1
            Gunnar Bittersmann
            1. 0
              Barksalot
              1. 1
                Rolf B
                1. 0
                  Barksalot
                  1. 0
                    marctrix
                    1. 0
                      Barksalot
                    2. 0
                      beatovich
                      1. 0
                        marctrix
                        1. 0
                          beatovich
                          1. 0
                            marctrix
                            1. 0
                              beatovich
                        2. 0
                          Gunnar Bittersmann
                2. 2
                  Gunnar Bittersmann
                  • css
                  • typografie
                  1. 0
                    beatovich
                    1. 0

                      variable fonts

                      Gunnar Bittersmann
                      • typografie
                      1. 0
                        beatovich
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            beatovich
                  2. 0
                    Mitleser
                    • meinung
                    • typografie
            2. 1
              Regina Schaukrug
            3. 0
              marctrix
              • css
              • php
              1. 0
                Gunnar Bittersmann
                • css
                • html
                1. 0
                  marctrix
                  1. 1
                    Gunnar Bittersmann
                    1. 0
                      marctrix
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          marctrix
                          1. 0
                            Barksalot
                            1. 0
                              marctrix
                          2. 0
                            Gunnar Bittersmann
                      2. 0
                        Matthias Apsel
      2. 1
        Gunnar Bittersmann
        1. 0
          Rolf B
          1. 0
            Gunnar Bittersmann
            1. 0
              Rolf B
              1. 0
                Gunnar Bittersmann
                1. 0
                  Rolf B
                2. 0
                  Gunnar Bittersmann
            2. 1
              Gunnar Bittersmann
              1. 1
                Matthias Apsel
                • barrierefreiheit
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Rolf B
                    1. 0
                      Gunnar Bittersmann
                      • typografie
                      1. 0
                        Rolf B
                  2. 0
                    marctrix
              2. 0
                marctrix
                1. 0
                  beatovich
    2. 1
      TS
      • css
      • hardware
      • monitor
    3. 0
      beatovich
  2. 0

    Navigation

    Barksalot
    1. 0
      Robert B.
      1. 0
        Barksalot
        1. 0
          Robert B.
    2. 0
      marctrix
    3. 0
      Rolf B
      1. 0
        marctrix
        1. 0
          Rolf B
          1. 0
            marctrix
            1. 0
              Rolf B
              1. 0
                marctrix
      2. 0
        Barksalot
        1. 0
          Rolf B
          1. 0
            Barksalot
            1. 0
              Rolf B
  3. 0

    merkwürdiges Verhalten beim Hamburger

    Barksalot
    1. 0
      beatovich
    2. 0

      Update

      Barksalot
      1. 0
        marctrix
        1. 0
          Barksalot
          1. 0
            beatovich
            1. 0
              Barksalot
            2. 0
              Tabellenkalk
              • menschelei
          2. 0
            Gunnar Bittersmann
            • html
            1. 0
              Barksalot
              1. 0
                Gunnar Bittersmann
                1. 0
                  Barksalot
      2. 0
        Gunnar Bittersmann
        1. 0
          Barksalot
          1. 0
            Gunnar Bittersmann
            1. 0
              Gunnar Bittersmann
              1. 0
                Barksalot
                1. 0
                  Gunnar Bittersmann
            2. 0
              Barksalot
      3. 0
        Rolf B
        1. 0
          Barksalot
          1. 1
            Rolf B
        2. 3

          Destrukturierung von Objekten

          Orlok
          • javascript
          • programmiertechnik
          1. 1
            Rolf B

Hallo,

kann ich eine Schriftgröße dynamisch vergrößern/verkleinern?
http://barksalot.bplaced.net/barksalot.html

Derzeit mache ich es wie folgt

@media screen and (max-width: 940px) {
    .mainnav ul {
        display: none;
    }

    .pageheader {
        min-height: 16em;
    }

    .slogan {
        margin-top: 1.5em;
    }

    .slogan p {
        font-size: 1.0rem;
    }
}

Es ist einfach ein zu harter Sprung, welcher nicht schön ausschaut. Ich würde es gerne sanft mit der Bildschirmbreite anpassen lassen. Ist dieses irgendwie möglich?

Bis bald!
Meowsalot (Bernd)

  1. @@Barksalot

    Es ist einfach ein zu harter Sprung, welcher nicht schön ausschaut.

    Kein Nutzer schiebt die Browserfensterbreite hin und her.

    Ich würde es gerne sanft mit der Bildschirmbreite anpassen lassen. Ist dieses irgendwie möglich?

    Aber ja!

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      Kein Nutzer schiebt die Browserfensterbreite hin und her.

      oh aus eigener Erfahrung kann ich sage ich schiebe Fenster sehr oft hin und her und passe diese in der Größe an wenn ich Platz auf dem Bildschirm brauche. Ich schließe sehr ungern irgendwelche Programme.

      Aber ja! calc(a vw + b em) mit geeigneten Werten für a und b.

      Verstehe ich leider nicht. Welche Werte muss ich da denn einsetzten?

      Bis bald!
      Meowsalot (Bernd)

      1. Hallo,

        ok, hat fast funktioniert:

        .slogan p {
        	text-align: center;
        	font-size: 2.3rem;
            font-size: calc(1em + 1vw);  
        }
        

        jetzt habe ich noch einen unschönen Effekt bei kleineren Bildschirmen

        Dieses liegt am <br>

        <p>„Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt,<br>ist die Entwicklung zu einem praktischen Produkt!“</p>
        

        kann ich diesen irgendwie bei einer kleinen Größe Ignorieren?

        Bis bald!
        Meowsalot (Bernd)

        1. Du hast

          <p>„Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt,
          <br class="onlyOnBigScreens">ist die Entwicklung zu einem praktischen Produkt!“</p>
          

          verbunden mit

          @media screen and (max-width: 940px) {
            br.onlyOnBigScreens {
              display: none;
            }
          }
          

          schon versucht? Allerdings ist mir nicht ganz klar, was das <br> da überhaupt soll.

          1. Hallo Regina,

            danke dir, damit hat es funktioniert:
            http://barksalot.bplaced.net/barksalot.html

            Allerdings ist mir nicht ganz klar, was das <br> da überhaupt soll.

            Naja damit möchte ich auf großen Bildschirmen den Text in zwei Zeilen bringen.

            Bis bald!
            Meowsalot (Bernd)

            1. Moin,

              Allerdings ist mir nicht ganz klar, was das <br> da überhaupt soll.

              Naja damit möchte ich auf großen Bildschirmen den Text in zwei Zeilen bringen.

              Auf großen Bildschirmen kannst du den Text auch zoomen. Was spricht denn gegen

              <p style="max-width:40em">
              „Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt, ist die Entwicklung zu einem praktischen Produkt!“</p>
              

              ?

              Viele Grüße
              Robert

              1. Hallo Robert,

                ich möchte diesen Bereich

                ist die Entwicklung zu einem praktischen Produkt!

                auf großen Bildschirmen immer in einer zweiten Zeile stehen haben, sonst wird es zu lange und es sieht einfach nicht mehr schön aus.

                Bis bald!
                Meowsalot (Bernd)

                1. Moin,

                  ich möchte diesen Bereich

                  ist die Entwicklung zu einem praktischen Produkt!

                  auf großen Bildschirmen immer in einer zweiten Zeile stehen haben, sonst wird es zu lange und es sieht einfach nicht mehr schön aus.

                  Muss es denn exakt dieser Teilstring sein? max-width gibt nämlich die („nur“) die Maximalbreite vor, die die Browser für den Textumbruch nehmen.

                  Viele Grüße
                  Robert

                2. Hej Barksalot,

                  sonst wird es zu lange und es sieht einfach nicht mehr schön aus.

                  @Gunnar Bittersmann

                  für so etwas setzt man kein br ein!

                  Marc

                  1. @@marctrix

                    für so etwas setzt man kein br ein!

                    Da war ein k zu viel?

                    Siehe andere Antwort.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              2. @@Robert B.

                Was spricht denn gegen

                <p style="max-width:40em">
                „Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt, ist die Entwicklung zu einem praktischen Produkt!“</p>
                

                Dass Zeilenunbrüche nicht an den Stellen sind, wo man sie haben möchte.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. @@Regina Schaukrug

            <p>„Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt,
            <br class="onlyOnBigScreens">ist die Entwicklung zu einem praktischen Produkt!“</p>
            

            schon versucht? Allerdings ist mir nicht ganz klar, was das <br> da überhaupt soll.

            Mir ist nicht ganz klar, was das class="onlyOnBigScreens" da überhaupt soll.

            Das ist eine präsentationsbezogene Klasse, die

            1. nichts im HTML zu suchen hat.
            2. überflüssig ist:
            @media (max-width: 42em)
            {
            	.slogan br
            	{
            		display: none;
            	}
            }
            

            Wobei der Breakpoint dem Inhalt entsprechend zu wählen ist. Aber bitte in em, nicht in px

            Beispiel

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              danke, so brauche ich beim <br> keine extra Klasse. Eine Frage, kennst du zufällig eine schöne Schrift die nicht so fett ist wie bei meinem Slogen? Ich finde diese ist auf dem Handy viel zu Domminant und könnte ein wenig feiner dargestellt werden. Ich habe font-weight versucht, reagiert aber nicht auf die kleineren Werte.

              Bis bald!
              Meowsalot (Bernd)

              1. Hallo Barksalot,

                damit font-weight mit kleinen Werten funktioniert, muss die Schrift entsprechende Schriftschnitte anbieten.

                Im Moment hast Du Google Roboto drin und nur die woffs für font-weight:400 dabei. Sowas künstlich zu verfetten, das kann der Browser, aber abmagern, das ist nicht so einfach (wie viele von uns aus leidvoller Erfahrung wissen könnten 😂 ).

                Du kannst aber bei vielen Fonts mehrere Gewichte beim Generieren deiner Googlefont-Inkarnation auswählen. In Roboto ist von 100-900 alles dabei.

                Rolf

                --
                sumpsi - posui - clusi
                1. Hallo Rolf,

                  Du kannst aber bei vielen Fonts mehrere Gewichte beim Generieren deiner Googlefont-Inkarnation auswählen. In Roboto ist von 100-900 alles dabei.

                  danke dir. Ich hatte den Button Cusomize übersehen. Dahinter verbergen sich die restlichen Optionen.

                  Bis bald!
                  Meowsalot (Bernd)

                  1. Hej Barksalot,

                    Du kannst aber bei vielen Fonts mehrere Gewichte beim Generieren deiner Googlefont-Inkarnation auswählen. In Roboto ist von 100-900 alles dabei.

                    danke dir. Ich hatte den Button Cusomize übersehen. Dahinter verbergen sich die restlichen Optionen.

                    Es macht Sinn, die nicht alle einzubinden, die müssen sonst auch alle übertragen werden.

                    Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                    Marc

                    1. Hallo marctrix,

                      Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                      ich habe eigentlich vor nur mit einer Schrift zu arbeiten. Höchstens aber zwei. Mehr sollte man auf keinen Fall verwenden.

                      Bis bald!
                      Meowsalot (Bernd)

                    2. hallo

                      Hej Barksalot,

                      Du kannst aber bei vielen Fonts mehrere Gewichte beim Generieren deiner Googlefont-Inkarnation auswählen. In Roboto ist von 100-900 alles dabei.

                      danke dir. Ich hatte den Button Cusomize übersehen. Dahinter verbergen sich die restlichen Optionen.

                      Es macht Sinn, die nicht alle einzubinden, die müssen sonst auch alle übertragen werden.

                      Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                      Es werden nur Schriften verlangt, für die es Bedarf gibt. Bei bold, italic und regular bedeutet das für einen Font praktisch ca 75 kB innerhalb Latin.

                      oder ca 25kB pro Variante und Font.

                      woff2 vorausgesetzt.

                      1. Hej beatovich,

                        Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                        Es werden nur Schriften verlangt, für die es Bedarf gibt.

                        Das war meine Empfehlung.

                        Bei bold, italic und regular bedeutet das für einen Font praktisch ca 75 kB innerhalb Latin.

                        opensans mit allen Dicken mehrfach 200kb

                        woff2 vorausgesetzt.

                        Das macht ja auch Sinn, habe ich bei OpenSans nicht gefunden. Ich nutze Google Fonts so selten…

                        Marc

                        1. hallo

                          Hej beatovich,

                          Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                          Es werden nur Schriften verlangt, für die es Bedarf gibt.

                          Das war meine Empfehlung.

                          Hast du nur nicht so gesagt.

                          Es macht Sinn, die nicht alle einzubinden, die müssen sonst auch alle übertragen werden.

                          Der Browser fordert nur Fonts an, für die es Bedarf gibt, unabhängig davon, ob dein CSS 1000 Webfonts enthält.

                          1. Hej beatovich,

                            Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                            Es werden nur Schriften verlangt, für die es Bedarf gibt.

                            Das war meine Empfehlung.

                            Hast du nur nicht so gesagt.

                            Ich sagte: Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                            Ich denke, das klingt nach: so besser nicht machen, weil man MByte allein für Schriften nicht möchte?!?

                            Es macht Sinn, die nicht alle einzubinden, die müssen sonst auch alle übertragen werden.

                            Der Browser fordert nur Fonts an, für die es Bedarf gibt, unabhängig davon, ob dein CSS 1000 Webfonts enthält.

                            Ja, macht Sinn. 😂

                            Marc

                            1. hallo

                              Ich sagte: Wenn du mehrere Schriften mit allen Optionen hast, ist man schnell im Bereich von MByte…

                              Nein, es ist egal, wie viele Schriften du einbindest. Du musst effektiv diese Schriften auch im HTML benutzen. Und das geht eben nicht so schnell.

                              Ich denke, das klingt nach: so besser nicht machen, weil man MByte allein für Schriften nicht möchte?!?

                              Du musst schon eine Demoseite basteln, die alle Fonts demonstriert, und dabei noch über den Latin-Satz hinausgeht.

                              Dann hast du 6 Gewichte * 2 Varianten * 2 Sätze (latin + latin ext) = 24

                              24 * 20 kB = 500 kBytes

                        2. @@marctrix

                          Das macht ja auch Sinn, habe ich bei OpenSans nicht gefunden. Ich nutze Google Fonts so selten…

                          Besser ist auch.

                          Die Suche nach „open sans download“ führt z.B. zu Font Squirrel, wo man sich die Schrift runterladen kann. Auch als Webfont Kit (WOFF – Warum nicht auch WOFF2?)

                          LLAP 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                2. @@Rolf B

                  Sowas künstlich zu verfetten, das kann der Browser

                  Das sollte man aber nicht tun! Fettschrift ist etwas anderes als vom Browser verfettete Schrift.

                  Ebenso: Kursivschrift ist etwas anderes als vom Browser schräggestellte Schrift.

                  Du kannst aber bei vielen Fonts mehrere Gewichte beim Generieren deiner Googlefont-Inkarnation auswählen.

                  Dabei sollte man beachten, dass jeder Schriftschnitt ein eigener Font ist, der übertragen werden muss, wenn man keine variable fonts verwendet. (Ab heute auch im Firefoxauf dem Mac.)

                  Und dass man Webfonts besser selber hostet anstatt Google (o.a.) eine weitere Möglichkeit bietet, Nutzer zu tracken = auszuspionieren.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. hallo

                    Dabei sollte man beachten, dass jeder Schriftschnitt ein eigener Font ist, der übertragen werden muss,

                    sofern der Browser überhaupt Bedarf sieht...

                    wenn man keine variable fonts verwendet.

                    Die wohl in nächster Zeit nur gegen Bares zu haben sind.

                    1. @@beatovich

                      wenn man keine variable fonts verwendet.

                      Die wohl in nächster Zeit nur gegen Bares zu haben sind.

                      Nein. Source Sans Pro, Source Serif Pro und Source Code Pro von Adobe bspw. gibt’s frei.

                      Auch die FF Meta (zumindest bis Ende 2019).

                      https://v-fonts.com/

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. hallo

                        Auch die FF Meta (zumindest bis Ende 2019).

                        Jetzt habe ich mich schon aufeine Demo gefreut… Aber es gibt in diesem Jahr sicher noch ein FF Update.

                        1. @@beatovich

                          Auch die FF Meta (zumindest bis Ende 2019).

                          Jetzt habe ich mich schon aufeine Demo gefreut…

                          Auf so eine wie auf der Seite verlinkt?

                          LLAP 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. hallo

                            Jetzt habe ich mich schon aufeine Demo gefreut…

                            Auf so eine wie auf der Seite verlinkt?

                            ja...

                  2. Dabei sollte man beachten, dass jeder Schriftschnitt ein eigener Font ist, der übertragen werden muss, wenn man keine variable fonts verwendet. (Ab heute auch im Firefoxauf dem Mac.)

                    Was ich bislang an variable fonts gesehen habe, ist schon viel besser, als die Rendering-Engine einfach mal Bold/Italic raten zu lassen, ja. Aber ästhetisch finde ich die Ergebnisse von https://v-fonts.com/ immer noch gruselig, wenn ich die Schieberegler mal in die Extreme schiebe. Im Web vielleicht noch verschmerzbar, aber im Druck gibt das schnell Murks. Dennoch spannend!

            2. Das ist eine präsentationsbezogene Klasse, die

              1. nichts im HTML zu suchen hat.
              2. überflüssig ist:

              Hm. Der TO dazu:

              Naja damit möchte ich auf großen Bildschirmen den Text in zwei Zeilen bringen.

              Bei aller schönen Theorie über Semantik, Richtig oder Falsch, schwarz oder weiß (und all diese von vielen binär abgehandelten Sachverhalte) sehe ich die Sache so: Wenn die Existenz des <br> an sich lediglich "präsentationsbezogen" ist, dann sehe ich für die Kritik an meinem Vorschlag keine Grundlage, denn letztendlich verlangt Deine Kritik, dass ich Semantik hinzuerfinde, wo keine ist.

              Die Zweifel an der Richtigkeit des Vorgehens an sich habe ich mit der Aussage „Allerdings ist mir nicht ganz klar, was das <br> da überhaupt soll.“ zumindest für empfindsame Gemüter und aus meiner Sicht ausreichend deutlich formuliert.

              Auch der Hyperliquiditätsfaktor der Klassennamenvergabe geht gegen Null, wenn es von <br> mit derselben Aufgabe mehrere gibt und eine eindeutige Selektion ohne explizite Klasse womöglich nicht oder nur schwieriger (aufwändiger) machbar ist.

            3. Hej Gunnar,

              ich verstehe nicht, warum hier Desktop-first designed wird.

              Ich würde das so schreiben.

              HTML

              <blockquote class="slogan">
              <p>Lorem…</p>
              </blockquote>
              

              CSS:

              .slogan p {
                max-width: 40em;
              }
              

              Wenn man dann für große Screens irgendetwas anpassen möchte, dann mit

              @media (min-width: 42em)
              {
              	.slogan foo
              	{}
              }
              

              Ein br benötigt man in keinem Fall. Das dient nur dazu das Ende einer Zeile anzugeben. Dort wo eine Zeile wirklich zu Ende ist (also am Ende eines Verses bei Gedichten oder nach der Angabe einer Straße in einer Adresse).

              Marc

              1. @@marctrix

                Ein br benötigt man in keinem Fall.

                Nicht?

                Das dient nur dazu das Ende einer Zeile anzugeben. Dort wo eine Zeile wirklich zu Ende ist (also am Ende eines Verses bei Gedichten oder nach der Angabe einer Straße in einer Adresse).

                Ein Slogan kann auch sowas wie ein Gedicht sein, wo man einen Zeilenumbruch an bestimmten Stellen vorsieht. Also br. Semantisch völlig korrekt.

                Solch einen Zeilenumbruch über max-width zu regeln zu wollen, ist zum einen semantischer Unfug. Zum anderen geht das nur unter sehr eingeschränkten Bedingungen: bei einem Zweizeiler, bei dem die erste Zeile länger ist als die zweite. Und selbst dann ist es 💩, weil magic number.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hej Gunnar,

                  Ein br benötigt man in keinem Fall.

                  Nicht?

                  Das dient nur dazu das Ende einer Zeile anzugeben. Dort wo eine Zeile wirklich zu Ende ist (also am Ende eines Verses bei Gedichten oder nach der Angabe einer Straße in einer Adresse).

                  Ein Slogan kann auch sowas wie ein Gedicht sein, wo man einen Zeilenumbruch an bestimmten Stellen vorsieht.

                  Ja, ist hier aber nicht der Fall.

                  Also br. Semantisch völlig korrekt.

                  Nur wenn ich die Aufgabe (auf großen Bildschirmen möchte ich auch mindestens zwei Zeilen, auf kleinen habe ich eh mehrere) falsch verstanden habe.

                  Wenn die Zeile an einem bestimmten Punkt umgebrochen werden muss, dann muss auch dafür Sorge getragen werden, dass dieser Umbruch erkennbar wird - auch auf kleinen Bildschirmen. Da würde ich dann mit Einzügen o.ä. arbeiten.

                  So macht es für mich keinen Sinn. Den br irgendwo hinzusetzen, damit es irgendwie aussieht, ist semantisch falsch.

                  Marc

                  1. @@marctrix

                    Ein Slogan kann auch sowas wie ein Gedicht sein, wo man einen Zeilenumbruch an bestimmten Stellen vorsieht.

                    Ja, ist hier aber nicht der Fall.

                    IMHO doch:

                    „Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt,
                    ist die Entwicklung zu einem praktischen Produkt!“

                    Der Zeilenumbruch soll nicht irgendwo stattfinden, sondern zwischen den Teilsätzen, d.h. nach dem Komma.

                    Also nicht sowas wie

                    „Fast jeder kann sich eine Idee ausdenken. Was wirklich
                    zählt, ist die Entwicklung zu einem praktischen Produkt!“

                    Wobei man sich fragen könnte: Warum nicht zwischen den Sätzen, d.h. nach dem Punkt?

                    „Fast jeder kann sich eine Idee ausdenken.
                    Was wirklich zählt, ist die Entwicklung zu einem praktischen Produkt!“

                    Wenn die Zeile an einem bestimmten Punkt umgebrochen werden muss, dann muss auch dafür Sorge getragen werden, dass dieser Umbruch erkennbar wird - auch auf kleinen Bildschirmen.

                    Nein. Auf kleinen Bildschirmen mag es besser so aussehen:

                    „Fast jeder kann sich eine Idee ausdenken. Was
                    wirklich zählt, ist die Entwicklung zu einem
                    praktischen Produkt!“

                    Und nicht so:

                    „Fast jeder kann sich eine Idee ausdenken. Was
                    wirklich zählt,
                    ist die Entwicklung zu einem praktischen
                    Produkt!“

                    Der Zeilenumbruch an der gewünschten Stelle ist progressive enhancement bei genügend Platz.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Hej Gunnar,

                      Wobei man sich fragen könnte: Warum nicht zwischen den Sätzen, d.h. nach dem Punkt?

                      Eben. Und in dem Moment wo es nicht eindeutig ist, ist es IMHO willkürliches presentational markup — keine Semantik — und sollte nicht getan werden

                      Da es ein Detail ist und etwas mit der Interpretation von Texten zu tun hat, kann ich damit leben, dass du hier anderer Ansicht bist. Überzeugt bin ich jedenfalls nciht. 😉

                      Marc

                      1. @@marctrix

                        Wobei man sich fragen könnte: Warum nicht zwischen den Sätzen, d.h. nach dem Punkt?

                        Eben. Und in dem Moment wo es nicht eindeutig ist, ist es IMHO willkürliches presentational markup — keine Semantik — und sollte nicht getan werden

                        Es ist eindeutig – so wie sich der Inhaltsersteller das gedacht hat.

                        Das dieser da verschieden denken könnte, hat nichts mit HMTL zu tun – da vermischst du was.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hej Gunnar,

                          @@marctrix

                          Wobei man sich fragen könnte: Warum nicht zwischen den Sätzen, d.h. nach dem Punkt?

                          Eben. Und in dem Moment wo es nicht eindeutig ist, ist es IMHO willkürliches presentational markup — keine Semantik — und sollte nicht getan werden

                          Es ist eindeutig – so wie sich der Inhaltsersteller das gedacht hat.

                          Den Inhalt hat dem Vernehmen nach Henry Ford erstellt. Und der hat das wohl als ein zusammengehörendes Konstrukt gesagt - ohne Zeilen- oder sonstigen Brüche.

                          Wir anderen interpretieren nur. Wenn das der OP gemacht hätte, wäre es noch eine Sache, aber es geht ja nach seiner Aussage rein um Optik, nicht um Semantik. Daher ist es egal, wo ungebrochen wird und max-width macht Sinn.

                          Wie auch immer, ich denke die Argumente wiederholen sich allmählich 😉

                          Marc

                          1. Hallo marctrix,

                            Wenn das der OP gemacht hätte, wäre es noch eine Sache, aber es geht ja nach seiner Aussage rein um Optik, nicht um Semantik. Daher ist es egal, wo ungebrochen wird und max-width macht Sinn.

                            nee nee, so egal ist das nicht ;) Muss alles schon ein wenig Sinn ergeben. Umgebrochen muss schon richtig, sonst ist es schwer zu lesen bzw. macht irgendwie kein wirklichen Sinn mehr.

                            Bis bald!
                            Meowsalot (Bernd)

                            1. Hej Barksalot,

                              nee nee, so egal ist das nicht ;) Muss alles schon ein wenig Sinn ergeben. Umgebrochen muss schon richtig, sonst ist es schwer zu lesen bzw. macht irgendwie kein wirklichen Sinn mehr.

                              Gut, wenn du da einen sinnvollen Einschnitt siehst, ist br korrekt.

                              Marc

                          2. @@marctrix

                            Den Inhalt hat dem Vernehmen nach Henry Ford erstellt.

                            Wenn du Erbsen zählen willst: nein, der Übersetzer. 😜

                            Und der hat das wohl als ein zusammengehörendes Konstrukt gesagt - ohne Zeilen- oder sonstigen Brüche.

                            Aber mit Punkt und Komma. Das sind Sprechpausen, die sich als Zeilenumbruchstelle anbieten.

                            BTW, Zeilen sind ein Konstrukt der Schriftsprache. Zeilenumbrüche kann man kaum sagen. 😜

                            LLAP 🖖

                            --
                            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      2. Hallo marctrix,

                        Eben. Und in dem Moment wo es nicht eindeutig ist, ist es IMHO willkürliches presentational markup — keine Semantik — und sollte nicht getan werden

                        Genau. So wie der Künstler es wollte.

                        Bis demnächst
                        Matthias

                        --
                        Rosen sind rot.
      2. @@Barksalot

        calc(a vw + b em) mit geeigneten Werten für a und b.

        Verstehe ich leider nicht. Welche Werte muss ich da denn einsetzten?

        Der Grafikdesigner hätte bspw. auf kleinen Schirmen („mobile“ – man beachte die Anführungszeichen!) 16px Schriftgröße, auf großen Schirmen („desktop“) 18px. (Wie jetzt, Pixel?? Darum kümmern wir uns später.)

        Sie hat aber nicht dazugesagt, was „klein“ und „groß“ in Zahlen heißt. Nehmen wir bspw. 320px Breite als Bezugspunkt für „klein“ und 960px für „groß“.

        Dazwischen und darüber hinaus wollen wir linear interpolieren. Wir suchen also die lineare Funktion f(x) = mx + n, für die f(320) = 16 und f(960) = 18 ist.

        Der Anstieg ist dann m = (18 − 16)/(960 − 320) = (18 − 16)/640. (Wir könnten das noch zu 1/320 vereinfachen, werden später aber sehen, warum wir das nicht tun.)

        Nun könnten wir n berechnen. Geht aber auch anders: Der Punkt A gegenüber dem Koordinatenursprung um 320 nach rechts und um 16 nach oben verschoben – und damit auch unsere Funktionsgeade ist gegenüber der Geraden y = mx. Unsere Funktionsgleichung können wir also so angeben: f(x) = m(x − 320) + 16.

        $$f(x) = \frac{18 - 16}{640} \left( x - 320 \right) + 16 = \frac{18 - 16}{640} x - \frac{18 - 16}{640} \cdot 320 + 16 = \frac{18 - 16}{640} x - \frac{18 - 16}{2} + 16$$

        $$f(x) = \frac{18 - 16}{640} x + 16 - \frac{18 - 16}{2}$$

        Übersetzt in CSS:

        body { font-size: calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1px) }
        

        Und wir wollen keine px. Also:

        body { font-size: calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16) }
        

        Die Hauptüberschrift soll bspw. 24px für „klein“ und 36px für „groß“ sein. Jetzt sehen wir, warum wir die 16 und die 18 so stehenlassen haben: so sind sie einfach ersetzt:

        h1   { font-size: calc((36 - 24)/640 * 100vw + (24 - (36 - 24)/2) * 1rem/16) }
        

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          nice.

          Und die Grenzwerte jetzt noch in CSS-Variablen verpacken 😀

          Rolf

          --
          sumpsi - posui - clusi
          1. @@Rolf B

            Und die Grenzwerte jetzt noch in CSS-Variablen verpacken 😀

            Das ging mir auch durch den Sinn: immer wieder dieselbe Formel mit unterschiedlichen Werten – ein idealer Anwendungsfall für CSS-Va custom properties.

            (Sagte ich schon, dass custom properties mehr sind als CSS-Variablen? Äh nö, noch nicht. Nächste Woche erst.)

            Dann erinnerte ich mich: there’s a darkness on the Edge of town (wie Springsteen singt).

            Doch dann: Macht ja nichts. Edge bekommt wie alle anderen Browser, die custom properties nicht unterstützen, eine feste Schriftgröße. Die Interpolation ist progressive enhancement. Dann ist die Schriftgröße auf Windows-Phones halt etwas größer als auf anderen Geräten.

            Also mal einen Codepen erstellt. Und wie wir sehen, geht das so nicht.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              äh, doch? Wenn man es 1:1 in Variablen übersetzt.

              Deine calc()-erei (die ich in h2/h3 mal stehengelassen habe) kapiere ich nicht. Warum rechnest Du schon bei der Zuweisung an die Variablen um, wenn es nachher in der font-size Formel nochmal passiert?

              Abgesehen ist die Dunkelheit seit Edge 15 einer etwas krabbeligen Dämmerung gewichen und seit der Oktoberrevolution[1] voriges Jahr, die uns Edge 16 brachte, soll auch Microsoft ein Licht aufgegangen sein. (Quelle: https://caniuse.com/#feat=css-variables)

              Rolf

              --
              sumpsi - posui - clusi

              1. Revolution: Drehung, hier: Weiter-Drehung, Folge-Release ↩︎

              1. @@Rolf B

                äh, doch? Wenn man es 1:1 in Variablen übersetzt.

                Äh, ja. Ich Trottel.

                Deine calc()-erei (die ich in h2/h3 mal stehengelassen habe) kapiere ich nicht. Warum rechnest Du schon bei der Zuweisung an die Variablen um, wenn es nachher in der font-size Formel nochmal passiert?

                Ich wollte es dort rausnehmen – was ich dann vergessen habe. * 1rem/16 muss dann dann natürlich weg. Außerdem muss man sich im ersten Teil der rem-Einheit entledigen, also durch 1rem teilen – was daran scheitert, dass dies innerhalb von calc() (noch) nicht möglich ist.

                Bleibt also, es so zu tun, wie du es gezeigt hast.

                Abgesehen ist die Dunkelheit seit Edge 15 einer etwas krabbeligen Dämmerung gewichen und seit der Oktoberrevolution¹ voriges Jahr, die uns Edge 16 brachte, soll auch Microsoft ein Licht aufgegangen sein. (Quelle: https://caniuse.com/#feat=css-variables)

                Äh, ja. Ich Trottel.

                ¹ Revolution: Drehung, hier: Weiter-Drehung, Folge-Release

                😄

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo Gunnar,

                  Ich Trottel.

                  Hat dich irgendeine(r) deiner 1000 Mitfahrer(innen) bei der Anreise nach Dortmund abgelenkt?

                  Viel Spaß dort, leider ohne mich.

                  Rolf

                  --
                  sumpsi - posui - clusi
                2. @@Gunnar Bittersmann

                  Bleibt also, es so zu tun, wie du es gezeigt hast.

                  Hab ich in besagtem Pen gleich mal getan. Der kaputte Stand war nichts, was für die Ewigkeit konserviert werden müsste.

                  Was dann nicht geht: den Elementen eine fixe Schriftgröße als Fallback verpassen; dann erben sie die Berechnung der Schriftgröße nicht mehr vom body. Man müsste für die einzelnen Elementen die Berechnung nach den Fallbacks deklarieren, wie hier gezeigt. Irgendwie unschön.

                  Dann würde ich wohl doch lieber mit den Fallbacks aus dem Browserstylesheet vorliebnehmen.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            2. @@Gunnar Bittersmann

              CSS-Va custom properties.

              (Sagte ich schon, dass custom properties mehr sind als CSS-Variablen? Äh nö, noch nicht. Nächste Woche erst.)

              Jetzt ist es vorbei. Und dieses Beispiel hab ich in dem Vortrag mit verwurstelt.

              Video gibt’s zu sehen, Folien auch.

              Titelfolie

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hallo Gunnar Bittersmann,

                Folien auch

                Die Schrift ist recht anstrengend zu lesen und stellt somit zumindest auf dem Handy eine Zugänglichkeitsbarriere dar.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
                1. @@Matthias Apsel

                  Die Schrift ist recht anstrengend zu lesen und stellt somit zumindest auf dem Handy eine Zugänglichkeitsbarriere dar.

                  Du meinst die auf Folie 6? 😉

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. Hallo Gunnar,

                    Comic Sans ist ein Augenschmaus im Vergleich zu dieser lieben Gerda. Schnörkel und ziemlich gewichtig, das ist anstrengend.

                    Rolf

                    --
                    sumpsi - posui - clusi
                    1. @@Rolf B

                      Comic Sans ist ein Augenschmaus im Vergleich zu dieser lieben Gerda.

                      Du trollst‽

                      Schnörkel und ziemlich gewichtig, das ist anstrengend.

                      Handschriftartig eben. LiebeGerda (und LiebeDoris) sind sicher nicht für Fließtext geeignet. Die Verwendung bei dem Zitat war vielleicht schon grenzwertig. Aber als Display-Schriften (Überschriften, …) machen sie sich ganz gut, wenn’s denn wie handgeschrieben aussehen soll.

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. Hallo Gunnar,

                        Du trollst‽

                        Ich äußere eine gemackliche Meinung.

                        Rolf

                        --
                        sumpsi - posui - clusi
                  2. Hej Gunnar,

                    Du meinst die auf Folie 6? 😉

                    Die danach ist schlimmer.

                    Marc

              2. Hej Gunnar,

                @@Gunnar Bittersmann

                CSS-Va custom properties.

                (Sagte ich schon, dass custom properties mehr sind als CSS-Variablen? Äh nö, noch nicht. Nächste Woche erst.)

                Jetzt ist es vorbei. Und dieses Beispiel hab ich in dem Vortrag mit verwurstelt.

                Video gibt’s zu sehen, Folien auch.

                Finde ich richtig gut. Leider gibt es tatsächlich ein Problem, wenn man vw für die Berechnung von Schriftgrößen einsetzt, aber nicht so, wie vom Fragesteller impliziert. Vergrößern geht prima, das Problem ist eher, wenn man von em als Einheit für Breiten ausgeht, werden Schriften größer, je kleiner man die wählen möchte (weil der Viewport in em gemessen "größer" wird, es passen halt mehr kleine "m" in denselben Viewport, wenn wenn die "m" kleiner werden).

                Barrierefreiheit bedeutet aber, dass man Schriften an die eigenen Bedürfnisse anpassen kann — auch wenn die WCAG nur die Vergrößerung vorsieht und überprüft und als success criterion aufgenommen hat. Leider!

                Hintergrund: es gibt Menschen mit einem sehr kleinen, aber u.U. noch scharfen Gesichtsfeld (Tunnelblick). Diese möchten in dem kleinen Ausschnitt, den sie wahrnehmen können, möglichst mindestens ein Wort sehen. Denen werden dann Schriften aber beim verkleinern der Schrift absurderweise immer größer angezeigt…

                Hast du dazu eine Idee, @Gunnar Bittersmann ?

                Marc

                1. hallo

                  Finde ich richtig gut. Leider gibt es tatsächlich ein Problem, wenn man vw für die Berechnung von Schriftgrößen einsetzt, aber nicht so, wie vom Fragesteller impliziert. Vergrößern geht prima, das Problem ist eher, wenn man von em als Einheit für Breiten ausgeht, werden Schriften größer, je kleiner man die wählen möchte (weil der Viewport in em gemessen "größer" wird, es passen halt mehr kleine "m" in denselben Viewport, wenn wenn die "m" kleiner werden).

                  Barrierefreiheit bedeutet aber, dass man Schriften an die eigenen Bedürfnisse anpassen kann — auch wenn die WCAG nur die Vergrößerung vorsieht und überprüft und als success criterion aufgenommen hat. Leider!

                  Hintergrund: es gibt Menschen mit einem sehr kleinen, aber u.U. noch scharfen Gesichtsfeld (Tunnelblick). Diese möchten in dem kleinen Ausschnitt, den sie wahrnehmen können, möglichst mindestens ein Wort sehen. Denen werden dann Schriften aber beim verkleinern der Schrift absurderweise immer größer angezeigt…

                  Hat jetzt nur bedingt mit dem Thema zu tun, aber dein Hinweis auf den Tunnelblick ist für mich ein weiteres Indiz, dass eine optimale Userschriftgrösse weder in pixel noch mm sondern nur in einem Bogenmass abgebildet werden kann.

                  Dazu müsste er aber in der Lage sein, seinen Abstand vom Anzeigegerät adhoc zu definieren, so dass daraus eine Schriftgrösse abgeleitet werden kann.

                  Mit der Zoom-Funktion haben wir eigentlich diese Möglichkeit. Und wir können den Bedürfnisse nur gerecht werden, wenn wir (als Autoren) Zoom und Basisschriftgrösse nicht voneinander abhängig machen.

                  Mich persönlich nervt es auch, wenn man mir am Desktop eine mittels vw aufgeblasene mobile-Version präsentiert, denn ich müsste unwillkürlich 2 Schritte zurückgehen. Gleichzeitig wird aber erwartet, dass ich die Website bediene.

                  Freilich gibt es Ausnahmen (z.B. meine Showtime, welche einen Frame optimal im viewport darstellt). Hier hat der Betrachter nur die Möglichkeit, entweder den viewport zu verändern (grösser / kleiner) oder seinen Abstand zum Viewport zu ändern, was sich nur deshalb legitimieren kann, weil es eine Showtime ist, die Zeitweise ohne Interaktion auskommt.

                  Die Analogie etwa wäre eine Leinwand im public-viewing wo jeder Betrachter seinen eigenen idealen Platz relativ zur Leinwand finden muss.

    2. Hello,

      Es ist einfach ein zu harter Sprung, welcher nicht schön ausschaut.

      Kein Nutzer schiebt die Browserfensterbreite hin und her.

      Doch! Ich mache das oft, wenn ich ein Fenster von meinem 5:4 (1280 X 1024) auf den Schirm 16:9 (1920 X 1080) schiebe oder an einem anderen Arbeitsplatz sogar auf einen noch größeren.

      Da sind Nachjustierungen immer notwendig.

      Ob sich die Schriftgröße aber entsprechend der PixelZAHL, oder besser entsprechend der PixelGRÖSSE anpassen sollte, bleibt hier außerdem die Frage!

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
    3. hallo

      Kein Nutzer schiebt die Browserfensterbreite hin und her.

      Von zoomen ganz zu schweigen.

  2. Hallo,

    habe ich irgendwie die Möglichkeit die Menüpunkte mittig zwischen die Striche zu bekommen? Und irgendwie gefallen mir die Icons noch nicht. Es springt hin und her da das X kleiner als der Hamburger ist. Bekommt man dieses irgendwie in den Griff? Oder soll ich auf die Icons komplett verzichten oder doch lieber auf den Text?

    Was macht ihr eigentlich wenn ihr total genervt seid weil etwas nicht so ausschaut wie man es selbst in einem Grafikprogramm vorgebaut hat? Dort sieht immer alles so richtig perfekt aus, online sieht es einfach nur scheiße aus. Oder lege ich einfach auf zu viele Feinheiten wert?

    Und was sagt ihr so allgemein zu meiner Navigation und zum Kopf der Seite? Links kommt später natürlich noch ein vernünftiges Logo hin.

    Bis bald!
    Meowsalot (Bernd)

    1. Moin,

      warum hast du eigentlich einen neuen Namen?

      habe ich irgendwie die Möglichkeit die Menüpunkte mittig zwischen die Striche zu bekommen?

      Definiere bitte „mittig“.

      Und irgendwie gefallen mir die Icons noch nicht.

      Welche Icons?

      Was macht ihr eigentlich wenn ihr total genervt seid weil etwas nicht so ausschaut wie man es selbst in einem Grafikprogramm vorgebaut hat? Dort sieht immer alles so richtig perfekt aus, online sieht es einfach nur scheiße aus. Oder lege ich einfach auf zu viele Feinheiten wert?

      Kann es sein, dass das Grafikprogramm pixelbasiert ist?

      Viele Grüße
      Robert

      1. Hallo Robert,

        warum hast du eigentlich einen neuen Namen?

        mich hat jemand von Youtube angeschrieben es nutzt den Namen Meowsalot schon lange für seine Tutorials ob ich bereit wäre diesen zu ändern. Klar warum nicht.

        Definiere bitte „mittig“.

        Auf meinem Screenshot sieht du über und unter jedem Wort eine dünne Linie. Das Wort hätte ich jetzt gerne zentriert dazwischen stehen (von oben nach unten).

        Welche Icons?

        Das X und der Hamburger

        Kann es sein, dass das Grafikprogramm pixelbasiert ist?

        Ich weiß nicht so recht auf was Adobe XD bassiert. Ich glaube aber auf PX.

        Bis bald!
        Meowsalot (Bernd)

        1. Moin Bernd,

          Definiere bitte „mittig“.

          Auf meinem Screenshot sieht du über und unter jedem Wort eine dünne Linie. Das Wort hätte ich jetzt gerne zentriert dazwischen stehen (von oben nach unten).

          Mach das doch mit CSS:

          nav ul {
            list-style-type: none;
          }
          nav li {
            border-bottom: 1px solid white;
            padding: .25em 0;
          }
          
          <nav>
            <ul>
              <li>Startseite</li>
              <li>Magazin</li>
              <li>Wir über uns</li>
              <li>Leistungen</li>
              <li>Kontakt</li>
            </ul>
          </nav>
          

          Kann es sein, dass das Grafikprogramm pixelbasiert ist?

          Ich weiß nicht so recht auf was Adobe XD bassiert. Ich glaube aber auf PX.

          Dann könnte es daran liegen.

          Viele Grüße
          Robert

    2. Hej Barksalot,

      habe ich irgendwie die Möglichkeit die Menüpunkte mittig zwischen die Striche zu bekommen?

      flexbox

      Und irgendwie gefallen mir die Icons noch nicht.

      Nimm andere, fontawesome ist in der Version 4 kostenlos und alle Icons liegen als SVGs vor.

      Es springt hin und her da das X kleiner als der Hamburger ist. Bekommt man dieses irgendwie in den Griff?

      Da geht so einiges

      Marc

    3. Hallo Barksalot,

      nenn Dich doch einfach... "Bernd" 😂

      Das Springen des Button geht weg wenn Du ihm bspw. eine feste width und line-height gibst (z.B. 5.5em Breite und 1.2em line-height).

      Das Outline solltest Du dem Button keinesfalls sperren, das macht eine Tastaturbedienung sehr schwer.

      Mittige Menüpunkte...

      Meinst Du vertikal? Verteile deinen margin-top auf -top und -bottom. Oder setze den vertikalen Margin auf 0 und steuere die Abstände über das padding des li Element.

      Meinst Du horizontal? Gib im @media-Block für Mobilgeräte den a Elementen eine feste Breite (z.B. 10em oder 12em) und setze auto für margin-left und margin-right.

      Ich habe mir den Rest der Styles jetzt nicht angeschaut. Ob man Dinge mit margin am Kind oder padding am Parent löst, kommt auch immer auf das Umfeld an. Bei Dir musst Du die Positionen ohnehin tunen, je nach dem, ob der @media Selektor zuschlägt.

      Rolf

      --
      sumpsi - posui - clusi
      1. Hej Rolf,

        Meinst Du horizontal? Gib im @media-Block für Mobilgeräte den a Elementen eine feste Breite (z.B. 10em oder 12em) und setze auto für margin-left und margin-right.

        Dann ist aber nciht mehr die ganze Fläche, die ich als Klickbar erwarten würde, anklickbar.

        Wenn text-align: center nicht reicht, müssten die Texte in den a-Elementen noch in ein span, das dann ausgerichtet wird.

        Marc

        1. Hallo marctrix,

          Oh. Stimmt.

          Also a Elemente über die volle Breite, darin ein div (kein span) mit dem Text und fester Breite, und das hat margin:auto.

          Rolf

          --
          sumpsi - posui - clusi
          1. Hej Rolf,

            Also a Elemente über die volle Breite, darin ein div (kein span) mit dem Text und fester Breite,

            div würde ich in einem a nicht nehmen, auch wenn es inzwischen erlaubt ist. Wohl aus alter Gewohnheit…

            Marc

            1. Hallo marctrix,

              ich gebe zu, ich habe mich auch erstmal gekrümmt. ein div ist kein phrasing Content. Aber was ist ein span mit display: block?

              Rolf

              --
              sumpsi - posui - clusi
              1. Hej Rolf,

                Hallo marctrix,

                ich gebe zu, ich habe mich auch erstmal gekrümmt. ein div ist kein phrasing Content. Aber was ist ein span mit display: block?

                Wie gesagt, es ist ja inzwischen zulässig. Muss / soll es denn block sein? Oder inline-block?

                Oder reicht es, dem a links und rechts padding zu geben? - Vermutlich schon. Hatte ich gestern nciht dran gedacht, aber ich denke, das span kann wieder weg…

                Marc

      2. Hallo Rolf,

        nenn Dich doch einfach... "Bernd" 😂

        der Namen war soweit ich mich dran erinnern kann schon vergeben 😂

        Das Springen des Button geht weg wenn Du ihm bspw. eine feste width und line-height gibst (z.B. 5.5em Breite und 1.2em line-height).

        leider springt er auch weiterhin. Schau mal auf das Wort Menü wenn die Navigation auf und zu ist.

        Das Outline solltest Du dem Button keinesfalls sperren, das macht eine Tastaturbedienung sehr schwer.

        ich wollte sie eigentlich nicht entfernen. Beim Klicken gibt es so einen unschönen blauen Rand, deshalb habe ich sie komplett entfernt. Gibt es eine alternative?

        Meinst Du vertikal? Verteile deinen margin-top auf -top und -bottom. Oder setze den vertikalen Margin auf 0 und steuere die Abstände über das padding des li Element.

        Danke, hat wunderbar geklappt. Jetzt stehen sie in der Mitte.

        Bis bald!
        Meowsalot (Bernd)

        1. Hallo Barksalot,

          die Zeichen ☰ und × sind unterschiedlich breit. Du musst also dem span eine Breite geben.

          Damit das funktioniert, musst Du im expanded=false Fall noch ein display:inline-block für .offen zuordnen, sonst ist es per Default display:inline und nimmt keine width an.

              [aria-expanded="false"] .offen {
                  display: inline-block;
              }
          
             .mainnav button span { width: 1em;}
          

          So richtig zufrieden bin ich mit diesem CSS Grab aber nicht. All dies Markup und CSS Gedöne nur, um ein Zeichen auf fixe Breite zu bekommen. Es sieht unelegant aus. Ich habe gerade nur keine bessere Idee.

          Rolf

          --
          sumpsi - posui - clusi
          1. Hallo Rolf,

            danke dir. Oder ich nutze wie @marctrix geschrieben hat ein SVG Icon, dann wären die beiden gleich groß? Oder soll ich doch auf https://jonsuh.com/hamburgers/ setzen?

            Bis bald!
            Meowsalot (Bernd)

            1. Hallo Bernd,

              SVG kann heutzutage nichts mehr schaden.

              Und du könntest auch das Icon per ::before einsteuern, abhängig vom expanded Zustand, dann brauchst Du nur eine Regel um das Pseudoelement zu erzeugen und eine zweite um bei expanded das Icon umzuschalten.

              Wege über Wege…

              Rolf

              --
              sumpsi - posui - clusi
  3. Hallo,

    ich habe ein merkwürdiges Verhalten beim Hamburger. Warum wird dieser auf dem Handy nicht weiß dargestellt?

    Auf dem Desktop ist er weiß

    Bis bald!
    Meowsalot (Bernd)

    1. hallo

      Gammelfleisch Hamburger?

    2. Hallo,

      jetzt hat meine Navigation SVG Icons
      http://barksalot.bplaced.net/barksalot.html

      Die Ausrichtung habe ich mit display:flex gemacht.

      Was sagt ihr dazu? Brauchbar?

      Bis bald!
      Meowsalot (Bernd)

      1. Hej Barksalot,

        jetzt hat meine Navigation SVG Icons
        http://barksalot.bplaced.net/barksalot.html

        Die Ausrichtung habe ich mit display:flex gemacht.

        Brauchbar?

        Yo

        Aber nach wie vor würde ich ein blockquote für den Slogan nehmen!

        Marc

        1. Hallo marctrix,

          Aber nach wie vor würde ich ein blockquote für den Slogan nehmen!

          so besser?

          <blockquote lang="de" class="slogan">
          			<p>„Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt, <br>ist die Entwicklung zu einem praktischen Produkt!“</p>
          			<footer><cite>(Henry Ford)</cite></footer>
          		</blockquote>
          

          http://barksalot.bplaced.net/barksalot.html

          Bis bald!
          Bernd

          1. hallo

            Hallo marctrix,

            Aber nach wie vor würde ich ein blockquote für den Slogan nehmen!

            so besser?

            <blockquote lang="de" class="slogan">
            			<p>„Fast jeder kann sich eine Idee ausdenken. Was wirklich zählt, <br>ist die Entwicklung zu einem praktischen Produkt!“</p>
            			<footer><cite>(Henry Ford)</cite></footer>
            		</blockquote>
            

            Fast. Jetzt musst du nur noch dein lorem Ipsum durch realen Inhalt ersetzen.

            1. Hallo beatovich,

              Fast. Jetzt musst du nur noch dein lorem Ipsum durch realen Inhalt ersetzen.

              Sehen wir beide etwas unterschiedliches? Von lorem Ipsum kann ich nichts sehen.

              Bis bald!
              Bernd

            2. Hallo,

              Fast. Jetzt musst du nur noch dein lorem Ipsum durch realen Inhalt ersetzen.

              Hast du in einer ersten Version von "realem Irrsinn" geschrieben, oder warum hab ich das zuerst so gelesen?

              Gruß
              Kalk

          2. @@Barksalot

            <blockquote lang="de" class="slogan">
            

            Wenn sich die Sprache innerhalb des Dokuments nicht ändert, brauchst du keine weiteren lang-Attribute.

            Beim html-Element brauchst du aber eins, um die Sprache fürs ganze Dokument anzugeben.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              Wenn sich die Sprache innerhalb des Dokuments nicht ändert, brauchst du keine weiteren lang-Attribute.

              ok, habe ich auch geändert.

              Bis bald!
              Bernd

              1. @@Barksalot

                ok, habe ich auch geändert.

                Ich sehe kein lang-Attribut am html-Element.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo Gunnar,

                  Ich sehe kein lang-Attribut am html-Element.

                  man(n) sollte die Datei auch hochladen. Jetzt sollte es zu sehen sein:
                  http://barksalot.bplaced.net/barksalot.html

                  Bis bald!
                  Bernd

      2. @@Barksalot

        http://barksalot.bplaced.net/barksalot.html Was sagt ihr dazu? Brauchbar?

        Nicht so ganz schlecht.

        Screenshot

        Aber wie man im Screenshot (nicht) sieht, ist so gut wie gar nicht zu erkennen, wenn der Menü-Button den Fokus hat. Du musst du mit .mainnav button:focus nochmal ran.

        Wozu soll das <div class="container"> da gut sein? Weg damit! Das nav-Element kann gleich die Flexbox sein. Wenn ich das schaffe, schaffst du das auch.

        Beim Zitat fehlt Padding. Und bei dieser Viewportbreite (520px) sollte das br nach dem Komma noch wirken?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          Aber wie man im Screenshot (nicht) sieht, ist so gut wie gar nicht zu erkennen, wenn der Menü-Button den Fokus hat. Du musst du mit .mainnav button:focus nochmal ran.

          hab es geändert, jetzt besser?

          .mainnav button:focus {
             outline: none;
             border: 1px solid #fff;
          }
          

          Wozu soll das <div class="container"> da gut sein? Weg damit!

          Schau dir mal beide Versionen an:

          Mit Container:
          http://barksalot.bplaced.net/barksalot-1.html

          Ohne Container:
          http://barksalot.bplaced.net/barksalot.html

          Wenn es dir nicht auffällt, achte mal auf den Strich unterhalb der Navigation wie weit dieser jeweils geht.

          Beim Zitat fehlt Padding. Und bei dieser Viewportbreite (520px) sollte das br nach dem Komma noch wirken?

          Behoben. Jetzt besser?

          Bis bald!
          Bernd

          1. @@Barksalot

            hab es geändert, jetzt besser?

            Ja, besser. Du kannst den Button aber ruhig noch mehr hervorheben: bspw. weißer Hintergrund, Schrift dunkel.

            Den gepunkteten Rahmen kriegst du im Firefox nicht mit
            button { outline: none } weg; da musst du schon mit
            button::-moz-focus-inner { border: none } ran.

            Schau dir mal beide Versionen an:

            Kein Unterschied.

            Wenn es dir nicht auffällt, achte mal auf den Strich unterhalb der Navigation wie weit dieser jeweils geht.

            Von einem Fensterrand zum anderen.

            Beim Zitat fehlt Padding. Behoben. Jetzt besser?

            Nö.

            Screenshot

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. @@Gunnar Bittersmann

              Wenn es dir nicht auffällt, achte mal auf den Strich unterhalb der Navigation wie weit dieser jeweils geht.

              Von einem Fensterrand zum anderen.

              Ah, Fenster noch breiter machen, dann ist ein Unterschied.

              Wobei die Variante ohne div, wo der Strich nicht über die volle Fensterbreite geht, durchaus ihren Charme hat.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hallo Gunnar,

                Wobei die Variante ohne div, wo der Strich nicht über die volle Fensterbreite geht, durchaus ihren Charme hat.

                ganz ehrlich das habe ich auch schon gedacht. Aber dennoch würde mich es interessieren ob man den Strich auch ohne zusätzlichem DIV über die ganze Breite bekommt? Auf der anderen Seite stört das DIV auf niemanden?

                Bis bald!
                Bernd

                1. @@Barksalot

                  Aber dennoch würde mich es interessieren ob man den Strich auch ohne zusätzlichem DIV über die ganze Breite bekommt?

                  Geht: nav über volle Breite mit padding-left- und padding-right- Werten, die mit calc() berechnet werden. Siehe Darstellungsproblem.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            2. Hallo Gunnar,

              Ja, besser. Du kannst den Button aber ruhig noch mehr hervorheben: bspw. weißer Hintergrund, Schrift dunkel.

              Den gepunkteten Rahmen kriegst du im Firefox nicht mit
              button { outline: none } weg; da musst du schon mit
              button::-moz-focus-inner { border: none } ran.

              habe ich nochmals geändert:

              .mainnav button:focus {
                 outline: none;
                 border: 1px solid #fff;
                 background: #fff;
                 color: #000;
              }
              
              .mainnav button::-moz-focus-inner { border: none }
              

              Von einem Fensterrand zum anderen.

              Auf dem Handy ja, aber schau mal auf einem Desktop Rechner

              Beim Zitat fehlt Padding. Behoben. Jetzt besser?
              Nö.

              Komisch, ich sehe jetzt ein Abstand zum Rand

              Ich sehe gerade der Text innerhalb vom Button ist noch nicht genau in der Mitte, der ist irgendwie noch zu weit oben. Da muss ich wohl nochmals ran.

              Bis bald!
              Bernd

      3. Hallo Barksalot,

        dein Eventhandler ist falsch. Klickt man auf das Icon statt auf den Text "Menü", geht das Menü zwar auf, aber nicht zu.

        In beiden Fällen ist dein target der path, nicht der button. Das Öffnen funktioniert aber, weil der Path des Hamburger-Icon kein aria-expanded Attribut hat und Du deshalb aria-expanded am Button auf true setzt.

        Ursache ist hier:

        function( { target } ) {
           ...
        }
        

        Du übernimmst das target-Property aus dem Event-Objekt, das ist aber bei Klick auf das Icon der path, nicht der button. Du brauchst das currentTarget Property.

        target: Welches DOM Element hat das Event ausgelöst currentTarget: An welchem DOM Element blubbert das Event gerade vorbei.

        Bei der Gelegenheit: Danke für das Beispiel zur Objektdestrukturierung. Dass das bei Parametern auch geht, hatte ich gar nicht auf dem Schirm.

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo Rolf,

          danke für deinen Hinweis. Ich habe im Wiki nachgeschaut was du genau meinst, leider verstehe ich nicht wie ich dieses auf meine Navigation anwenden kann.

          Aber meinst du nicht, dass die Gefahr ziemlich kein ist, nur den Button mit dem Finger zu erwischen? Mir wäre das Problem überhaupt nicht aufgefallen wenn ich die Seite nicht extrem vergrößert hätte.

          Bis bald!
          Bernd

          1. Hallo Barksalot,

            was verstehst Du denn nicht? Den Unterschied zwischen target und currentTarget habe ich doch erläutert.

            Und die Gefahr ist nicht klein. Es gibt auch Leute mit spitzen Fingern, oder einem Stylus. Oder einem schmalen Desktop-Fenster, dann kann man mit der Maus zielen.

            Ein Eventhandler bekommt ein Event-Objekt übergeben.

            function( { target } )  {
            }
            

            diese Schreibweise verwendet Objekt-Dekonstruktion, ein relativ neues JavaScript-Feature, um aus diesem Event-Objekt automatisch das target-Property herauszuholen. Wenn man mit spitzem Finger an die falsche Stelle tippt (oder mit einem Stylus), ist das aber das path-Objekt und nicht der Button.

            Hast Du die Objekt-Dekonstruktion selbst eingebaut oder irgendwo kopiert, ohne sie zu verstehen? Falls kopiert: Im Self-Wiki finde ich sie gerade nicht unter diesem Namen. Im MDN gibt es auf jeden Fall Erläuterungen dazu.

            Du musst

            function( { currentTarget } )  {
            }
            

            verwenden, um bei Event-Bubbling das richtige Objekt zu verarbeiten. (Bubbling findet statt, wenn Du das Icon tippst statt den Text - es mag aber auch sein, dass es da Browser-Unterschiede gibt und Dir das Problem deshalb nicht auffällt. Ich verwende Chrome 68 für Windows und habe das Fenster schmal gezogen, um das Menü zu testen).

            Oder, mit klassischer Schreibweise, ohne Dekonstruktion:

            function(event)  {
               var currentTarget = event.currentTarget;
            }
            

            Rolf

            --
            sumpsi - posui - clusi
        2. Hallo Rolf

          Danke für das Beispiel zur Objektdestrukturierung. Dass das bei Parametern auch geht, hatte ich gar nicht auf dem Schirm.

          Ja, das geht.

          function handler({ target }) {
              console.info(`event dispatched to ${ target.tagName }`)
          }
          

          Mittlerweile auch mit Restsyntax, wenn nur einige Objekteigenschaften an Bezeichner gebunden werden sollen, die anderen aber später noch gebraucht werden. Bei der folgenden Notation werden eigene, abzählbare Eigenschaften des übergebenen Objektes, die nicht zuvor an einen Bezeichner gebunden wurden, in ein planes Objekt kopiert, dass dann über den Namen des Restparameters referenziert werden kann. Gibt es keine weiteren Eigenschaften, dann wird ein leeres Objekt erzeugt.

          function useRest({ property, ...others }) {
          
          }
          

          Wenn nicht sicher ist, dass ein Objekt an die Funktion übergeben wird, kann ein Defaultparameter angegeben werden, damit der Zugriff auf Objekteigenschaften nicht zu einem Typfehler führt. Hier gilt wie üblich, dass der als Standardwert notierte Ausdruck nur ausgewertet wird, wenn kein Argument übergeben wurde. Eigenschaften des als Ersatz angegebenen Objektes werden also nicht berücksichtigt, wenn ein übergebenes Objekt destrukturiert wird.

          function playSafe({ property } = {}) {
          
          }
          

          Wenn Standardwerte für einzelne Eigenschaften angegeben werden sollen, ist die Syntax dieselbe wie für gewöhnliche Parameter. Auch die Auswertung erfolgt analog.

          function hasDefault({ property = 'value' }) {
          
          }
          

          Soll eine Eigenschaft an einen anderen Bezeichner als den Eigenschaftsnamen gebunden werden, notiert man erst den Namen der Eigenschaft, einen Doppelpunkt und schließlich den Bezeichner, an den der Wert gebunden werden soll. Für den ursprünglichen Namen der Eigenschaft wird dann keine Bindung im lokalen Scope angelegt.

          function changeName({ propertyName: parameterName }) {
          
          }
          

          Soll zusätzlich ein Standardwert definiert werden, wird die übliche Syntax verwendet. Die Zuweisung erfolgt dabei an den neuen Parameternamen, wird also hinter diesem notiert.

          function changeNameWithDefault({ propertyName: parameterName = 'value' }) {
          
          }
          

          Die obige Syntax zur Umbenennung ist insbesondere dann von Belang, wenn es sich bei dem jeweiligen Eigenschaftsnamen nicht um einen validen Bezeichner handelt. Hier gelten ja unterschiedliche Regeln. Zum Beispiel können reservierte Wörter als Eigenschaftsnamen verwendet werden.

          function handlesReservedWord({ for: _for }) {
          
          }
          

          Oder ein String, der unerlaubte Zeichen enthält, oder aber grundsätzlich erlaubte Zeichen an der falschen Stelle.

          function handlesString({ '--custom-property': customProperty }) {
          
          }
          

          Es ist auf diese Weise auch möglich Symbole als Schlüssel zu verwenden. Ist etwa wie im folgenden Beispiel ein Symbol an einen Namen innerhalb der lexikalischen Umgebung der Funktion gebunden, kann auch dieses als Name der Eigenschaft verwendet werden, unter Verwendung der Syntax für berechnete Eigenschaftsnamen.

          const key = Symbol()
          
          
          function handlesSymbol({ [key]: parameterName }) {
          
          }
          

          Handelt es sich bei dem Wert einer Objekteigenschaft selbst um ein Objekt, dann kann auch dieses Objekt im selben Ausdruck destrukturiert werden. Die Syntax ist so ähnlich wie bei der Umbenennung: An Stelle des Parameternamens wird das Muster für die Destrukturierung angegeben. Für den Eigenschaftsnamen wird auch in diesem Fall keine Bindung im Scope der Funktion angelegt.

          function useNestedObject({ object: { property } }) {
          
          }
          
          
          useNestedObject({
          
              object: {
                  property: 'value'
              }
          
          })
          

          Das kann auch zusammen mit einem Standardwert verwendet werden. In der Praxis wird man ja ohnehin eher den Fall haben, dass zwar grundsätzlich ein Objekt übergeben wird, aber einzelne Eigenschaften nicht vorhanden oder auf null gesetzt sind.

          function useNestedObjectWithDefault({ object: { property } = {} }) {
          
          }
          

          Wird ein Objekt als Argument an die Funktion übergeben, das eine Eigenschaft besitzt, deren Wert ein iterierbares Objekt ist, also etwa ein Array, dann kann man das auf dieselbe Art destrukturieren.

          function useNestedIterable({ iterable: [head, ...tail] }) {
          
          }
          
          
          useNestedIterable({
          
              iterable: [1, 2, 3, 4, 5]
          
          })
          

          Insgesamt ist zu beachten, dass wenn bei der Destrukturierung von Objekten ein Name angegeben wird, sowohl das Objekt selbst als auch die Kette seiner Prototypen danach durchsucht wird. Ganz so, wie beim normalen Zugriff auf Objekteigenschaften auch. Wird hingegen die Restsyntax verwendet, dann werden nur eigene Eigenschaften kopiert, deren Attribut enumerable den Wert true besitzt. Objekte als Eigenschaftswerte werden bei diesem Vorgang nicht geklont, sondern es wird nur die Referenz kopiert.

          function invokesGetter({ property }) {
          
          }
          
          
          invokesGetter({
          
              get property() {
                  return 'value'
              }
          
          })
          

          Ist eine Eigenschaft als Getter implementiert, dann wird dieser bei der Destrukturierung aufgerufen und der Rückgabewert an den gewählten Bezeichner gebunden. Wird jedoch die Restsyntax verwendet, dann wird auf dem neuen Objekt eine gewöhnliche Dateneigenschaft angelegt und der zurückgegebene Wert im Attribut value gespeichert. Der Wert wird also beim Zugriff auf das Restobjekt nicht mehr neu berechnet.

          Viele Grüße,

          Orlok

          --
          „Dance like it hurts.
          Make love like you need money.
          Work when people are watching.“ — Dogbert
          1. Hallo Orlok,

            sehr schöner Aufsatz. Hast Du die Wiki Edition dazu schon auf dem Plan? Sonst versuche ich mich daran (weiß nur nicht wann ich dazu komme.

            Rolf

            --
            sumpsi - posui - clusi