Již dlouho a dlouho máme na Hogu nastavené písmo Arial Narrow. Je úzké a malé. Naprosto dokonalé pro oční vady. Avšak Firefox donedávna chybně interpretoval Arial Narrow a zobrazoval ho jako pouhý Arial. Rozdíl je markantní. V tomhle článku se zamyslíme nad písmem webu, na kterém trávíme denně několik hodin čtením, a dozvíme se, jak zvětšit písmo na Hogwarts.

Jakožto člověk, který vyučuje tvorbu stránek, mám jakési povědomí o tom, jak by měl web vypadat. Že malé písmo ničí zrak, to je snad všem jasné. Troufám si říct, že člověk se pak přirozeně předklání k monitoru, aby přece lépe viděl, čímž si pro změnu začne ničit ještě krční páteř (a nejen tu krční). Budeme se chtít opírat lokty, protože přece musíme napsat ten dvanáctý úkol, a tím se nám hezky zakulatí ramena. Ochabnou nám prsní svaly, začnou nám odstávat lopatky, budou nás bolet záda a oči a hlava… a to všechno jen proto, že nevidíme dobře. A taky proto, že neděláme kompenzační cvičení. Nebo ano? Pak gratuluji, jste světlá výjimka!

Jsem zastánce toho, že některým věcem je lepší předcházet. Zamysleme se, jaké možnosti nám nabízí Hogwarts pro zvětšení písma. — Žádné. A má to své důvody. Ještě donedávna (relativně donedávna, bráno od doby vzniku prvních veřejných stránek) byla snaha, aby ve všech prohlížečích vypadala stránka stejně. A nejen prohlížečích, ale aby se i jedné skupině uživatelů zobrazilo to samé. Proč, to už není tak jasné, ale ono to působí profesionálněji. (Doplnění: Tahle snaha pozbyla zbytkového důvodu v okamžiku, kdy se začal používat responzivní design: na mobilu a na PC vypadá mnoho webů jinak.) Je tedy potřeba pátrat v prohlížečích. Tam už jsme na tom lépe! Už i stařičký Internet Explorer míval nástroj (lupu) na zvětšení textu. A lupa se zachovala doteď. Doufám, že všichni dokáží lupu najít a v případě potřeby i použít, avšak pro jistotu připomínám, že ji nalezneme v pravém horním rohu prohlížeče Chrome i Firefox.

Lupa v prohlížeči Chrome (vlevo) a Firefox (vpravo).

Nynější lupa však zvětšuje stránku i s grafikou, což nemusí být úplně žádoucí, pokud zrovna netrénujete chytače. Navíc, aby čtení tak malého písma Arial Narrow bylo pohodlné (kdy jste si naposledy opřeli hlavu i ramena?), je potřeba Hog zvětšit na cca 120 %. To ale nemusí být úplně to pravé. Víte, už jsme málem to větší písmo na Hogwarts měli. Na začátku září 2016 jsem vznesl podnět na MK a profesor Nimrandir Elénére ještě ten den písmo zvětšil. Pro moje oči to bylo daleko lepší, ve VS byli lidi, kteří to vážně uvítali, ale… Jisté slečny (asi dvě, tři), které nebudu jmenovat, si stěžovaly, že ony to větší písmo nechtějí, že jim vyhovuje to prťavé, že jsou na něj zvyklé a tak. Tudíž se Hogwarts asi po dvou hodinách znovu vrátilo na miniaturní písmo, třebaže předpokládám, že většina lidí má stejně Hog zvětšený. Děkujeme, menšino :))

Pro srovnání: První snímek má písmo Arial, druhý Arial Narrow, což je výchozí písmo Hogu.

Jak jsem předesílal v úvodu, u Firefoxu došlo k důležité aktualizaci a Arial Narrow se již nevykresloval jako Arial. Někteří vědí, že jsem tvrdohlavý a že se tak snadno nevzdám, tudíž jsem s tím začal něco dělat. A povedlo se! Podařilo se mi přesvědčit Firefox, aby písmo Arial Narrow na webu hogwarts.cz zobrazoval jako písmo Arial. Tak se rovnou podívejme na ten hlavní cíl článku.

Doplněk Stylus

Kdysi existoval doplněk Stylish, který umožňoval změnit vzhled webové stránky, například tak často oblíbeného Facebooku. Úplně jiné barvy, jiné písmo, rozvržení… Tento doplněk časem přestali aktualizovat a zastaral, ale myšlenka stále aktuální zůstala! Nyní se doplněk jmenuje Stylus, který stojí na stejných základech, je vylepšený a funkční. Je k dostání pro Chrome (zde) i Firefox (zde). Ten je potřeba stáhnout. A držte se následujících kroků:

1. Otevřete si nastavení doplňku (FF) či rozšíření (Ch) a dole naleznete tlačítko Spravovat styly. Kliknout.
2. Na panelu vlevo je tlačítko Napsat nový styl. Kliknout.
3. Dole vidíte Platí pro – vyberte Specifikovat.
4. Z vysouvacího seznamu zvolte URL adresy na doméně a do toho dlouhého políčka napište www.hogwarts.cz a klikněte na tlačítko Přidat.
5. Do toho velkého pole nad kolonkou, do které jsme psali adresu Hogu, je potřeba vepsat následující kód:

   @font-face {
       font-family: „Arial Narrow“;
       src: local(‚Arial‘);
   }
   Poznámka: je potřeba nahradit „české“ uvozovky uvozovkami vyloženě rovnými (shift + ů)
   

6. Vlevo nahoře zadáme název, já mám například hog-arial.
7. A konečně klikneme na tlačítko Uložit.

Tím se nám překreslí Hogwarts, změnilo se nám písmo – je větší – a grafika zůstala na svém místě. Ten postup jen složitě vypadá. Ve skutečnosti je daleko jednodušší.

Kód funguje tak, že pokud prohlížeč na webu www.hogwarts.cz někde zbystří, že má použít Arial Narrow (což je na Hogu úplně všude), prohlížeč se bude tvářit, že vybral písmo Arial Narrow. Ale tím řádkem src jsme prohlížeči namluvili, že písmo Arial Narrow se skrývá pod písmem Arial, a on si ho vesele vezme.

Poznámka: Nebojte se experimentovat! Hádejte, co se stane, když místo Arial napíšete třeba Monotype Corsiva (pořád v uvozovkách) ;) A moji čarostavitelé vyššího stupně by mohli umět implementovat i písmo nejen lokální.

Samozřejmě lze doplněk Stylus kdykoliv zakázat nebo odinstalovat, nabízí možnost dočasného vypnutí našich úprav, a zdá se, že se tento doplněk znovu dočká dřívějšího věhlasu.

Můj Hogwarts vždycky běžel na Arialu, protože se dobře čte. Mám ho ještě zvětšený lupou o 10 %, abych si nekazil oči. Že si třeba změníme to písmo neznamená, že si nemusíme nastavovat lupu. Pokud zjistíte, že se vám Arial čte hůře než Arial Narrow, samozřejmě můžete doplněk ihned zrušit. Nezastírám, že článek je psaný primárně pro uživatele Firefoxu, kteří nejsou z aktualizace úplně nejšťastnější, ale když jsem zjistil, že Stylus funguje úplně stejně i pro Chrome, tak samozřejmě nemůžu opomenout i tuto velkou část uživatelů.

Tak chraňme naše oči, páteř, svaly… a loučím se s vámi,
Nicholas :)