unschöne Nebeneffekte durch letter-spacing

[Matthias Apsel]

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

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

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

[JürgenB]

Hallo Matthias,

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

Gruß
Jürgen

[Matthias Apsel]

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

[Gunnar Bittersmann]

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

[Der Martin]

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

[Matthias Apsel]

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

[JürgenB]

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

[Matthias Apsel]

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.

Bis demnächst
Matthias

[JürgenB]

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

[Matthias Apsel]

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.

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

[Gunnar Bittersmann]

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

[JürgenB]

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

[JürgenB]

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

[Gunnar Bittersmann]

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

[JürgenB]

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

[Gunnar Bittersmann]

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

[JürgenB]

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

[Matthias Apsel]

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