Udržujte vertikální rytmus pomocí CSS a jQuery

Obsah

• Rozložení typu
• Vertikální rytmus
• Vedení rytmu
• Nakládání s obrázky
• Vylepšení jQuery
• Závěr

• Potřebné znalosti: CSS, základní jQuery
• Vyžaduje: jQuery, CSS, HTML
• Čas projektu: 30 minut
• Stáhněte si zdrojové soubory

Za předpokladu, že navrhujete od obsahu, první rozhodnutí provést váš návrh má být příbuzný typu. Dokonce i ne výběrem písma jste udělali něco, co ovlivní váš web. Typ je jádrem tisku a webového designu a je složitý; existuje spousta nashromážděných termínů, postupů, pravidel a technik, které se dobře využívají. Tento článek se zabývá jednou technikou pro správu jednoho aspektu typu, který je obtížné provést online, ale je běžný v tisku: udržování konzistentního vertikálního rytmu, což nám zase umožňuje dosáhnout profesionálního rozvržení.

Rozložení typu

V tisku bude u jakékoli položky se značným množstvím textu pravděpodobně základem designu základní mřížka. Používá se k přenesení struktury na stránku a vedení vertikálního toku obsahu. Téměř vše je umístěno s ohledem na tuto základní mřížku. Nedělejte si starosti, pokud podmínky neznáte, nikdo nezná základní linie nebo základní mřížky; už o nich víš. Vzpomeňte si na školu, když jste nepochybně psali na podšitý papír - jak jste psali, úhledně jste položili spodní část písmen na každý z řádků na papíře. Základní a základní mřížka v akci. Základní čára je imaginární čára, na kterou se zarovnává spodní část písmen.Pokud se nyní podíváte na tento článek, uvidíte „základnu“, i když ve skutečnosti čára není. Váš mozek vám tam dá jednu, proto můžete číst věty. Čáry na linkovaném papíru? Jsou základní mřížkou. Rovně, aby byly vaše věty rovné, a nastavte je v pravidelných intervalech, aby měl váš text pravidelný vertikální rytmus.

Vertikální rytmus

Vertikální rytmus určuje, kde je text na stránce umístěn. Jedná se o jednu složku, která ovlivňuje naši schopnost skenovat a číst bloky textu a pomáhá informovat naše emocionální reakce. Pokud má text silný vertikální rytmus a dobré mezery, máme pocit, že je profesionální, považován za autoritativní a pohodlně čitelný. Pokud má text špatný rytmus a mezery, máme pocit, že je méně zvažovaný, méně profesionální a často těžší číst. Vertikální rytmus je jedna část použitelnosti a jedna část estetiky.

Vedení rytmu

Bohužel web je stále chudým bratrancem tisku, pokud jde o jeho schopnost uzákonit některé základní postupy týkající se typu. Na webu nemůžeme použít mřížku účaří stejným způsobem, jakým to dělá designér tisku (nebo dítě ve škole) - nemůžeme zarovnat účaří textu k mřížce účaří dokumentu. CSS nemá koncept základní mřížky. Náš text tedy nebude sedět přesně na řádcích základní mřížky. Místo toho bude vycentrován svisle v mezeře mezi řádky. Je to to nejlepší, co web dokáže.

Pojďme si procvičit ukázkový dokument. Nejprve nastavíme rytmus vytvořením viditelné základní mřížky. K tomu použijeme opakující se obrázek na pozadí k nakreslení pravidelných vodorovných čar 22px od sebe:

1. html {pozadí: #fff url (baseline_22.png); }

Hurá, máme náš linkovaný papír!

Všimnete si, že se nic neshoduje. Aby se vše vyrovnalo, chceme, aby spodní okraj všech prvků narazil na jednu z těchto čar. Nejjednodušší způsob, jak to udělat, je zajistit, aby všechny prvky zabíraly svislou výšku (včetně okrajů), která je násobkem 22. Zde je několik CSS, které to dělají. Používám jednotku REM, ale poskytuji záložní EM pro prohlížeče, které nerozumí REM. Rovněž v komentářích uvádím ekvivalent jednotky PX. Pokud ještě nerozumíte REM / EM, můžete místo toho použít pouze hodnoty px - všechny jsou ekvivalentní:

1. html {/ * velikost písma: 16px, výška řádku: 22px * /
2. písmo: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. pozadí: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * horní a dolní okraj jsou oba 22px * /
6. / * em záložní * / margin: 1,375em 0;
7. marže: 1,375rem 0; }
8. h1 {/ * velikost písma je 32px, výška řádku je 44px * /
9. / * em záložní * / font-size: 2em;
10. velikost písma: 2rem; výška čáry: 1,375; }
11. h2 {/ * velikost písma je 26px, výška řádku je 44px * /
12. / * em záložní * / font-size: 1,75em;
13. velikost písma: 1,75rem; výška řádku: 1,5714285714; }
14. h3, h4, h5, h6 {/ * velikost písma je 22px, výška řádku je 22px * /
15. / * em fallback * / font-size: 1.375em;
16. velikost písma: 1,375rem; výška čáry: 1; }
17. p, ul, blockquote {/ * dolní okraj je 22px, výška řádku se dědí z html (22px) * /
18. / * em záložní * / margin-top: 0; spodní okraj: 1,375em;
19. horní okraj: 0; spodní okraj: 1,375rem; }

Pojďme se podívat na to, co nám to dává. Všimněte si, jak se celý text pěkně zarovná? Nesedí na základní linii, ale má předvídatelný vertikální rytmus. Je to pěkné a uklizené.

Nakládání s obrázky

Obrázky věci komplikují. Podívejme se, co se stane s naším rytmem, když nějaké začleníme. Narušují to jako skok v záznamu - tempo je správné, ale načasování je vypnuté. Zarovnání se posune. Je to proto, že je nepravděpodobné, že by obrázky měly výšku, která je násobkem základní linie, takže spodní okraj není v souladu s naší základní čarou.

Abychom to napravili, musíme opravdu přidat okraj ke každému obrázku, čímž se spodní část okraje vyrovná naší mřížce. Což je dost jednoduché na automatizaci pomocí malého JavaScriptu. Tady je náš základní plán:

1. Zjistěte výšku každého obrázku.
2. Podívejte se, kolikrát se hodnota účaří dělí na svislý prostor, který obrázek aktuálně zabírá, a získejte zbytek.
3. Odečtěte zbytek od základní linie, abyste získali posun, který musíme použít na obrázek.
4. V dolní části obrázku použijte odsazení jako okraj.

Dolní část svislého prostoru obrázku by se nyní správně zarovnala s mřížkou účaří. Tady je základní funkce v jQuery, která to dělá:

1. $ (okno) .bind ('načíst', funkce () {
2. $ ("img"). each (function () {
3. / * proměnné * /
4. var this_img = $ (this);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * do matematiky * /
8. var remainder = parseFloat (img_height% baseline);
9. / * kolik musíme přidat? * /
10. var offset = parseFloat (baseline-zbytek);
11. / * použít okraj na obrázek * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Proč okno. vazba čára? Protože musíme počkat, až se obrázky načtou, než můžeme spolehlivě zjistit jejich velikost. Zde je příklad spuštěného tohoto základního kódu.

Vylepšení jQuery

Svět je zřídka přímočarý, a tak se to ukázalo i tady - musíme se vypořádat s několika detaily implementace. Co se děje s funkcí, kterou máme? Spousta:

• Produkuje ošklivé výsledky u obrázků, které jsou vložené, nikoli plovoucí nebo blokované.
• Na některých obrázcích, konkrétně na obrázcích v kontejnerech, se zdá být chybný.
• Nezabývá se tekutým rozvržením.
• Není příliš použitelný.

Nechceme toto chování použít na obrázky, které jsou vložené, jako je například smajlík v příkladu. Vložené obrázky jsou zarovnány tak, aby spodní okraj seděl na stejné účaří jako text (ne základní mřížka). To znamená, že obraz je posunut svisle. Ani CSS, ani JS nám nedávají způsob, jak zjistit, kde je základní linie pro textový prvek, takže neznáme offset. Vložené obrázky musíme ignorovat a opravu provedeme pouze u obrázků, které jsou nastaveny na displej: blok (naštěstí je jakýkoli plovoucí obrázek automaticky nastaven tak, aby zobrazoval blok).

Pokud je obrázek v kontejneru, může být okraj aplikovaný na obrázek skryt kvůli nastavení přetečení v kontejneru. Také možná nebudeme chtít okraj na obrázku, ale místo toho na prvku kontejneru. V tomto příkladu bychom raději měli okraje na bílém rámečku než na obrázku uvnitř rámečku, abychom se vyhnuli vzniku zvláštních mezer, které se v rámečku objeví.

Funkce se spouští pouze jednou, ale u tekutého designu změní obrázky velikost při změně velikosti prohlížeče (zkuste změnit velikost příkladu na něco docela úzkého, abyste to viděli). Změna velikosti znovu rozbije rytmus. Funkci potřebujeme, aby se spouštěla ​​po změně velikosti prohlížeče i po načtení stránky. Rozložení kapalin také přináší další problémy; obrázky mohou být vysoké zlomkové pixely, například 132,34px. To zase může způsobit neočekávané výsledky, i když použijeme zlomkovou marži (pokud vás zajímá, proč: trac.webkit.org/wiki/LayoutUnit). Budeme tedy muset obrázek vmasírovat do výšky celého pixelu, abychom se vyhnuli chybám v rozložení způsobeným zlomkovými pixely.

Nakonec bychom z toho měli udělat opětovně použitelnou funkci. Ve skutečnosti, vzhledem ke složitosti, kterou praktické řešení vyžaduje oproti teoretickému řešení, bychom měli vytvořit modul plug-in, který lze znovu použít v jiných projektech.

V posledním příkladu najdete kód, který toho všeho dosahuje. Modul plug-in JavaScript je silně komentován, takže jej můžete sledovat. Plug-in můžete použít následovně:

1. $ (okno) .bind ('načíst', funkce () {
2. $ ("img"). baselineAlign ();
3. });

Nebo můžete modulu plug-in říct, aby aplikoval okraj na pojmenovaný kontejner, pokud existuje jako rodič obrázku:

1. $ (okno) .bind ('načíst', funkce () {
2. $ ("img"). baselineAlign ({container: '. popup'});
3. });

Závěr

Udržování dobrého vertikálního rytmu je jemná, ale efektivní designová praxe, která se pravidelně používá v tisku. Nyní znáte základní principy, máte pracovní znalosti základních linií a základní mřížky a znáte některá omezení rozvržení textu CSS oproti tisku. Také víte, jak tato omezení obejít, komponovat dokumenty do jakéhokoli vertikálního rytmu, který se vám líbí, a máte nástroj, který vám pomůže vypořádat se s rušivým obsahem obrazu.

Jak CSS dospívá, získáváme další funkce v souladu s našimi bratranci z tisku, takže dobré porozumění typu bude pro vytváření kvalitních webových stránek důležitější. Pokud byste se chtěli dozvědět více o typu obecně, velmi doporučuji www.thinkingwithtype.com (a k tomu si koupit knihu). Pokud jste po článcích CSS o léčbě typů, existuje mnoho článků zde i jinde na webu. Doporučil bych také dohnat nejnovější informace od Marka Boultona a Elliota Jaye Stockse, kteří často mluví konkrétně o typu v souvislosti s webovým designem.

Bavte se!