Udržujte vertikálny rytmus pomocou CSS a jQuery

Obsah

• Typ rozloženia
• Vertikálny rytmus
• Vedenie rytmu
• Zaobchádzanie s obrázkami
• Vylepšenie jQuery
• Záver

• Potrebné vedomosti: CSS, basic jQuery
• Vyžaduje sa: jQuery, CSS, HTML
• Čas projektu: 30 minút
• Stiahnite si zdrojové súbory

Za predpokladu, že návrh navrhnete od obsahu, prvé rozhodnutie uskutočniť návrh má byť príbuzný typu. Aj tým nie výberom písma ste urobili niečo, čo ovplyvňuje váš web. Typ je základom pre tlač a webový dizajn a je zložitý; existuje veľa nahromadených výrazov, postupov, pravidiel a techník, ktoré sa dajú dobre využiť. Tento článok sa zaoberá jednou technikou riadenia jedného aspektu typu, ktorá sa ťažko robí online, ale je v tlači rutina: udržiavanie konzistentného vertikálneho rytmu, čo nám zase umožňuje dosiahnuť profesionálne usporiadanie.

Typ rozloženia

V tlači bude pravdepodobne pre každú položku so značným množstvom textu základom dizajnu základná mriežka. Používa sa na vloženie štruktúry stránky a na vedenie vertikálneho toku obsahu. Takmer všetko je umiestnené vo vzťahu k základnej čiare. Nerobte si starosti, ak tieto výrazy nerozpoznávate, nikto nepozná základné čiary alebo základné čiary; už o nich vieš. Spomeňte si na školu, keď ste nepochybne písali na linajkový papier - pri písaní ste úhľadne umiestnili spodok svojich písmen na každý z riadkov na papieri. Základná a základná mriežka v akcii. Základná čiara je imaginárna čiara, na ktorú sa zarovnáva spodná časť písmen.Ak sa teraz pozriete na tento článok, uvidíte „základnú čiaru“, aj keď v skutočnosti čiara neexistuje. Váš mozog vám ho dá, a preto môžete čítať vety. Čiary na linkovanom papieri? Sú základnou mriežkou. Rovné, aby boli vaše vety rovné, a ich nastavenie v pravidelných intervaloch, aby mal váš text pravidelný vertikálny rytmus.

Vertikálny rytmus

Vertikálny rytmus určuje, kde sa text na stránke nachádza. Je to jeden komponent, ktorý ovplyvňuje našu schopnosť skenovať a čítať bloky textu a pomáha informovať naše emočné reakcie. Ak má text silný vertikálny rytmus a dobré medzery, máme pocit, že je profesionálny, zvážený, smerodajný a pohodlné na čítanie. Ak má text zlý rytmus a medzery, máme pocit, že je menej uvážený, menej profesionálny a často ťažšie čitateľný. Vertikálny rytmus je jedna časť použiteľnosti a jedna časť estetická.

Vedenie rytmu

Web je bohužiaľ stále chudobným bratrancom tlače, pokiaľ ide o jeho schopnosť zaviesť niektoré základné postupy týkajúce sa typu. Na webe nemôžeme použiť mriežku základnej čiary rovnakým spôsobom, ako to robí návrhár tlače (alebo dieťa v škole) - nemôžeme zarovnať základnú čiaru textu k základnej mriežke dokumentu. CSS nemá koncept základnej mriežky. Náš text teda nebude sedieť presne na riadkoch základnej čiary. Namiesto toho bude vycentrovaný vertikálne v medzere medzi čiarami. Je to to najlepšie, čo web dokáže.

Poďme si to predstaviť na príklade dokumentu. Najskôr nastavíme rytmus vytvorením viditeľnej základnej čiary. Použijeme na to opakujúci sa obrázok na pozadí, pomocou ktorého nakreslíme pravidelné vodorovné čiary vzdialené 22 pixelov:

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

Hurá, máme náš linkovaný papier!

Všimnete si, že nič sa nezhoduje. Aby bolo všetko v jednej priamke, chceme, aby dolný okraj všetkých prvkov narazil na jednu z týchto čiar. Najjednoduchší spôsob, ako to urobiť, je zabezpečiť, aby všetky prvky zaberali vertikálnu výšku (vrátane okrajov), ktorá je násobkom 22. Tu je niekoľko CSS, ktoré to robia. Používam jednotku REM, ale poskytujem EM záložnú voľbu pre prehliadače, ktoré nerozumejú REM. Do komentárov uvádzam aj ekvivalent jednotky PX. Ak ešte nerozumiete REM / EM, môžete namiesto toho použiť hodnoty px - všetky sú ekvivalentné:

1. html {/ * veľkosť písma: 16px, výška riadku: 22px * /
2. písmo: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. pozadie: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * okraj a horný okraj sú oba 22px * /
6. / * em fallback * / margin: 1,375em 0;
7. marža: 1,375rem 0; }
8. h1 {/ * veľkosť písma je 32px, výška riadku je 44px * /
9. / * em fallback * / font-size: 2em;
10. veľkosť písma: 2rem; výška čiary: 1,375; }
11. h2 {/ * veľkosť písma je 26px, výška riadku je 44px * /
12. / * em fallback * / font-size: 1,75em;
13. veľkosť písma: 1,75rem; výška čiary: 1,5714285714; }
14. h3, h4, h5, h6 {/ * veľkosť písma je 22px, výška riadku je 22px * /
15. / * em fallback * / font-size: 1.375em;
16. veľkosť písma: 1,375rem; výška čiary: 1; }
17. p, ul, blockquote {/ * dolný okraj je 22px, výška riadku sa dedí z html (22px) * /
18. / * em fallback * / margin-top: 0; margin-bottom: 1,375em;
19. horný okraj: 0; spodný okraj: 1,375rem; }

Poďme sa pozrieť na to, čo nám dáva. Všimnite si, ako sa celý text pekne zarovnáva? Nesedí na základnej čiare, ale má predvídateľný vertikálny rytmus. Je to pekné a upratané.

Zaobchádzanie s obrázkami

Snímky veci komplikujú. Zoberte si, čo sa stane s našim rytmom, keď nejaké zahrnieme. Narušujú to ako preskočenie záznamu - tempo je správne, ale načasovanie je vypnuté. Zarovnanie sa posunie. Je to preto, že je nepravdepodobné, že by obrázky mali výšku, ktorá je násobkom základnej čiary, takže spodný okraj nie je v jednej línii s našou základnou mriežkou.

Aby sme to napravili, musíme skutočne do každého obrázka pridať okraj, čím sa spodná časť okraja vyrovná našej mriežke. Čo je dosť jednoduché na automatizáciu pomocou malého JavaScriptu. Tu je náš základný plán:

1. Zistite výšku každého obrázka.
2. Zistite, koľkokrát sa základná hodnota rozdelí na vertikálny priestor, ktorý obrázok momentálne zaberá, a získajte zvyšok.
3. Odpočítajte zvyšok od základnej čiary, aby ste dosiahli posun, ktorý musíme použiť na obrázok.
4. Použite odsadenie ako okraj v dolnej časti obrázka.

Spodok vertikálneho priestoru obrázka by sa teraz správne zarovnal so základnou mriežkou. Toto je základná funkcia v jQuery, ktorá to robí:

1. $ (okno) .bind ('načítať', funkcia () {
2. $ ("img"). each (function () {
3. / * premenné * /
4. var this_img = $ (this);
5. var základná hodnota = 22;
6. var img_height = this_img.height ();
7. / * urob matematiku * /
8. var remainder = parseFloat (img_height% základnej hodnoty);
9. / * koľko musíme pridať? * /
10. var offset = parseFloat (základná línia-zvyšok);
11. / * použiť okraj na obrázok * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Prečo okno.viazať linka? Pretože musíme spoľahlivo zistiť ich veľkosť, musíme počkať, kým sa obrázky nenačítajú. Tu je príklad so spusteným týmto základným kódom.

Vylepšenie jQuery

Svet je zriedka priamy, a tak sa to ukázalo tu - musíme sa vysporiadať s niekoľkými detailami implementácie. Čo je zlé na funkcii, ktorú máme? Veľa:

• Produkuje škaredé výsledky s obrázkami, ktoré sú skôr vložené, ako plávajúce alebo blokované.
• Na niektorých obrázkoch, najmä na obrázkoch v kontajneroch, sa zdá byť chybný.
• Nezaoberá sa tekutým rozložením.
• Nie je to príliš opakovane použiteľné.

Nechceme toto správanie použiť na obrázky, ktoré sú vložené, ako je napríklad smajlík v príklade. Vložené obrázky sú zarovnané tak, aby spodný okraj sedel na rovnakej základnej čiare ako text (nie základná mriežka). To znamená, že obraz je vertikálne posunutý. CSS ani JS nám nedávajú spôsob, ako zistiť, kde je základná čiara pre textový prvok, takže nepoznáme posun. Vložené obrázky musíme ignorovať a opravu urobíme iba v prípade obrázkov, ktoré sú nastavené na displej: blok (našťastie je každý pohyblivý obrázok automaticky nastavený tak, aby zobrazoval blok).

Ak je obrázok v kontajneri, okraj aplikovaný na obrázok môže byť skrytý z dôvodu nastavenia pretečenia v kontajneri. Možno tiež nebudeme chcieť okraj na obrázku, ale namiesto toho na prvku kontajnera. V tomto príklade by sme mali radšej okraje v bielom poli ako na obrázku vo vnútri poľa, aby sme sa vyhli vzniku zvláštnych medzier, ktoré sa v poli zobrazia.

Funkcia sa spustí iba raz, ale pri tekutom dizajne obrázky zmenia výšku, keď sa zmenší veľkosť prehliadača (skúste zmeniť veľkosť príkladu na niečo dosť úzke). Zmena veľkosti znova preruší rytmus. Potrebujeme, aby funkcia fungovala po zmene veľkosti prehliadača aj po načítaní stránky. Kvapalné usporiadania tiež spôsobujú ďalšie problémy; obrázky môžu mať výšku zlomkových pixelov, napríklad 132,34px. To zase môže spôsobiť neočakávané výsledky, aj keď použijeme zlomkovú maržu (ak máte záujem, tu je dôvod: trac.webkit.org/wiki/LayoutUnit). Budeme teda musieť obrázok vmasírovať do výšky celého pixelu, aby sme sa vyhli chybám v rozložení spôsobeným zlomkovými pixelmi.

Nakoniec by sme z toho mali urobiť znovu použiteľnú funkciu. V skutočnosti, vzhľadom na zložitosť, ktorú praktické riešenie vyžaduje oproti teoretickému riešeniu, by sme mali vytvoriť doplnok, ktorý je možné znova použiť v iných projektoch.

V poslednom príklade nájdete kód, ktorý toto všetko umožňuje. Doplnkový JavaScript je výrazne komentovaný, takže ho môžete sledovať. Doplnok môžete použiť zavolaním nasledujúcim spôsobom:

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

Alebo môžete modulu plug-in povedať, aby použil okraj na pomenovaný kontajner, ak existuje ako rodič obrázka:

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

Záver

Dodržiavanie dobrého vertikálneho rytmu je jemný, ale efektívny dizajnový postup, ktorý sa pravidelne používa v tlači. Teraz viete základné princípy, máte základné znalosti o základných líniách a základnej mriežke a viete niektoré obmedzenia textového rozloženia CSS oproti tlači. Tiež viete, ako tieto obmedzenia obísť, zostaviť dokumenty podľa ľubovoľného vertikálneho rytmu, ktorý sa vám páči, a máte nástroj, ktorý vám pomôže vyrovnať sa s rušivým obrazovým obsahom.

S vývojom CSS budeme naďalej dostávať ďalšie funkcie v súlade s našimi bratrancami z tlače, takže dobré porozumenie typu bude pre vytváranie kvalitných webových stránok čoraz dôležitejšie. Ak sa chcete dozvedieť viac informácií o type písma všeobecne, dôrazne odporúčam www.thinkingwithtype.com (a k tomu aj kúpu knihy). Ak ste po článkoch CSS o typovej liečbe, existuje veľa článkov tu aj inde na webe. Tiež by som odporučil dobehnúť to najnovšie od Marka Boultona a Elliota Jaya Stocksa, ktorí často hovoria konkrétne o type v súvislosti s webovým dizajnom.

Bavte sa!