Zarovnání textu na webu do mřížky na účaří

19. prosince 2007

•

My webdesignéři se radujeme i z maličkostí. Naši kolegové ze světa tisku se musí bavit, když sledují, jak mluvíme o tom, že konečně jsme schopni dosáhnout na webu takových layoutů, které oni běžně už roky používají. Řekněme to rovnou – dnes je snadnější dát na web video, než nastavit konzistentně písmo nebo zarovnat prvky do mřížky.

Ale my webdesignéři jsme rváči. Jen tak snadno se nevzdáváme. V té dlouhé pomalé bitvě s podporou v prohlížečích a nekonzistencemi v platformách dokážeme na web přenášet stále složitější a složitější tiskové techniky – i když u toho občas kopeme a křičíme…

Technologie máme

Během minulého roku se hodně mluvilo o gridech – mřížkách a o použití sloupcové mřížky pro layouty webů. Mark nám dal představu, Khoi případovou studii a Cameron nástroje. Poselství je jasné – máme podporu v prohlížečích, máme know-how a nástroje, které potřebujeme k tomu, abychom na webu tvořili konzistentní vícesloupcové mřížkové layouty.

Na písmo ve sloupcích můžeme aplikovat stejné principy pro proporce a rozvržení jako naši bratři v tisku – zarovnání textu stránky na společné účaří.

Základní princip zarovnání textu stránky na společné účaří je, že spodek každého řádku textu (účaří) zapadá do vertikální mřížky, jejíž políčka jsou na celé stránce stejně vysoká. Vzpomeňte si na ty staré písanky, které jste dostali na základní škole, když jste se učili psát, a máte základní představu. Magický výsledek toho je, že všechen text na stránce je ve „stejných“ řádcích přes všechny sloupce a vytváří tak harmonický vertikální rytmus.

V tisku to není tak těžké. Jen si povolíte příslušné nastavení v Quarku nebo InDesignu a nastavíte přírůstek podle výšky řádku, kterou chcete. Ovšem na webu to je úplně jiný příběh. Už tak je dost těžké pomocí CSS zarovnat věci vertikálně, protože se těžko předpovídá, kam který prvek zapadne, a když pracujeme s písmem, pro které se velikost sama o sobě konzistentně nastavuje jen obtížně, je to jen horší. Ale s trochou matematiky a lehce obsesivní starostí o detaily se to může podařit.

Vyrobíme mřížku

Pozn. aut.: V příkladech k tomuto článku jsem použil pro stanovení velikosti textu jako jednotky pixely. To může být v článku u tohoto e-zinu překvapivé doporučení. Důvody, proč jsem tak učinil, stejně jako některé alternativní techniky, vysvětluji dále v článku.

První věc, kterou musíme udělat, je stanovit výšku řádku pro mřížku. Zvolil jsem celkem standardní velikost fontu 12 pixelů a výšku řádku 18 pixelů, což je pěkný 150% řádkový proklad. Je důležité přemýšlet o výšce řádku dopředu. Potřebujete takový poměr velikosti fontu k výšce řádku, který je vyvážený z hlediska čitelnosti a je snadno dělitelný na menší jednotky (o tom více později).

Půjčil jsem si Khoiho trik a vytvořil jsem opakující se obrázek na pozadí, který na stránce mohu použít, abych se ujistil, že všechny řádky jsou tam, kde chci, aby byly. Výsledek se zapnutou mřížkou můžete vidět v tomto příkladu.

Všimněte se, že v předešlém příkladu text nenasedá přímo na linky mřížky. Kvůli způsobu, jakým CSS renderuje line-height – tedy výšku řádku (přidáním místa nahoře a dole pod písmem), je mnohem snadnější zarovnat text v mezích linek mřížky než přímo na ně. Je možné upravit obrázek na pozadí tak, aby to vzal v úvahu, nebo upravit padding určitých prvků tak, aby text začínal na jiném místě, ale není žádný důvod, proč věci komplikovat více, než musíme.

Odstavce a záhlaví

Začnu resetováním marginu a paddingu na všech prvcích, abychom se nemuseli starat o výchozí stylopisy jednotlivých prohlížečů. V praxi asi použijete něco přesnějšího, ale pro účely tohoto příkladu bude starý dobrý hvězdičkový selektor postačovat:

* {
margin: 0;
padding: 0;
}

Mezery mezi odstavci sice chceme, ale výchozí horní a spodní margin 1 em (což je v tomto případě 12 pixelů) nebude fungovat s osmnáctipixelovou mřížkou, a tak nastavíme spodní margin u odstavců na 18 pixelů:

p {
margin-bottom: 18px;
}

Když už nastavujeme velikost fontu pro záhlaví, potřebujeme také nastavit odpovídající výšku řádku v násobcích 18 a také přidat osmnáctipixelový spodní margin:

h1 {
   font-size: 24px;
   line-height: 36px;
   margin-bottom: 18px;
}
h2 {
   font-size: 18px;
   line-height: 18px;
   margin-bottom: 18px;
}
h3 {
   font-size: 12px;
   line-height: 18px;
}

Vzorec je docela jednoduchý. Pokaždé, když přidáte do vertikály prostor pomocí paddingu či marginu, musíte ho přidat v jednotkách, které jsou násobkem osmnácti pixelů, abyste udrželi zarovnání na účaří textu. Nemusíte vždy přidávat v jedné definici celý násobek, ale součet musí dávat 18 pixelů. Například byste mohli nastavit horní margin na 12 pixelů a dolní na 6 pixelů.

Seznamy

Seznamy jsou trochu problematičtější. Obvykle vkládáme rozestupy mezi položky seznamu a před nebo po zanořeném seznamu. Podle velikosti své mřížky se asi budete muset rozhodnout, buď přidat spoustu volného místa (plný řádek mřížky), nebo nepřidat nic a nechat položky seznamu zapadnout do normálních řádků mřížky.

Protože výška řádku 18 pixelů, se kterou jsme začali, je dost velká, volba „nic“ zde bude fungovat velmi dobře. Přidal jsem jen dolní margin 18 pixelů:

ul,
ol {
margin-bottom: 18px;
}

Pokud jde o vnořené seznamy, je možné přidat polovinu výšky řádku (v tomto případě 9 pixelů) jako horní a dolní marginy takového vnořeného seznamu. Přidáním půlky řádku na začátek a konec znamená, že obsah seznamu bude „mimo mřížku“, ale mřížka se pak obnoví, když vnořený seznam skončí. Je to kompromis, ale někdy to stojí za to, zvláště když potřebujete použít velmi dlouhé nebo komplikované vnořené seznamy.

Plovoucí prvky a postranní sloupce

Tak tady budeme potřebovat trochu ukázněného přístupu. Obrázky a jiné prvky, které plavou v textu, musí mít výšku, která je násobkem výšky řádku mřížky. V tomto případě násobky osmnácti pixelů. Jestliže budou mít správnou velikost, můžete přidat marginy, které, když se přičtou k výšce, dají ve výsledku opět násobek osmnácti, takže okolní text se zalomí vždy na správné místo, přímo pod obrázek.

.left {
   float: left;
   margin: 0 18px 18px 0;
}
.right {
   float: right;
   margin: 0 0 18px 18px;
}

Jiné plovoucí prvky, jako různé boxíky, jsou trochu komplikovanější, protože je těžší předvídat jejich výšku, která závisí na jejich obsahu. Ale pokud všechen text a obrázky uvnitř plovoucího boxu dodržují osmnáctipixelové pravidlo a vždycky přidáváte vertikální padding a margin tak, že jejich součet bude dělitelný osmnácti, všechno by mělo zařezávat bez ohledu na to, co dáte dovnitř.

.callout {
   border: 1px solid #ddd;
   padding: 8px 10px;
   margin-bottom: 18px;
}

Povšimněte si, že jsem přidal osmipixelový padding nahoru a dolů na plovoucí prvek, protože šířka okraje (border) již zabrala 2 pixely z přidané výšky (8 + 8 + 1 + 1 = 18).

Zruším také spodní margin u posledního prvku v plovoucím boxíku, aby uvnitř nebylo příliš mnoho prázdného místa. Z hlediska layoutu nejde o kritickou záležitost (mřížka je i bez toho v pořádku), takže použiju pseudotřídu :last-child, protože tak nebudu potřebovat žádný extra kód. MSIE6 to sice nepochopí, ale layout se ani v něm nezboří.

.callout :last-child {
margin-bottom: 0;
}

U plovoucích boxíků a postranních sloupců je důležité pamatovat na to, aby výška řádku byla stále stejná, i když text uděláte menší. Může vás to svádět snížit výšku řádku, ale i velikosti písma 11 nebo 10 pixelů jsou stále velmi dobře čitelné při výšce řádku 18 pixelů.

All your baseline are belong to us

Jak to celé vypadá, můžete vidět v tomto příkladu. Jestliže mi nevěříte, odložte svá pravítka a podívejte se na příklad se zviditelněnou mřížkou na pozadí.

Asi začínáte chápat, proč takové mřížky nejsou na webu příliš používány. Je docela těžké je udržet – zvlášť když je layout komplikovanější – a my jsme se dotkli jen povrchně těch nejsnadněji řešitelných části problému. Stejně jako při tisku není sazba textu do mřížky podle účaří vždy správnou volbou pro každý layout a někdy budete muset udělat výjimku, nebo některé prvky z mřížky vyjmout.

Ale je to určitě možné a stojí to za pokus, zvláště v kombinaci vertikální a horizontální mřížky. Dobře vybalancovaná mřížka – dokonce i když bude jen v oblasti pro hlavní obsah – může vylepšit vzhled a čitelnost.

Nebojte se pixelu

Poznámka k určení velikosti fontů – používám v tomto příkladu pixely místo em z konkrétního důvodu – všechno se tím zjednoduší. S pixely mohu nastavit výšku řádku pro celý dokument a nemusím ji přepočítávat, kdykoli použiji menší velikost fontu. Když navrhujete systém určený pro nasazení v běžné praxi, jako je tento, je důležité (pro vás i ostatní), aby se relativně jednoduše používal i udržoval.

Můžete použít relativní velikosti, ale údržba bude mnohem složitější, protože matematika okolo bude komplikovanější. Je snadné dostat 12 z 18 (stačí nastavit řádek na 1.5em), ale když chcete upravit velikost textu a udržovat stejnou výšku řádku, zlomky vám v tom začnou dělat nepořádek a exaktně předvídat, jak je prohlížeč zaokrouhlí, je dost těžké. Je to ale možné, a jestliže to s relativními velikostmi písma chcete zkusit, doporučuji vám vynikající článek Richarda Ruttera z 24 ways Compose to a Vertical Rhythm.

Nakonec je to něco za něco. Většina prohlížečů zvětšuje řádky, které jsou definované v pixelech, proporcionálně s textem. Samozřejmě, marginy se nezvětšují, ale to nedělají ani obrázky. Stojí za to, dělat systém komplikovanější jen proto, aby se marginy zvětšovaly, když to obrázky stejně nedělají? To záleží na situaci. Nakonec je to na vás.

Jako designéři někdy musíme najít rovnováhu mezi tvorbou layoutů na pixel přesných nebo flexibilních. Když se nad tím zamyslíte, text s proměnlivou výškou je v první řadě vlastnost důležitá pro přístupnost, nikoli design. Ideálně by toto mělo být zajišťováno prohlížečem bez ohledu na to, jak je stránka vytvořena, a v moderních prohlížečích tomu tak i je. Dokud je váš obsah čitelný a přístupný ve všech velikostech, není nutně pravda, že design si musí udržet integritu, když změníte velikost písma.

Poznámky překladatele

Hvězdičkový selektor použitý v příkladu může způsobit špatné vykreslování některých prvků formulářů, doporučuje se používat spíše seznamy definic. Dobrý vzor pro „resetování“ CSS najdete na stránkách YUI CSS Foundation.

Fráze „all your baseline are belong to us“ (něco jako „všechny vaše účaří jsou patřit nám“) je narážka na proslulou herní hlášku „all your base are belong to us“, obvykle do češtiny překládanou jako „všechny vaše základna jsou patřit nám“. Pochází z původně japonské hry Zero Wing, jejíž první překlad do angličtiny byl tak příšerný, že se z něj na internetu stala legenda – akronym této věty nebo její části (AYBAB2U, AYBABTU či AYB) je v internetových diskusích občas používán místo fráze „prohrál jsi“. Správné znění původního textu v angličtině by totiž mělo být „we, CATS, have taken over all of your bases“, tedy volně přeloženo „my, CATS, jsme dobyli všechny vaše základny“. Chybná verze anglického překladu je často parafrázována – v tomto případě bylo anglické slovíčko „base“ zaměněno za „baseline“, tedy „účaří“. (Další informace viz například text All Your Base Are Belong To Us na stránkách BBC.)

Při tvorbě vertikálního rytmu s em (viz výše uvedený odkaz na Rutterův článek) vám může pomoci tento kalkulátor, který vypočítá některé prvky stránky podle zvolené velikosti písma. A hodit se může občas i další kalkulátor, který přepočítává pixely a em.

Zajímavý přístup k převodu pixelů na em je popsán v článku How to size text using ems – velikost fontu v body je zvolena tak, aby platilo, že 10 px = 1 em. Pak jsou přepočty snadné – pokud se nezamotáte do dědičnosti, samozřejmě.

V úvahu byste také měli vzít odlišnost mezi angličtinou a češtinou. Oba jazyky sice používají v písemném projevu latinku, čeština (a další jazyky) však používají latinku diakritickou. Zatímco pro adiakritickou latinku je doporučována základní výška znaku 12 pixelů, pro diakritické verze latinky se doporučuje přidat jeden pixel navíc, tedy 13 pixelů…

Z diskuse k článku

V komentářích si kdosi stěžoval, že Opera divně zaokrouhluje. Možná by – stejně jako pro řešení problémů IE s em – pomohla tato definice (více viz CSS techniques I use all the time):

html { font-size:100.01%; }

Velikost řádků v postranních sloupcích je podle některých komentátorů naopak lepší odlišit, pokud se nevztahují přímo k hlavnímu textu.

Další diskuse se vedla o používání px a em. Zhruba to končí tak, že ne každý web potřebuje mít tak přesné zarovnání na účaří, takže tam by měla být jednotka em norma, zatímco jsou i weby, kde použití em a následné výpočty by byly tak drahé, že je lepší zvolit px. Není to problém „lenosti“ designéra, je to business, a také záleží na cílové skupině webu.

Informace o překladu

Původní článek: Setting Type on the Web to a Baseline Grid (Wilson Miner, 9. 4. 2007)
Překlad: Sušňová, Eva
Odborná a jazyková spolupráce: Málek, Vilém
Přeloženo se svolením magazínu A List Apart (další překlady).

About translation

Original article: Setting Type on the Web to a Baseline Grid (Wilson Miner, 9. 4. 2007)
Translation: Sušňová, Eva
Language and expert collaboration: Málek, Vilém
Language of translation: Czech (for readers from Czech and Slovak republics)
Translated with the permission of A List Apart Magazine (other translations).