Nečitelné webové stránky (šedý tenký text)

2.1.2022 09:47 | Přečteno: 2596× | Linux

Rozšířil se nám takový nešvar: webové stránky používají pro hlavní obsah tenký text (font-weight: 300) a ještě k tomu světle šedý na bílém. Jak to opravit?

Slyšel jsem, že za to může nějaká stará chyba ve vykreslování fontů na Applu, kde jsou moc tlusté, tak to designéři nastaví tenčí a my ostatní to pak máme moc tenké, každopádně výsledkem jsou stránky jako tohle:

• 1, stránka s tenkým šedým (#555) písmem na bílém.
• 2, stránka se světle šedým (#666) písmem, ale alespoň standardní tloušťky, na bílém.

Dále jsem četl, že si designéři myslí, že černá na bílé je příliš kontrastní a uživatelům to vadí na oči. Já myslím, že uživatelé si to přece nastaví ve svém prohlížeči/X serveru/monitoru tak, aby jim to vyhovovalo, nicméně nechat něco na uživatelích dneska není v módě, takže třeba většina stránek odmítá nastavovat jazyk podle Accept-language hlavičky co jim pošlu, a místo toho věští z kávové sedliny nějakého seznamu IP adres z jakého jsou státu. </rant>

nastavení barev ve Firefoxu

Bookmarklet

Bohužel v CSS není žádná vlastnost typu min-font-weight (jako to jde u některých jiných věcí), kterou bych si mohl nastavit v uživatelském CSS, musíme to proto vyřešit nějak jinak.

Bookmarklet je kus javascriptu, který se spustí v kontextu aktuální webové stránky. Bylo to populární tak před 20 lety a překvapilo mě, že to ještě funguje v době odstraňování funkcionality z prohlížečů a různých CORS a same origin policy. Budeme chtít spouštět následující kód:

(function(){

var all = document.getElementsByTagName("*");

var delta = 0.1;

for (var i=0, max=all.length; i < max; i++) {
  const style = getComputedStyle(all[i]);
  var color = style.color.match(/\d+/g);
  var saturated = false;
  for(var c1=0; c1<3; c1++) {
    for(var c2=0; c2<3; c2++) {
      delta = Math.abs(color[c1] - color[c2]);
      if(delta > 0.5*color[c1]) saturated = true;
    }
  }
  if(!saturated) {
    avg = (+color[0]+ +color[1]+ +color[2]) / 3;
    if(avg <= 0x77) all[i].style.color="black";
    if(avg >= 0xaa) all[i].style.color="white";
  }
  if(style.fontWeight < 400) all[i].style.fontWeight = 400;
}

})();

Kód projde všechny prvky v dokumentu, a u každého:

• Ověří, jestli jeho barva je saturovaná nebo šedá (to se dělá porovnáním, jestli nějaká RGB složka je víc než 2x jiná než ostatní; správně by se to asi mělo dělat převedením do nějakého HSV a kouknutím na hue, ale tohle funguje dostatečně dobře) a pokud je šedá tak ji to nastaví na černou (resp. bílou pokud je víc než #aaa, což je kvůli věcem s černým pozadím).
• Ověří, jestli je fontWeight menší než 400 (což je standardní tloušťka), a pokud je, tak ho nastaví na 400.

Ve Firefoxu stačilo udělat Add Bookmark, a do políčka URL napsat javascript: a pastnout výše uvedené. Pak stačí na stránce, kterou chceme upravit, tu záložku zvolit a najednou je všechno čitelné a hurá.

Uživatelské CSS

Pokud chodím na nějakou stránku často, je opruz pokaždé klikat na bookmarklet. Nainstaloval jsem si proto rozšíření Stylus (dříve Stylish, ale ten prodali a nový majitel z toho udělal malware) (asi by tohle šlo i přímým editováním nějakého userContent.css jestli to ještě funguje a není potřeba po každém editu restartovat Firefox) a na stránce otevřu element inspector, najdu jakému tagu/CSS třídě se musí změnit color (často je to prostě body), a zadám to tam.

       

Komentáře

[Aleš]

Nemáš něco s očima? TY odkazy jsou v pohodě.

[Jendа]

Tak samozřejmě, že to přečtu, ale pohodlné to není.

[Aleš]

Asi záleží na displeji, Moderní displeje mi připadají tak kontrastní, že se mi lépe čte když kontrast není černá a bílá. Zase na drhou stranu na grafiku je kontrast dobrý.

[jiwopene]

Záleží. S TN displejem na notebooku nemám žádný problém číst černý text na bílém nebo bílý na černém pozadí, ale s IPS displejem musím mít jas snížený na minimum (proč výrobci neumožňují snížit jas až do černé?) a i tak musím použít méně kontrastní pozadí (nebo barvu písma). Např. světle šedá na tmavě šedé/modré nebo tmavě šedá až černá na světle šedé.

[MM]

"až do černé" pokud myslíš podsvícení, tak mi v XFCE pomohlo zvětšit počet kroků jasu displeje a zaškrtnout exponenciální - v Nastavení / správa napájení, pak to jde skoro až do černé.

[jiwopene]

Monitor to je externí, s regulací jasu pomocí menu, 101 kroků (0 až 100 včetně, krok 1), kde při nule svítí celkem dost (nesvítí-li do toho přímo slunce) a při 100 svítí moc.

[mirec]

Ako-kde na všetkých notebookoch mám PWM a dá sa nastaviť až do nuly (s krokmi menšími než 0.1%). Externé monitory na druhej strane idú tak do 5% (čo je v noci priveľa).

[jiwopene]

Na noteboocích jak kde – někde 10 stupňů jasu, kde při 0 svítí, jinde při 0 nesvítí vůbec, a jiné mají kroků víc (např. 100), kde je mezi 0 (nesvítí) a 1 výrazně větší rozdíl než mezi ostatními stupni jasu.

[nadtržítko]

Jsou uplne v pohode. Na kazdem UX kurzu te nauci ze pouzivat FFF ci 000 je ergonomicke zverstvo a tak pro pismo se pouzivaji odstiny sedi. Navic odkazy co davas jako priklad jsou v napostem poradku. Samozrejme se na to divam v nejlepsim moznem zarizeni (a to by mel delat kazdy) - tedy HiRes displej. A ani ten macOS neni na skodu, protoze lepsi vykreslovani pisma nenajdes.

[odtržítko]

And you're full of crap.

Ty stránky jsou nečitelný zvěrstvo i na kalibrovanym monitoru pro grafiky a ve vysokym rozlišení. Naopak nižší rozlišení by pomolo Apple-deoptimized font-weight 300 zmrdstvu, protože by se chytla minimální stem width.

Černá má bejt černá a bílá má bejt bílá.

[Urbex]

Lzi, povery a zavadeni. A ty kecy o zkalibrovanem monitoru haha a na linuxu, made my day.

[kuprexit]

Černá má bejt černá a bílá má bejt bílá.

Jo? Na jak kontrastním monitoru? Co je to vlastně bílá? HDR nic?

[j]

Takze ty ses debil, a ocekavas, ze tvuj nefunkcni monitor bude opravovat tvurce webu ... lol ...

---

Dete s tim guuglem dopice!

[_]

Muj monitor je plne funkcni, ale umi bilou, zarive bilou a velmi zarive bilou. Jako podklad textu preferuji bilou, zatimco v grafice ci filmech se uplatni i velmi zarive bila.

[Josef Kufner]

To není plně funkční monitor, to je blbě seštelovaný monitor.

[jejda]

Nejsi ty náhodou eskymák? Ti prý mají 17 druhů bílé barvy.

[Jendа]

Nerad vám kazím diskuzi, ale u stránek popisovaných v zápisku jde až na naprosté výjimky o černotu a tloušťku písma na #fff pozadí.

Nicméně jistě si zvládneš jednoduchou úpravou uvedeného skriptu zařídit, aby ti to neměnilo barvu textu, ale pozadí, takže i tobě se to bude hodit.

[trekker.dk]

Slyšel jsem, že za to může nějaká stará chyba ve vykreslování fontů na Applu, kde jsou moc tlusté

Apple: 10% uživatelů, 90% problémů.

[Max]

Ale no tak...
Zdar Max

[trekker.dk]

Máte lepší zkušenosti? To se máte.

[Max]

Mám dobré i špatné zkušenosti podobně jako u ostatních věcí. Rozhodně to ale není tak, že bych něco šmahem odsoudil.
Zdar Max

[trekker.dk]

Fajn, moje zkušenosti jsou jiné, takže jsem šmahem během mnoha let odsoudil.

[nadtržítko]

A to se jeste nebavime o linuxacich. Je jich 2% ale problemu 98% Viz tenhle clanek...

[cumil]

Uz 6 let pouzivam Font Rendering Enhancer web extension a nemohu si ho vynachvalit (mam ho nastaveny na maximum co ten jezdec dovoluje - mam naopak rad fonty, ktere jsou tluste).

Mozna to chodi i ve Firefoxu - napiste sem sve zkusenosti.

[regine]

Užívám add-on Blacken, ale dávám za pravdu, je hůře čitelné, mít písmo světle šedé.

[drnest]

Chtěl jsem to zkusi na Firefox 91.4.0esr. Nainstaluje se to to toolbaru. Jezdím po tom menu, můžu odškrtnout Automatic, ale jinak semi zdá , že to nefunguje. Má někdo lepší zkušenost?

[Max]

Mám jednoho kolegu v práci, který si na fullhd monitoru nastavuje scalling i 800% + případně lupu. Nevím, jak na tom dělá, někdy má jedno slovo přes celý monitor. Slepý ale není. Lidi jsou prostě různí.
Zdar Max

[jiwopene]

To je až trochu divné, ale typ. až 200% zvětšení se občas hodí (např. AbcLinuxu mám zvětšené na 120 %).

[Max]

Jedu zásadně jen 1:1, žádný čachry s DPI ani nic dalšího. Mám QHD monitor a nemám s ničím problémy. Ale chápu, že každý to má jinak.
Zdar Max

[Heron]

Já prakticky na každé druhé stránce upravuju zvětšení (ctrl+kolečko myši), protože některé písmo je nečitelně malé a jinde zase extrémně velké. Na některých stránkách to nefunguje, protože se autor rozhodl, že scaling zakáže.

[Zoe]

DarkReader extension umi force font filtering na jednotlive domeny. Taky se hodi reader mode. Ja uz delsi dobu tisknu veci na cteni na lejzru, co nestoji za papir, nestoji za cteni.

[Agent]

Díky. Dobrý plugin.

[drnest]

Já hledám spíš něco opačného, preferuju světlé pozadí a tmavý text. Znáte někdo takové rozšíření? Díky

[malá rada]

Vybodni se na Firefox a používej skutečný prohlížeč to jest Chrome.

[Heron]

Těch hříchů je mnohem víc.

Na každé stránce zbytečně vyskakuje info o cookies a to i tam, kdy by nemělo. Když jsem přihlášený a mám odsouhlasené podmínky použití, tak fakt nemusejí chtít pokaždé potvrdit cookies.

Úprava vzhledu textu a vlastní fonty na všechno. Všude nastavují vlastní fonty i když to vůbec není potřeba. Pro jistotu ještě navíc ty fonty nemají všechny unicode znaky, takže se čeština doplní z jiného fontu a vypadá to odporně. Už jsem takhle viděl vytištěné i nějaké úřední sdělení. Těm lidem zřejmě vůbec nedochází, že se v půlce odstavce změnil font a ten nový nemá české znaky.

Vlastní fonty se používají i místo ikonek pro různé funkce, takže když máte externí fonty zakázané, tak místo ikonek pro různé sekce webu, vidíte náhodná písmena a nevíte, kam to vede.

Ještě lepší je mít to jako single web page v JS, to se potom báječně dávají odkazy na konkrétní článek.

Obrázky. Zvláštní je, že u fontů často poctivě nastavují jak barvu popředí, tak pozadí, ale u obrázků velmi často nechávají průhlednost. Takže pokud má někdo tmavý motiv (a na webu se automaticky nastaví také tmavý motiv), tak obrázky s průhledností jsou nečitelné. Běžně se stává i tady na ABC, někdo z nějakého divného důvodu exportuje obrázek jako průhledný a na tmavém stylu to není k přečtení.

A ano, u fontů nastavují všechny parametry, které lze. Kdyby to mělo tisíc parametrů, tak budou nastavovat tisíc parametrů.

[regine]

Pro starý Firefox byl vynikají add-on Accessibar, ale pak autor už vzdal udržovat kompabilitu na stále modifikovaná jádra u Mozilla.

[xkucf03]

Příloha:

• web rozbitý kvůli JavaScriptu.png (649490 bytů)

takže když máte externí fonty zakázané, tak místo ikonek pro různé sekce webu, vidíte náhodná písmena a nevíte, kam to vede.

O něčem podobném jsme se před časem bavili, akorát už jsem se pak nějak nedostal k odpovědi.

Ano, v případě obrázků to funguje – to se tam zachovalo z dob starého webu. I když taky ne úplně – je např. hodně obchodů, kde se vůbec nenačtou obrázky, pokud nepovolím načítání JavaScriptů z nějaké CDN třetí strany (ty obrázky jsou klidně hostované lokálně, ale o jejich načítání rozhoduje JavaScript, který závisí na jiném JavaScriptu z té CDN). Spousty formulářů nejdou odeslat nebo se vůbec nezobrazí (bez externích JavaScriptů)

Přijde mi dost hloupé, když je někdo schopný si hostovat obrázky, což je řádově větší objem dat, ale není schopný si sám hostovat knihovnu typu jQuery, která má cca 90 kB (komprimovaná cca 30 kB), a musí ji stahovat z externích serverů, konkrétně z CDN Googlu. A když se to nepovede, třeba proto, že to uživatel blokuje nebo je nějaký problém na síti, tak celý web selže a přestane být použitelný – kvůli úspoře pár blbých kilobajtů. Zanést do systému takovouto závislost na externí službě je podle mého jen lenost/lemplovství/neznalost příslušného webaře. Není to dobré vůbec k ničemu. Někdo třeba namítne, že z té CDN si těch 30 kB stáhnu jen jednou a může to zůstat v mezipaměti prohlížeče a hodit se to při návštěvě jiného webu, který použije tu samou knihovnu… děkuji, nechci, těch 30 kB si klidně stáhnu pokaždé znovu. Nemluvě o tom, že verzí té knihovny je spousta a každý web bude používat jinou. Hlavně ale to „moderní“ hostování na CDN budou propagovat lidi, kteří jsou pak schopní ti do prohlížeče nasrat několik megabajtů zkompilovaného JavaScriptu v rámci své úžasné SPA/PWA aplikace. A tyhle MB jsou unikátní pro tu jejich aplikaci a navíc se celkem často mění, takže s žádným dalším webem sdílet nebudou.

Příklad máš v příloze. Jsou tam i ty nenačtené fonty, o kterých píšeš ty, kvůli kterým pak chybí různé ikony.

Mimochodem, zažil jsem i různé anomálie v DNS nebo na úrovni směrování IP, kdy spojení mezi některými sítěmi záhadně nefungovalo (zatímco odjinud a jinam ano). Pak platí, že čím víc závislostí (na více různých službách/sítích), tím vyšší pravděpodobnost, že některá z nich nebude fungovat – a nedostupnost kterékoli z nich pak může vyřadit tvoji službu z provozu. Je to zbytečná provázanost, která vede na zbytečně křehké systémy.

[kralyk z abclinuxu]

Někdo třeba namítne, že z té CDN si těch 30 kB stáhnu jen jednou a může to zůstat v mezipaměti prohlížeče a hodit se to při návštěvě jiného webu, který použije tu samou knihovnu… děkuji, nechci, těch 30 kB si klidně stáhnu pokaždé znovu.

S tím je navíc ten problém, že request se pošle pokaždé znova, i s refererem, cookies apod. Kdyby se to aspoň stahovalo bez refereru, cookies apod., aby CDNka nevěděla, pro jaký konkrétně web to zrovna je, tak už to by bylo zlepšení.

[Miriam]

Ty jsi debil, kup si brejle!

[Windows forever]

LOL freetardi jak obhájíte tohle?

[Windows forever]

HAHAHAHAHA

[ryzi zen]

+10

[Meh]

To je od nej spis self-pwn. Je totiz zajimave (a je treba to temhle fnukalum, co fnukaji, jak je ten support Linuxu hrozne pracny a drahy a nejde to a blah blah blah, omlatit o hlavu), za narozdil od komernich studii lidi, co ve volnem case bastli remaky ruznych komercnich her, to zpravidla dokazi napsat multiplatforme a zjevne je to nestoji dvacet milionu dolaru ani clovekohodin prace.
Ale kdyz uz je nekdo zkratka prase a ma obe ruce leve, tak fajn, to nevadi, at se na to vybodne, naprasi to jenom pro Windows a proste to jen zvlast nekurvi anti-cheatem/DRM. Wine uz se postara o zbytek.

Navic se mi zda, ze Planetary Annihilation je jedna z tech her, jejiz vyvojari si pletou Steam a Linux. Horsi nez koupe binarniho blobu je totiz uz jen koupe binarniho blobu na Steamu. Hint: jestli chcete penize od linuxaku, tak v te kampani na kickstarteru, kterou stejne delate, slibte, ze rok po vydani, kdy po vasi hre uz nestekne ani pes, uvolnite zdrojaky, assety a tooly, a ten blob na Steamu si dokonce muzete uplne odpustit.

[cd]

Ono to ma aj druhu stranku https://www.pcgamer.com/indie-dev-finds-that-linux-users-generate-more-better-bug-reports/

[Jakubm]

tak každý normální člověk ví že Linux na desktopu je a bude zcela nepoužitelný. Snad na prohlížení webu. Proto těch pár procent fandů kterým v dualbootu mají stejně okna

[kralyk z abclinuxu]

Dnes už ani nevim, jaká je poslední verze Windows - něco jako 11 nebo 12? Stejnětak nevim, jak to dnes vypadá - na Windows je fajn, že ty základní systémový dialogy zůstavaj stejný už někdy od roku 95, akorát se člověk k nim musí proklikat skrz aktuální microsoftí zoufalý pokus designově ukázat, že jejich OS je něco víc než jen setrvačný vendor lock-in tří čvrtin trhu. Když jsem s Windows nějak víc interagoval naposledy, tohle se jmenovalo "Metro". Dnes se to nejspíš jmenuje jinak, ale podstata bude hádám furt stejná jako v předchozích 20 letech...

Nevim, co přesně je dnes "desktop", o svých PC uvažuju jako o pracovních stanicích. Na jednom mam Arch a na druhým Ubuntu kvůli firemní politice. Arch je boží, "běžná" distra (např. to Ubuntu apod.) mi přijdou nic moc... Upřímně řečeno, nebýt Archu, je možný, že bych dnes byl na Applu...

[Dr. Chocholousek]

Kralyku drz se. Takovejch endemitu jako ty je na svete uz jen snad 16-17 kusu. V ramci diverzity musis prezit a slouzit jako odstrasujici priklad pro miliony normalnich desktopaku!

[Bystroushaak]

tak každý normální člověk ví že Linux na desktopu je a bude zcela nepoužitelný. Snad na prohlížení webu. Proto těch pár procent fandů kterým v dualbootu mají stejně okna

Každý normální člověk. Co to je? Nějaká bájná bytost z argumentačních faulů?

[Meh]

...třeba většina stránek odmítá nastavovat jazyk podle Accept-language hlavičky co jim pošlu, a místo toho věští z kávové sedliny nějakého seznamu IP adres z jakého jsou státu...

To meli (mozna porad maji) jeden cas na GOGu a nejenom, ze to vestilo jiny jazyk nez v hlavicce, ale casto take co nacteni stranky, to jiny jazyk. Vlastne jazyk v hlavicce bylo to jedine, co to konzistentne nikdy netrefilo pri prvnim nacteni. Prikladne vyuziti JavaScriptu: k reseni problemu, ktery nikdy nebyl, a jeste spatne.

[j]

Nevim jak gog, ale presne tuhle picovinu delaj ti curaci z guugla ... takze mam vsechno bud nemecky, francouzky, aktualne taky trebas norsky jak koukam ... podle toho jakou IP zrovna vyfasuje stroj ze kteryho to votevru. A to presto, ze muj browser zcela jasne rika ze to chce en.

Stejne tak je strasne v mode, ze ti gamesa prozmenu sebere jazyk systemu, a soudruzi proste usetrili, a tak polozka na zmeny jazyka v konfiguraci neni (zato tam je asi tak tisic jinych, ktery stejne nikdo nikdy menit nebude, protoze efekt je presne nula).

---

Dete stim guuglem dopice!

[kralyk z abclinuxu]

google.com/ncr

[j]

Tohle samozrejme znam a problem to vubec nijak neresi. Nebo jak chces nekomu vysvetlit jinak, nez ze v guuglu (a M$) delaj vyhradne curaci (vyjimky v tomto pripade neexistuji), kdyz napise guugl.CZ a dostane to nemecky?

---

Dete s tim guuglem dopice!

[pushkin]

Jo, další "designová" záležitost. Na něco podobného jsem narazil teď v JH v bazéně - šedá orientační (!) tabulka se světle šedým textem. S brýlemi na hranici čitelnosti, bez brýlí jednolitej šedej flek. Autorovi bych urazil ruce.

[j]

Autorem je se 100% jistotou nejaka marketingova pica, protoze seda na sedy je aktuelne v mode ... zrovna nedavno v my okolicnaty bubline jedna takova nechala na firemni barak, namontovat firemni logo v sedy barve na sedou steechu, takze sem konstatoval, ze lip se nedokazou zamaskovat ani prislusnici sas.

Ostatne, totez (s tema picama) plati o vizualu widli, dej si schvalne trochu pres sebe trebas 2x putty, a nepoznas, kde jedno konci a druhy zacina (v 11tkach to vylepsili o to, ze uz ani nezjistis, ktery z tech 10 kam vede, a budes muset prosacovat vsechny).

---

Dete s tim guuglem dopice!

[::]

Tenhle a spoustu dalsi problemu resi reader view ve firefoxu.

[Macik]

Tolik překlepů v slově "safari" jsem již dávno neviděl

[NUKE GAZA! 🎆]

hele darkreader aje to jako :D :D ;D ;D

[Tresen]

Pro používání tohoto rozšíření potřebujete Firefox.

[메이저놀이터사이트]

How amazing this article is!!! It is the article which can help me to look back on myself while reading an article about 메이저놀이터, and to grow in the future rather than always beating myself up and staying in one place.

[Etien]

Naprostý souhlas, absolutně bych zakázal šedivé fonty a šedivé ikonky, vědecky je prokázáno, že to zraku škodí, jenom grafici si myslí, jak je to v módě a úžasné, není, všechno si dávám do černého a písmo ideálně bílé, nesnáším, nenávidím, když je darkmode šedivý, má být vše černé a hotovo, žádné ochechule, serepetičky kolem, je to šílený nešvar a upřímně bych to uzákonil, že při vstupu na stránku a aplikace si uživatel musí vybrat, jaké chce zobrazení. Pro příklad - smartbanka, atd, takže nejen že máme drobounké písmo, ale ještě šedivé na tmavě šedivém podkladu, to je nepřijatelné, ať si to používá kdo chce, ale základ má být vždy bílá/černá, hotovo.