Održavajte vertikalni ritam s CSS-om i jQueryjem

Sadržaj

• Vrsta izlaganja
• Okomiti ritam
• Vođenje ritma
• Suočavanje sa slikama
• Poboljšanje jQueryja
• Zaključak

• Potrebno znanje: CSS, osnovni jQuery
• Zahtijeva: jQuery, CSS, HTML
• Vrijeme projekta: 30 minuta
• Preuzmite izvorne datoteke

Pod pretpostavkom da dizajnirate sadržaj, prva je odluka da učinite svoj dizajn ima biti srodan tipu. Čak i do ne odabirom slova učinili ste nešto što utječe na vašu web lokaciju. Tip je srž tiska i web dizajna i složen je; postoji puno nakupljenih pojmova, praksi, pravila i tehnika koje se dobro koriste. Ovaj se članak bavi jednom tehnikom upravljanja jednim aspektom tipa, onim koji je bilo teško izvoditi na mreži, ali je uobičajen u tisku: održavanje dosljednog vertikalnog ritma, što nam zauzvrat omogućuje postizanje profesionalnog izgleda.

Vrsta izlaganja

U tiskanom obliku, za bilo koju stavku s značajnom količinom teksta temelj dizajna vjerojatno će biti osnovna mreža. Koristi se za donošenje strukture na stranicu i vodi vertikalni protok sadržaja. Gotovo je sve postavljeno s obzirom na tu osnovnu mrežu. Ne brinite ako ne prepoznate pojmove, nitko nije upoznat s osnovnim linijama ili osnovnim mrežama; već znate za njih. Sjetite se škole, kad ste nesumnjivo pisali na obloženom papiru - dok ste pisali, dno svojih slova uredno ste postavili na svaki redak na papiru. Osnovna i osnovna mreža u akciji. Osnovna linija je zamišljena crta na koju se poravnava dno slova.Ako sada pogledate ovaj članak, vidjet ćete osnovnu liniju, iako linija zapravo ne postoji. Tvoj mozak stavlja jedan za vas, zato možete čitati rečenice. Redovi na obloženom papiru? Oni su osnovna mreža. Ravno, tako da su vaše rečenice ravne i postavljene u pravilnim intervalima, tako da vaš tekst ima redoviti vertikalni ritam.

Okomiti ritam

Okomiti ritam diktira gdje se na stranici nalazi tekst. To je jedna komponenta koja utječe na našu sposobnost skeniranja i čitanja blokova teksta i pomaže u informiranju naših emocionalnih odgovora. Kad tekst ima snažan vertikalni ritam i dobar razmak, osjećamo da je profesionalan, pažljiv, autoritativan i ugodan za čitanje. Kad tekst ima loš ritam i razmake, osjećamo da je manje promišljen, manje profesionalan i često ga je teže čitati. Okomiti ritam jednim je dijelom upotrebljivost, a jednim dijelom estetika.

Vođenje ritma

Nažalost, web je još uvijek loš rođak grafike u smislu njegove sposobnosti da usvoji neke temeljne prakse u vezi s tipom. Na webu ne možemo koristiti osnovnu mrežu na isti način na koji to čini dizajner ispisa (ili dijete u školi) - ne možemo poravnati osnovnu liniju teksta s matičnom mrežom dokumenta. CSS nema koncept osnovne mreže. Dakle, naš tekst neće točno stajati na crtama matične mreže. Umjesto toga, centrirat će se okomito u razmak između crta. To je najbolje što web može učiniti.

Idemo praktično s primjerom dokumenta. Prvo ćemo postaviti ritam tako što ćemo napraviti vidljivu osnovnu mrežu. Da bismo to učinili, upotrijebit ćemo ponavljajuću pozadinsku sliku za crtanje pravilnih vodoravnih crta od 22 piksela:

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

Ura, imamo naš obloženi papir!

Primijetit ćete da se ništa ne slaže. Da bi se sve poravnalo želimo da donji rub svih elemenata pogodi jednu od tih linija. Najlakši način da to napravite jest da svi elementi zauzmu vertikalnu visinu (uključujući margine) koja je višestruka od 22. Evo nekoliko CSS-a koji upravo to čine. Koristim REM jedinicu, ali dajem zamjensku EM vrijednost za preglednike koji ne razumiju REM. U komentare ubrajam i ekvivalent PX jedinice. Ako još uvijek ne razumijete REM / EM, umjesto toga možete upotrijebiti vrijednosti px - sve su jednake:

1. html {/ * veličina fonta: 16px, visina linije: 22px * /
2. font: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. pozadina: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top i bottom su po 22 piksela * /
6. / * em rezervni * / margina: 1.375em 0;
7. marža: 1.375rem 0; }
8. h1 {/ * veličina fonta je 32 piksela, visina crte je 44 piksela * /
9. / * em rezervni * / veličina slova: 2em;
10. veličina slova: 2rem; visina crte: 1.375; }
11. h2 {/ * veličina fonta je 26px, visina linije je 44px * /
12. / * em rezervni * / veličina slova: 1,75em;
13. veličina slova: 1,75rem; visina crte: 1,5714285714; }
14. h3, h4, h5, h6 {/ * veličina fonta je 22 piksela, visina crte je 22 piksela * /
15. / * em rezervni * / veličina slova: 1.375em;
16. veličina slova: 1.375rem; visina crte: 1; }
17. p, ul, blockquote {/ * donja margina je 22px, visina linije naslijeđena je iz html (22px) * /
18. / * em zamjenski * / margin-top: 0; margina-dno: 1.375em;
19. margin-top: 0; margin-bottom: 1.375rem; }

Pogledajmo što nam to daje. Primijetite kako se sav tekst lijepo poravnava? Ne sjedi na osnovnoj liniji, ali ima predvidljiv vertikalni ritam. Lijepo je i uredno.

Suočavanje sa slikama

Slike sve čine složenijim. Pogledajte što se događa s našim ritmom kad uključimo neke. Ometaju ga kao preskakanje zapisa - tempo je ispravan, ali vrijeme je isključeno. Poravnanje postaje pomaknuto. To je zato što je malo vjerojatno da će slike imati visinu koja je višekratnik osnovne linije, tako da se donji rub ne poravnava s našom mrežom osnovne linije.

Da bismo to popravili, sve što zapravo moramo učiniti je dodati marginu svakoj slici, čineći dno margine poravnanom s našom mrežom. Što je dovoljno jednostavno automatizirati s malo JavaScript-a. Evo našeg osnovnog plana:

1. Shvatite visinu svake slike.
2. Pogledajte koliko se puta osnovna vrijednost podijeli u vertikalni prostor koji slika trenutno zauzima i dobijte ostatak.
3. Oduzmite ostatak od osnovne linije kako biste dobili odmak koji moramo primijeniti na slici.
4. Primijenite pomak kao marginu na dno slike.

Dno okomitog prostora slike sada bi se ispravno poravnalo s mrežom osnovne linije. Evo osnovne funkcije u jQueryju koja to čini:

1. $ (window) .bind ('load', function () {
2. $ ("img"). svaka (funkcija () {
3. / * varijable * /
4. var this_img = $ (ovo);
5. var osnovica = 22;
6. var img_height = this_img.height ();
7. / * radi matematiku * /
8. var ostatak = parseFloat (img_height% osnovne linije);
9. / * koliko trebamo dodati? * /
10. var offset = parseFloat (osnovni-ostatak);
11. / * primijeni marginu na sliku * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Zašto prozor.vezati crta? Jer moramo pričekati dok se slike ne učitaju da bismo mogli pouzdano dobiti njihove veličine. Evo primjera pokretanja ovog osnovnog koda.

Poboljšanje jQueryja

Svijet je rijetko ravnopravan, a to se ovdje i pokazalo - moramo se pozabaviti s popriličnim detaljima implementacije. Što nije u redu s funkcijom koju imamo? Dosta:

• Daje gadne rezultate sa slikama koje su umetnute, a ne plutajuće ili blokirane.
• Čini se "buggy" na nekim slikama, posebno onima u spremnicima.
• Ne bavi se rasporedima tekućina.
• Nije baš za ponovnu upotrebu.

Ne želimo primijeniti ovo ponašanje na slike koje su u liniji, poput smajlića u primjeru. Umetnute slike poravnane su tako da donji rub sjedi na istoj osnovici kao i tekst (ne osnovna mreža). To znači da je slika pomaknuta okomito. Ni CSS ni JS ne daju nam način da saznamo gdje je osnovna crta za element teksta, tako da ne znamo odmak. Moramo zanemariti umetnute slike i primijeniti svoj popravak samo na slike koje su postavljene na prikaz: blok (srećom, bilo koja plutajuća slika automatski se postavlja na blok prikaza).

Ako se slika nalazi u spremniku, margina primijenjena na sliku može biti skrivena zbog postavki preljeva na spremniku. Također, možda ne želimo marginu na slici, već na elementu spremnika. U primjeru bismo radije imali margine na bijelom okviru nego na slici unutar okvira, tako da možemo izbjeći čudne praznine koje se pojavljuju u okviru.

Funkcija se izvodi samo jednom, ali na tekućem dizajnu slike mijenjaju visinu kad se preglednik preusmjeri (pokušajte promijeniti primjer na nešto prilično usko da biste to vidjeli). Promjena veličine ponovno ruši ritam. Funkcija nam je potrebna za pokretanje nakon promjene veličine preglednika, kao i nakon učitavanja stranice. Raspored tekućina donosi i druge probleme; slike mogu biti visoke razlomljene piksele, na primjer 132,34 px. To zauzvrat može dovesti do neočekivanih rezultata, čak i ako primijenimo razlomljenu marginu (ako ste zainteresirani, evo zašto: trac.webkit.org/wiki/LayoutUnit). Dakle, morat ćemo sliku umasirati u cijelu visinu piksela kako bismo izbjegli pogreške u rasporedu uzrokovane razlomljenim pikselima.

Na kraju, trebali bismo ovo pretvoriti u funkciju koja se može više koristiti. Zapravo, s obzirom na složenost koja je praktičnom rješenju potrebna u odnosu na teoretsko rješenje, trebali bismo napraviti dodatak koji se može ponovno koristiti u drugim projektima.

U posljednjem ćete primjeru pronaći kôd koji sve ovo postiže. Dodatak JavaScript je teško komentiran, tako da ga možete pratiti. Dodatak možete koristiti pozivom na sljedeći način:

1. $ (window) .bind ('load', function () {
2. $ ("img"). baselineAlign ();
3. });

Ili možete reći dodatku da primijeni marginu na imenovani spremnik, ako on postoji kao roditelj slike:

1. $ (window) .bind ('load', function () {
2. $ ("img"). baselineAlign ({spremnik: ’. popup’});
3. });

Zaključak

Održavanje dobrog vertikalnog ritma suptilna je, ali učinkovita dizajnerska praksa koja se redovito koristi u tisku. Sada znate osnovna načela, radno poznajete polazne crte i osnovnu mrežu i znate neka ograničenja rasporeda CSS teksta u odnosu na ispis. Također znate kako zaobići ta ograničenja, sastaviti dokumente u bilo kojem vertikalnom ritmu koji želite i imate alat koji vam pomaže u rješavanju ometajućeg sadržaja slike.

Kako CSS sazrijeva, i dalje dobivamo više značajki u skladu s našim rođacima, tako da će dobro razumijevanje vrste postati važnije za stvaranje kvalitetnih web stranica. Ako želite saznati više o tipu općenito, toplo preporučujem www.thinkingwithtype.com (i kupnju knjige da biste je priložili). Ako se bavite CSS člancima o liječenju tipova, postoje brojni članci ovdje i drugdje na webu. Također bih preporučio da stignete najnovije vijesti Marka Boultona i Elliota Jaya Stocksa, obojica često govore o tipu u vezi s web dizajnom.

Zabavi se!