unschöne Nebeneffekte durch letter-spacing

[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