Mobile versionIch verwende das Firefox-Add-on WebScrapBook, um Textteile auf Webseiten zu markieren.
Das Add-on bietet 12 verschiedene Textmarkierungen, die individuell mit CSS-Code gestaltet werden können:
Das CSS Der Code wird dann als Inline-Stil auf die HTML-Elemente innerhalb der Textauswahl angewendet. (Mit anderen Worten: Alle HTML-Elemente in der Textauswahl verwenden denselben hinzugefügten Inline-CSS-Code.)
Problem
Dies funktioniert im Allgemeinen gut für helle Hintergrundfarben. Allerdings wird die Textfarbe bei dunkleren Hintergrundfarben wie Rot schwer lesbar:
Frage
Was kann ich tun, um die Textfarbe auf dunklen Hintergründen (wie Rot) gut lesbar zu machen und gleichzeitig eine visuelle Unterscheidung zwischen Hyperlinks und normal zu erhalten? Text ? Bitte denken Sie daran, dass ich mich auf Inline-Stile beschränke und dass dieser Inline-Stil sowohl auf Text als auch auf Links angewendet wird.
Lösungen
- Eine naheliegende Lösung wäre die Verwendung weißer Textfarbe: color:white; Hintergrundfarbe:rot. Wie oben erwähnt, wendet das Add-on diesen CSS-Code jedoch als Inline-Stil auf alle Elemente innerhalb des ausgewählten Textabschnitts an, einschließlich -Hyperlinks (die der Benutzer nicht separat formatieren kann). Daher werden sowohl der (normale) Text als auch der Hyperlink-Text weiß. Dadurch sind die Hyperlinks optisch nicht mehr vom normalen Text zu unterscheiden.
- Nach einigem Experimentieren bin ich auf diese Zwischenlösung gekommen: background:cyan; filter:invert(1) Helligkeit(1.3);. Dadurch wird ein Cyan-Hintergrund angewendet und anschließend in Rot invertiert:
Durch ihre Farbe sind die Links kaum vom normalen Text zu unterscheiden. Irgendeine Idee, wie man das verbessern kann? (Wenn ich die Helligkeit erhöhe, wird die Linkfarbe gelb, was besser lesbar und unterscheidbar ist, aber dadurch entstehen auch hässliche harte Buchstabenkanten.)
