Texte anhand einer Quelle einfärben
Meine Nachrichten-Feeds benennen die Nachrichten-Quelle und färben sie ein. Es entsteht eine “bunt” eingefärbte Quelle, bevor deren Meldungs-Überschrift genannt wird.
Und wie funktioniert es, dass “Tagesschau”, “Spiegel” oder “Heise” jeweils spezifisch eingefärbt sind?
Naja, der Text - also String - der Quelle wird mit einer MD5 Funktion gehasht. Dann erhält man so einen Hexcode aus einem vorgegebenen String.
Wenn man sich vom Beginn des Hex-Strings jeweils die aufeinanderfolgenden 2..3 Stellen herausgreift, kann man diese dem Anteil für rot, grün und blau zuordnen.
Damit der Hintergrund und Vordergrund relativ zueinander passen, definiere ich für beide einen eine Range von..bis. Der ermittelte Wert aus dem Hash wird relativ zum von-bis-Range für Vordergrund und Hintergrund eingeordnet.
Und das ist der zugehörige PHP-Code:
/** * return html code for a span with background color based on a checksum of the given text * @param string $sText text that is used for checksum; if false it returns a gray box * @param string $sContent optional: text to show * @return string */ function _getChecksumSpan($sText, $sContent = '') { if ($sText) { // color ranges in decimal values for RGB from ... to $iFgStart = 60; $iFgEnd = 160; $iBgStart = 180; $iBgEnd = 240; // divider: 3 digits of md5 will be extracted $iFgDivider = 16 * 16 * 16 / ($iFgEnd - $iFgStart); $iBgDivider = 16 * 16 * 16 / ($iBgEnd - $iBgStart); $sHash = md5($sText); $sColor = '' . 'color: rgba(' . ($iFgStart + round(hexdec(substr($sHash, 0, 3)) / $iFgDivider)) . ',' . ($iFgStart + round(hexdec(substr($sHash, 3, 3)) / $iFgDivider)) . ',' . ($iFgStart + round(hexdec(substr($sHash, 6, 3)) / $iFgDivider)) . ',' . '1' . ');' . 'background: rgba(' . ($iBgStart + round(hexdec(substr($sHash, 0, 3)) / $iBgDivider)) . ',' . ($iBgStart + round(hexdec(substr($sHash, 3, 3)) / $iBgDivider)) . ',' . ($iBgStart + round(hexdec(substr($sHash, 6, 3)) / $iBgDivider)) . ',' . '1' . ');' ; } else { $sColor = "color: #888; background: #ccc;"; } return '<span style="' . $sColor . '; border-left: 0.8em solid; padding: 0.1em 0.4em 0.1em 0.3em ;">' . ($sContent ? $sContent : ' ') . '</span>'; }
weiterführende Links:
- meine RSS-Seite: Nachrichten