Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Font size detective
javascript:(function () {
window.fsd = {};
const TOO_MANY_FONT_SIZES = 10;
fsd.nukeResults = () => {
let $result = document.querySelector('.fs-result');
if ($result !== null) {
$result.style.display = 'none';
}
var $labels = document.querySelectorAll('.fs-label');
if ($labels.length) {
$labels.forEach(label => label.remove());
}
};
fsd.rerun = () => {
fsd.nukeResults();
fsd.getFontSizes();
};
fsd.hideLabels = () => {
let $labels = document.querySelectorAll('.fs-label');
$labels.forEach(label => label.style.display = 'none');
};
fsd.showLabels = () => {
let $labels = document.querySelectorAll('.fs-label');
$labels.forEach(label => label.style.display = 'inline-block');
};
fsd.isHidden = ($el) => {
return $el.offsetHeight === 0;
};
fsd.isIgnoredEl = ($el) => {
if (fsd.isHidden($el)) {
return true;
}
if ($el.tagName === 'SVG') {
return true;
}
let ignored = false;
let tagClasses = typeof($el.className) === 'string' ? $el.className.split(' ') : [];
tagClasses.forEach( cName => {
if (cName.startsWith('fs-') || cName.startsWith('fa-')) {
ignored = true;
}
});
return ignored;
};
fsd.getFontSizes = () => {
fsd.nukeResults();
let fontSizes = [];
let fontColours = [];
for (let $tag of document.querySelectorAll('body *')) {
if (fsd.isIgnoredEl($tag)) {
continue;
}
let style = window.getComputedStyle($tag, null).getPropertyValue('font-size');
let fontSize = parseFloat(style);
if (fontSize > 0) {
fontSizes.push(fontSize);
}
let $label = document.createElement('span');
$label.innerText = fontSize + 'px';
if (typeof fontColours[fontSize] === 'undefined') {
fontColours[fontSize] = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
}
$label.style.backgroundColor = fontColours[fontSize];
$label.style.color = '#fff';
$label.style.font = `normal bold ${fontSize}px/1 Arial`;
$label.style.marginLeft = '3px';
$label.style.padding = '1px 3px';
$label.classList.add('fs-label');
$tag.appendChild($label);
}
let uniqueFontSizes = Array.from(new Set(fontSizes));
uniqueFontSizes = uniqueFontSizes.sort((a, b) => a - b);
let numFontSizes = uniqueFontSizes.length;
let msg = `<div class="fs-result__inner" style="border:3px solid #000; border-radius:5px; font:normal 20px/1 Arial; padding:20px 25px; color:#000; box-sizing:border-box; background:#fff; display: flex;"><div>🕵 <strong>${numFontSizes} font sizes used on this page</strong><br><br>`;
msg += '<div style="display:flex; flex-wrap:wrap;">';
for (let size of uniqueFontSizes) {
msg += `<span class="fs-result__size" style="background-color:${fontColours[size]}; font-style:normal; padding:2px 4px; margin:0 5px 5px 0; color:#fff;">${size}px</span>`;
}
msg += '</div>';
if (numFontSizes >= TOO_MANY_FONT_SIZES) {
msg += "<br><div class=\"fs-result__warning\">That's a lot 😱! Try merging similar font sizes.</div>";
}
msg += '</div>';
msg += `<div class="fs-result__actions" style="margin-left:auto;">Labels: <button class="fs-result__btn" onclick="fsd.hideLabels()">Hide</button> | <button class="fs-result__btn" onclick="fsd.showLabels()">Show</button> | <button class="fs-result__btn" onclick="fsd.rerun()">Re-run</button></div>`;
msg += "</div>";
let $banner = document.createElement('div');
$banner.classList.add('fs-result');
$banner.style.position = 'fixed';
$banner.style.width = '100vw';
$banner.style.bottom = 0;
$banner.style.left = 0;
$banner.style.zIndex = 6969696969;
$banner.innerHTML = msg;
document.body.insertBefore($banner, document.body.childNodes[0]);
};
fsd.getFontSizes();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment