Matthias Apsel: unschöne Nebeneffekte durch letter-spacing

Hallo alle,

@JürgenB verwendet letter-spacing, um in seinem Tabellensortierer die Symbole näher zusammenzubringen. Das sieht unter bestimmten Bedingungen etwas unschön aus (ich habe ein noch kleineres letter-spacing eingestellt, als Jürgen in seinem Skript, aber die abgeschnittene Ecke ist auch bei seinen Vorgaben da).

screenshot negatives letter-spacing

Eine mögliche Abhilfe ist es, word-spacing in Verbindung mit einem Leerzeichen zu verwenden.

screenshot negatives word-spacing

Die abweichenden Werte sind:

.sortsymbol::after { word-spacing: -.7em; }
.sortsymbol.sortedasc::after { content: "▲ ▽" }
.sortsymbol.sorteddesc::after { content: "△ ▼" }
.sortsymbol.unsorted::after { content: "△ ▽"; word-spacing: -.6em; }

Bis demnächst
Matthias

--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  1. Hallo Matthias,

    unter welchen Bedingungen werden die Ecken denn angeschnitten? Ich dachte, ich hätte alle(!) Eventualitäten getestet.

    Gruß
    Jürgen

    1. Hallo JürgenB,

      unter welchen Bedingungen werden die Ecken denn angeschnitten? Ich dachte, ich hätte alle(!) Eventualitäten getestet.

      Im Firefox. Der Screenshot ist mit letter-spacing -.4em.

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. @@Matthias Apsel

        unter welchen Bedingungen werden die Ecken denn angeschnitten? Ich dachte, ich hätte alle(!) Eventualitäten getestet.

        Im Firefox. Der Screenshot ist mit letter-spacing -.4em.

        Kann ich nicht nachvollziehen. Bei mir (macOS) sieht’s so aus:

        Rendert der Fuchs unter Windows oder Linux anders?

        letter-spacing: -.4em ist auch etwas zu viel des Guten; die Zeichen stehen zu eng. Vor allem aber stört der vertikale Versatz.

        🖖 Stay hard! Stay hungry! Stay alive! Stay home!

        --
        Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
        1. Hallo Gunnar,

          Rendert der Fuchs unter Windows oder Linux anders?

          wahrscheinlich nicht direkt anders, aber durch die unterschiedlichen Schriftarten ergibt sich im Detail doch immer wieder ein kleiner Unterschied in den Abmessungen.

          Ich kenne das auch mit identischen Browsern a) zuhause auf'm Linux-Desktop und b) bei der Arbeit auf Windows 10.

          Live long and pros healthy,
           Martin

          --
          Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
  2. Hallo Matthias Apsel,

    funktioniert allerdings im IE11 nicht, da man in diesem Browser einzelne Wörter mithilfe von word-spacing nicht ineinander schieben kann. Eigentlich ein cleveres Verhalten.

    *::-ms-backdrop, .sortsymbol::after { letter-spacing: -.4em; word-spacing: .1em}
    *::-ms-backdrop, .sortsymbol.unsorted::after { letter-spacing: -.3em; word-spacing: 0; } 
    

    Damit sieht es im IE11 und im Edge hübsch aus.

    Aber aus rein kosmetischen Gründen braucht man sich diese Mühe nicht zu geben.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  3. Hallo Matthias,

    .sortsymbol::after { word-spacing: -.7em; }
    

    im Sortierer steht aber auch noch eine Angabe für width. Hast du die Breite auch passend gesetzt?

    Gruß
    Jürgen

    1. Hallo JürgenB,

      im Sortierer steht aber auch noch eine Angabe für width. Hast du die Breite auch passend gesetzt?

      Ja. Die Breite hat aber keine Wirkung auf den Effekt.

      Screenshot: Width des ::after-Pseudoelements

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Hallo Matthias,

        so, jetzt habe ich es am Windows-FF auch gesehen, hast du gute Augen.

        Ich habe die Wiki-Version korrigiert und wenn das OK ist, korrigiere ich es auch in unserem Wiki. Das generierte css sieht jetzt so aus:

        .sortbutton::after { 
        	word-spacing: -.6em; 
        	margin-left:.1em; 
        	white-space:nowrap;
        }
        .sortbutton.sortedasc::after { 
        	content: "▲ ▽";
        } 
        .sortbutton.sorteddesc::after { 
        	content: "△ ▼";
        } 
        .sortbutton.unsorted::after { 
        	content: "△ ▽";
        	word-spacing: -.5em;
        } 
        

        Diese Angaben

        *::-ms-backdrop, .sortsymbol::after { letter-spacing: -.4em; word-spacing: .1em}
        *::-ms-backdrop, .sortsymbol.unsorted::after { letter-spacing: -.3em; word-spacing: 0; } 
        

        habe ich nicht verwendet, da es im IE und im Edge auch ohne gut aussah.

        Die große Version habe ich auch schon überarbeitet, die wird dann auch aktualisiert.

        Danke für deinen wachsamen Blick.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          Ich habe die Wiki-Version korrigiert und wenn das OK ist, korrigiere ich es auch in unserem Wiki.

          👍

          Diese Angaben

          *::-ms-backdrop, .sortsymbol::after { letter-spacing: -.4em; word-spacing: .1em}
          *::-ms-backdrop, .sortsymbol.unsorted::after { letter-spacing: -.3em; word-spacing: 0; } 
          

          habe ich nicht verwendet, da es im IE und im Edge auch ohne gut aussah.

          Ja, im IE11 sind halt die Symbole weiter auseinander, aber nicht abgeschnitten, was ja per se nicht schlimm ist.

          Screenshot IE11 oben - edge unten

          Statt des obigen Browserhacks (IE11+) nutze ich übrigens folgenden (IE11only)

          _:-ms-fullscreen, :root .sortsymbol::after { letter-spacing: -.4em }     
          _:-ms-fullscreen, :root .sortsymbol.unsorted::after { letter-spacing: -.3em }
          

          Da spart man sich das Ändern des word-spacing.

          Danke für deinen wachsamen Blick.

          Gern.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  4. @@Matthias Apsel

    Eine mögliche Abhilfe ist es, word-spacing in Verbindung mit einem Leerzeichen zu verwenden.

    Ein Leerzeichen einzufügen, um zwei Zeichen enger zusammen zu bringen, scheint mir eine mittelgute Idee zu sein. Ein mieser Hack statt einer sauberen Lösung.

    Eine saubere Lösung, dass die Zeichen auf allen Systemen vernünftig gerendert werden, bekommt man mit Inline-SVG hin. Ein SVG mit beiden Dreiecken mit fill: transparent. Mit gezielter Selektion setzt man bei Bedarf von außen eins der beiden auf fill: currentColor.

    🖖 Stay hard! Stay hungry! Stay alive! Stay home!

    --
    Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
    1. Hallo

      Eine saubere Lösung, dass die Zeichen auf allen Systemen vernünftig gerendert werden, bekommt man mit Inline-SVG hin. Ein SVG mit beiden Dreiecken mit fill: transparent. Mit gezielter Selektion setzt man bei Bedarf von außen eins der beiden auf fill: currentColor.

      die Idee gefällt mir. Aber auch hier die Frage: Ist das für ein Tutorial zu kompliziert?

      Gruß
      Jürgen

    2. Hallo Gunnar,

      Eine saubere Lösung, dass die Zeichen auf allen Systemen vernünftig gerendert werden, bekommt man mit Inline-SVG hin. Ein SVG mit beiden Dreiecken mit fill: transparent. Mit gezielter Selektion setzt man bei Bedarf von außen eins der beiden auf fill: currentColor.

      irgendwie kriege ich das nicht hin. Ich habe jetzt folgendes:

      http://test.berkemeier.eu/selfwiki/Sortierbare Tabelle/Beispiel_JS-Anw-sortierbare-Tabellen.html

      Die Dreiecke werden gezeigt, ich schaffe es aber nicht, ihre Farbe zu ändern. Auch liegen sie etwa ein halbes em zu hoch.

      Das generierte CSS sieht so aus:

       .sortbutton::after { content: url('data:image/svg+xml;charset=UTF-8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="-8px" width="1.3em" height="1.3em" viewBox="0 0 180 100"><path d="M0 0 L50 100 L100 0 Z" /><path d="M80 100 L180 100 L130 0 Z" /></svg>'); }
       .sortbutton::after { margin-left: .2em; }
       .sortbutton::after { stroke: currentColor !important; fill: red !important; }
      

      Gruß
      Jürgen

      1. @@JürgenB

        Die Dreiecke werden gezeigt, ich schaffe es aber nicht, ihre Farbe zu ändern.

        Ich hätte beim „Inline“ von „Inline-SVG“ wohl die Farbe ändern sollen?

        Mit CSS kannst du von außen nur das stylen, was im DOM ist. Die inneren Elemente eines als Hintergrundbild eingebundenen SVGs sind nicht im DOM.

        Ein SVG mit beiden Dreiecken mit fill: transparent. Mit gezielter Selektion setzt man bei Bedarf von außen eins der beiden auf fill: currentColor.

        Ganz so wie ich dachte geht’s aber auch nicht; man kommt auch an die inneren Elemente eines per use eingebundenen symbols nicht ran. (Mir wollte es jedenfalls nicht gelingen.)

        Custom properties FTW.

        Das SVG mit dem symbol sollte man dann aber auslagern können.

        🖖 Stay hard! Stay hungry! Stay alive! Stay home!

        --
        Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
        1. Hallo Gunnar,

          Custom properties FTW.

          ich habe jetzt meine Testseite überarbeitet. Da die Symbole per Javascript erzeugt werden, habe ich sie (erst mal?) direkt per innerHTML in den Button gesetzt.

          Aber bei mir wie auch in deinem Codepen verstehe ich nicht, wie man die Größe und die Höhe der SVGs bezogen auf den Text beeinflusst. Wenn ich height ändere, wird das Symbol vertikal verschoben, die Größe bleibt aber. Wie kann ich denn die Lage und die Größe der SVGs verändern?

          Gruß
          Jürgen

          1. @@JürgenB

            Custom properties FTW.

            ich habe jetzt meine Testseite überarbeitet. Da die Symbole per Javascript erzeugt werden, habe ich sie (erst mal?) direkt per innerHTML in den Button gesetzt.

            Du könntest trotzdem mit use arbeiten.

            Aber bei mir wie auch in deinem Codepen verstehe ich nicht, wie man die Größe und die Höhe der SVGs bezogen auf den Text beeinflusst. Wenn ich height ändere, wird das Symbol vertikal verschoben, die Größe bleibt aber. Wie kann ich denn die Lage und die Größe der SVGs verändern?

            Durch Setzen von width und height, ja. In deinem Fall für .sortbutton svg. Das überschreibt dann die width="1em" height="1em"-Angabe im SVG (die womöglich gar nicht da sein sollte). Ist das beabsichtigt, dass da ein anderes Seitenverhältnis vorliegt als bei viewBox="0 0 180 100"?

            Wo wie bei der ViewBox sind: deine ist zu knapp bemessen. Die Hälfte der Strichbreite der horizontalen Linien passt nicht mehr mit rein (Nachtrag: wenn man width und height im Verhältnis 9 : 5 wählt). Die Linien sind nur halb zu sehen und damit dünner als die schrägen.

            Zur vertikalen Ausrichtung dürfte es genügen, vertical-align: sub zu entfernen.

            🖖 Stay hard! Stay hungry! Stay alive! Stay home!

            --
            Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
            1. Hallo Gunnar,

              vielen Dank. Die widht-Angabe war das Problem, falsch und überflüssig. Keine Ahnung mehr, warum die da war, Altlast?

              Ich habe jetzt den SVG-Code direkt per innerHTML in den Button gesetzt. Hat das erzeugen einer SVG per innerHTML und das Einbinden per use Vorteile? Der Javascriptcode wird ja erst mal etwas länger.

              Gruß
              Jürgen

              1. Hallo JürgenB,

                vielen Dank. Die widht-Angabe war das Problem, falsch und überflüssig. Keine Ahnung mehr, warum die da war, Altlast?

                Vermutlich. Bei meinen Experimenten habe ich festgestellt, dass der IE11 diese Angabe benötigt.

                Bis demnächst
                Matthias

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.