Bookmarklet to extract a type size ramp from any page (https://github.com/graphicore/varla-varfo/blob/main/explorations/bookmarklets/type-size-ramp-bookmarklet.js)

Type-Size-Ramp.bookmarklet

javascript:void((function%20()%7Bvar%20collected%20=%20new%20Map(),%20unique%20=%20new%20Map(),%20tags%20=%20Symbol('tags'),%20size%20=%20Symbol('size');for(elem%20of%20document.getElementsByTagName(%22*%22))%20%7Blet%20computed%20=%20window.getComputedStyle(elem,null);if%20(computed.display%20===%20'none')continue;if(elem.offsetParent%20===%20null%20&&%20computed.position%20!==%20'fixed')/*%20a%20parent%20node%20is%20hidden%20*/continue;if(!Array.from(elem.childNodes).some(node=%3E/*%20is%20a%20text%20Node%20*/node.nodeType%20===%20Node.TEXT_NODE%20&&/*%20only%20whitespace*/node.wholeText.trim()%20!==%20''))continue;let%20fontFamily%20=%20computed.getPropertyValue('font-family'),%20fontSize%20=%20computed.getPropertyValue('font-size'),%20fontWeight%20=%20computed.getPropertyValue('font-weight'),%20fontStyle%20=%20computed.getPropertyValue('font-style'),%20fontVariationSettings%20=%20computed.getPropertyValue('font-variation-settings'),%20key%20=%20%60$%7BfontFamily%7D%60,%20id%20=%20%5BfontSize,%20fontFamily,%20fontVariationSettings,%20fontWeight,%20fontStyle%5D.join(';'),%20value%20=%20unique.get(id);if(!value)%20%7Bvalue%20=%20%7BfontSize,%20fontFamily,%20fontVariationSettings,%20fontWeight,%20fontStyle%7D;value%5Btags%5D%20=%20new%20Set();value%5Bsize%5D%20=%20parseInt(fontSize,%2010);unique.set(id,%20value);if(!collected.has(key))collected.set(key,%20%5B%5D);collected.get(key).push(value);%7Dvalue%5Btags%5D.add(elem.tagName);%7Dvar%20body%20=%20document.createElement('body');for(let%20%5Bkey,%20bucket%5D%20of%20collected.entries())%7Blet%20heading%20=%20document.createElement('h2'),%20samples%20=%20document.createElement('ul');heading.textContent%20=%20key;body.appendChild(heading);body.appendChild(samples);bucket.sort((a,b)=%3Eb%5Bsize%5D%20-%20a%5Bsize%5D);for(let%20item%20of%20bucket)%20%7Blet%20li%20=%20document.createElement('li'),%20size%20=%20document.createElement('small'),%20sample%20=%20document.createElement('span');size.textContent=item.fontSize;li.appendChild(size);li.appendChild(sample);for(let%20%5Bprop,%20value%5D%20of%20Object.entries(item))sample.style%5Bprop%5D%20=%20value;sample.textContent%20=%20'The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog.';sample.setAttribute('data-tags',%20Array.from(item%5Btags%5D).map(t=%3E%60%3C$%7Bt%7D%3E%60).join(',%20'));samples.appendChild(li);%7D%7Dlet%20customStyleId%20=%20'typo-ramp-style';if(!document.getElementById('customStyleId'))%7Blet%20style%20=%20document.createElement('style');style.id%20=%20customStyleId;style.textContent%20=%20%60body,%20body%20*%20%7Ball:%20revert;%7Dul%20%7Blist-style:%20none;%7Dli%20small%20%7Bwidth:%206rem;text-align:%20right;padding-right:%202rem;display:%20inline-block;%7Dli:hover%20span::after%20%7Ball:%20initial;content:%20attr(style)%20%22%20#%20%22%20attr(data-tags);color:%20purple;position:%20absolute;font-size:%201rem;%7D%60;document.head.appendChild(style);%7Ddocument.body.parentNode.replaceChild(body,%20document.body);%7D)());

🤔 for me on Chromiuim the sorting by font-size is failing, I'll look into it at the next occasion.

OK, I updated the above, new version:

• Sorting is fixed
• Text is now "The quick brown fox jumps over the lazy dog."
• I also removed some whitespace from the code.

New update to skip another sort of not visible elements, which are hidden because their parent elements are hidden.