Die Webseite von Werbung vorbei nachdem das Script ausgeführt wurde
Javascript-Snippet: Schriftarten und -Schnitte auf Webseite anzeigen Zurück zur Startseite
5 Minuten 30.10.2018thomaskekeisen.de
Aus dem Leben eines Bildschirmarbyters
Achtung: Diese Seite enthält Partner- und Werbe-Links. Daher ist diese Seite im Gesamten als Werbeanzeige zu verstehen!
Schnelles Stylesheet
Ich wollte Paul vor einigen Tagen einen kurzen Überblick der auf der Werbung-vorbei-Webseite verwendeten Schriftgrößen, -Farben und -Schnitte geben. Ich habe dann kurz händisch die betroffenen Elemente mit den Google-Chrome-Entwickler-Tools inspiziert und den eigentlichen Text mit dem Namen und Größe der Schriftart ersetzt. Dabei kam mir allerdings die Idee, ein kleines jQuery-Script zu schreiben, das, als Lesezeichen gespeichert, dann auf jeder beliebigen Webseite auf der ebenfalls jQuery eingebunden ist, automatisch die genannten Informationen zu Schriftart anzeigt.
jQuery-Script
Das untenstehende Script wird mit dem Aufruf der Funktion showFontDatajQuery gestartet und sucht anschließend alle DOM-Elemente die Text und keine weiteren Unterelemente enthalten.
function cleanDisplay (display) {
if (display === 'inline') {
return 'inline-block';
}
return display;
}
function cleanColor (color) {
if (color.indexOf('rgb') > -1) {
return rgbaToHex(color);
}
return color;
}
function cleanFontFamily (fontFamily) {
if (fontFamily.indexOf(',') > -1) {
const parts = fontFamily.split(',');
return parts[0];
}
return fontFamily;
}
function cleanTextTransform (textTransform) {
if (textTransform === 'none') {
return null;
}
return textTransform;
}
function rgbaToHex (rgba) {
const parts = rgba.substring(rgba.indexOf('(')).split(',');
const r = parseInt(trim(parts[0].substring(1)), 10);
const g = parseInt(trim(parts[1]), 10);
const b = parseInt(trim(parts[2]), 10);
const hexCodeBuilder = [
'#',
r.toString(16),
g.toString(16),
b.toString(16)
];
if (parts.length > 3) {
const a = parseFloat(trim(parts[3].substring(0, parts[3].length - 1))).toFixed(2);
hexCodeBuilder.push((
a * 255
).toString(16).substring(0, 2));
}
const hexString = hexCodeBuilder.join('');
return hexString;
}
function trim (string) {
return string.replace(/^\s+|\s+$/gm, '');
}
function showFontDatajQuery () {
if (typeof jQuery === 'undefined') {
alert('No jQuery installed');
return;
}
const elementsWithTextContent = $('*:not(:empty):not(:has(*))');
elementsWithTextContent.each(function () {
const currentElement = $(this);
const color = cleanColor(currentElement.css('color'));
const fontFamily = cleanFontFamily(currentElement.css('font-family'));
const fontSize = currentElement.css('font-size');
const fontStyle = currentElement.css('font-style');
const textTransform = cleanTextTransform(currentElement.css('text-transform'));
const height = currentElement.height();
const width = currentElement.width();
const display = cleanDisplay(currentElement.css('display'));
const text = currentElement.text();
const styleStringBuffer = [
fontFamily,
color,
fontSize,
fontStyle
];
if (textTransform) {
styleStringBuffer.push(textTransform);
}
const styleString = styleStringBuffer.join(', ');
currentElement
.text(styleString)
.css({
display: display,
height: height,
overflow: 'hidden',
textOverflow: 'ellipsis',
width: width,
})
.attr({
originalText: text,
styleText: styleString,
title: styleString
})
.hover(function () {
const element = $(this);
element.text(element.attr('originalText'));
}, function () {
const element = $(this);
element.text(element.attr('styleText'));
})
;
});
}
Um das Script zu starten kann hier geklickt werden. Das Script fixiert dabei die Höhe und Breite der gefundenen DOM-Elemente und zeigt beim Überfahren mit der Maus wieder ihren eigentlichen Inhalt an. Verweilt die Maus auf dem Element, werden nochmals alle relevanten Details zum Text als Titel angezeigt. Mit einem Klick auf diesen Text wird der Text wieder zurückgesetzt. Ich empfehle allerdings, die Webseite einfach neu zu laden.
Für die Implementierung der rgbaToHex -Funktion habe ich übrigens diesen Quellcode als Inspiration verwendet und ihn so erweitert, dass er auch RGB-Werte ohne Alphakanal unterstützt.
Javascript-Lesezeichen
Der nachfolgende jQuery-Code ist eine minimierte Version des schon gezeigten Quellcodes. Er kann einfach als Lesezeichen mit einem beliebigen Titel gespeichert und anschließend mit einem Klick auf jede Webseite angewand werden.
javascript:(function()%7B(function () %7Bif (typeof jQuery %3D%3D%3D 'undefined') %7Balert('No jQuery installed')%3Breturn%3B%7Dfunction cleanDisplay (display) %7Bif (display %3D%3D%3D 'inline') %7Breturn 'inline-block'%3B%7Dreturn display%3B%7Dfunction cleanColor (color) %7Bif (color.indexOf('rgb') > -1) %7Breturn rgbaToHex(color)%3B%7Dreturn color%3B%7Dfunction cleanFontFamily (fontFamily) %7Bif (fontFamily.indexOf('%2C') > -1) %7Bconst parts %3D fontFamily.split('%2C')%3Breturn parts%5B0%5D%3B%7Dreturn fontFamily%3B%7Dfunction cleanTextTransform (textTransform) %7Bif (textTransform %3D%3D%3D 'none') %7Breturn null%3B%7Dreturn textTransform%3B%7Dfunction rgbaToHex (rgba) %7Bconst parts %3D rgba.substring(rgba.indexOf('(')).split('%2C')%3Bconst r %3D parseInt(trim(parts%5B0%5D.substring(1))%2C 10)%3Bconst g %3D parseInt(trim(parts%5B1%5D)%2C 10)%3Bconst b %3D parseInt(trim(parts%5B2%5D)%2C 10)%3Bconst hexCodeBuilder %3D %5B'%23'%2Cr.toString(16)%2Cg.toString(16)%2Cb.toString(16)%5D%3Bif (parts.length > 3) %7Bconst a %3D parseFloat(trim(parts%5B3%5D.substring(0%2C parts%5B3%5D.length - 1))).toFixed(2)%3BhexCodeBuilder.push((a * 255).toString(16).substring(0%2C 2))%3B%7Dconst hexString %3D hexCodeBuilder.join('')%3Breturn hexString%3B%7Dfunction trim (string) %7Breturn string.replace(%2F%5E%5Cs%2B%7C%5Cs%2B%24%2Fgm%2C '')%3B%7Dconst elementsWithTextContent %3D %24('*%3Anot(%3Aempty)%3Anot(%3Ahas(*))')%3BelementsWithTextContent.each(function () %7Bconst currentElement %3D %24(this)%3Bconst color %3D cleanColor(currentElement.css('color'))%3Bconst fontFamily %3D cleanFontFamily(currentElement.css('font-family'))%3Bconst fontSize %3D currentElement.css('font-size')%3Bconst fontStyle %3D currentElement.css('font-style')%3Bconst textTransform %3D cleanTextTransform(currentElement.css('text-transform'))%3Bconst height %3D currentElement.height()%3Bconst width %3D currentElement.width()%3Bconst display %3D cleanDisplay(currentElement.css('display'))%3Bconst text %3D currentElement.text()%3Bconst styleStringBuffer %3D %5BfontFamily%2Ccolor%2CfontSize%2CfontStyle%5D%3Bif (textTransform) %7BstyleStringBuffer.push(textTransform)%3B%7Dconst styleString %3D styleStringBuffer.join('%2C ')%3BcurrentElement.text(styleString).css(%7Bdisplay%3A display%2Cheight%3A height%2Coverflow%3A 'hidden'%2CtextOverflow%3A 'ellipsis'%2Cwidth%3A width%2C%7D).attr(%7BoriginalText%3A text%2CstyleText%3A styleString%2Ctitle%3A styleString%7D).hover(function () %7Bconst element %3D %24(this)%3Belement.text(element.attr('originalText'))%3B%7D%2C function () %7Bconst element %3D %24(this)%3Belement.text(element.attr('styleText'))%3B%7D)%3B%7D)%3B%7D)()%7D)()
Wende ich das Script auf die Webseite von Werbung-vorbei an, habe ich automatisch einen kleinen Styleguide erstellt, aus dem grob hervorgeht, welche Farben, Schriftarten und -Schnitte verwendet werden.
