Reader mode własnej roboty — wytnij stronę do samej treści
Przeglądarki mają tryb czytania, ale bywa kapryśny — na jednej stronie się nie odpala, na drugiej wycina za dużo, dostroić się nie da. W JustZix zbudujesz własny: jeden przycisk akcji, który wycina stronę do samego artykułu, dokładnie według Twoich zasad.
Dlaczego własny
Wbudowany reader mode to czarna skrzynka. Nie wiesz, kiedy się pojawi, nie wpłyniesz na to, co uzna za „treść", nie zmienisz typografii. Własna reguła to kilkanaście linii, które rozumiesz i poprawiasz pod siebie.
Najlepiej jako akcja BUTTON
Reader mode rzadko chcesz mieć włączony automatycznie — chcesz go na żądanie. Dlatego to idealny kandydat na akcję typu BUTTON w pasku akcji JustZix. Etykieta np. READ, a kod uruchamiany przy kliknięciu:
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('Nie znalazłem kontenera treści.'); }
else {
document.body.replaceChildren(art);
document.body.style.cssText =
'max-width:70ch;margin:40px auto;padding:0 24px;' +
'font:19px/1.7 Georgia, serif;background:#fbfaf7;color:#222';
}Jak to działa
Dobór kontenera treści
querySelector dostaje listę kandydatów od najbardziej do najmniej pewnego: <article>, element z role="main", <main>, dalej popularne klasy CMS-ów. Bierze pierwszy, który istnieje. Dla strony, na której nic nie pasuje, dopisz jej własny selektor na początek listy.
replaceChildren
document.body.replaceChildren(art) wyrzuca z <body> wszystko i wstawia tam wyłącznie kontener artykułu. Jedno wywołanie zamiast pętli usuwającej element po elemencie.
Typografia
max-width:70ch daje wiersz o długości około 70 znaków — optimum czytelności. Reszta to margines, font szeryfowy i ciepłe tło. Zmień na swoje upodobania.
Wariant CSS-only
Jeśli strona ma czysty <article>, obejdzie się bez JS — w zakładce CSS reguły:
body > *:not(:has(article)) { display: none !important; }
article {
max-width: 70ch !important;
margin: 40px auto !important;
font-size: 19px !important;
line-height: 1.7 !important;
}Wariant CSS jest mniej pewny (zależy od struktury strony), ale nie rusza DOM-u — łatwo go wyłączyć.
Pułapki
- Obrazki w treści zostają. Są dziećmi artykułu, więc przetrwają — to dobrze.
- replaceChildren jest jednokierunkowy. Po wycięciu wracasz do normalnej strony przez reload (F5). To akceptowalne dla akcji „na żądanie".
- Skrypty strony mogą protestować. Część kodu strony liczy na elementy, które usunęliśmy, i rzuci błędem w konsoli. Treści to nie psuje.
Zobacz też
- Przykłady — gotowe snippety do akcji i reguł
- Ujarzmij sticky elementy — lżejsza wersja sprzątania strony
- Akcja BUTTON — typ akcji, na którym to oprzesz
Zainstaluj JustZix — i czytaj artykuły bez całej reszty strony.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.