Bookmarklets to deal with annoying designs

I have two bookmarklets which I use frequently: r (“readable”) to improve the readability of text, and f (“fixed”) one to remove fixed navigation and banners. I put them in my toolbar as r and f so it doesn’t take up too much space.

Extensions are more popular these days but I rather like this lightweight approach. It gives me easy control over when exactly it’s executed, and it’s less intrusive than a full-on reader mode or whatnot. It’s simple, fast, and reliably works about 90% of the time :-)

Usage: in Firefox right-click the links and click “add bookmark”, or drag-and-drop to bookmarks toolbar. In Chrome it seems the only way is to drag-and-drop to bookmarks toolbar. I’m not sure about other browsers, but I’m fairly sure the internet does.

readable     fixed

readable

Convert most text to something more readable:

javascript:(function() {
    document.querySelectorAll('p, li, div').forEach(function(n) {
        n.style.color = '#000';
        n.style.font = '500 16px/1.7em sans-serif';
    });
})();

Fortunately the “low contrast thin text”-fad seems slowly be going out of fashion, but it still crops up often enough. Everyone who cared about good design said it was completely stupid from the first minute it was used, but the frontend crowd never listens and has to find out these things for themselves the hard way 🤷‍♂️

Note: on my Linux system I noticed that very thin text almost always resolves to “DejaVu Sans ExtraLight” (select “Fonts” in Firefox CSS inspector to see the font Firefox selects). I tried mucking about with fonts.conf so it’s never used, but after some time I reaffirmed my opinion that fontconfig is a horrible inscrutable mess and decided that life is too short to deal with this bullshit, so I just did:

$ rm /usr/share/fonts/TTF/DejaVuSans-ExtraLight.ttf

The font doesn’t get many updates, so it should be mostly fine. I’m not the first to struggle with this. Contact me if you know how to make it work.

fixed

Convert fixed and sticky positioning to absolute:

javascript:(function() {
    document.querySelectorAll('*').forEach(function(n) {
        var p = getComputedStyle(n).getPropertyValue('position');
        if (p === 'fixed' || p === 'sticky') {
            n.style.cssText += ' ; position: absolute !important;';
        }
    });
})();

The !import is needed because I found it’s not uncommon for sites to override position: absolute with position: fixed !important when someone scrolls down.

This tends to break layouts a bit. I usually don’t care as I just want to read the main body text.

This is mostly to remove huge fixed navigation, which seem to be the latest fad. It’s not uncommon to see them take up 25% of the screen or more, which is just annoying. Not everyone uses a 26″ screen…

I actually have two laptops: a 12″ 1920×1080 ThinkPad x270, and a 14″ 1366×768 HP 14s^[1], and it’s broken on both: on the ThinkPad I often zoom which tend to hugely inflate the size of these headers, and on the HP the screen just isn’t very high-res, which means that your 150px header is actually quite a significant part of my available space.

Example I ran in to today is the AWS blog; the header takes up about 30% of screen space at a zoom level of 133%.