Mențineți ritmul vertical cu CSS și jQuery

Conţinut

• Tipul de așezare
• Ritm vertical
• Conducerea ritmului
• Tratarea imaginilor
• Îmbunătățirea jQuery
• Concluzie

• Cunoștințe necesare: CSS, jQuery de bază
• Necesită: jQuery, CSS, HTML
• Timpul proiectului: 30 minute
• Descărcați fișiere sursă

Presupunând că proiectați din conținut, prima decizie de a vă efectua designul are a fi legat de tip. Chiar și prin nu alegând un tip de caractere, ați făcut ceva care vă afectează site-ul. Tipul este esențial pentru imprimare și design web și este complex; există o mulțime de termeni, practici, reguli și tehnici acumulate care intră în buna utilizare. Acest articol se referă la o tehnică de gestionare a unui aspect al tipului, una care a fost greu de realizat online, dar este tipărită de rutină: menținerea unui ritm vertical consistent, care la rândul nostru ne permite să obținem un aspect profesional.

Tipul de așezare

În tipar, pentru orice articol cu ​​o cantitate considerabilă de text, fundamentul proiectului este probabil o rețea de bază. Este folosit pentru a aduce structura pe pagină și ghidează fluxul vertical de conținut. Aproape totul este plasat în raport cu acea grilă de bază. Nu vă faceți griji dacă nu recunoașteți termenii, nimeni nu este familiarizat cu linii de bază sau grile de bază; știi deja despre ele. Gândiți-vă la școală, când ați scris, fără îndoială, pe hârtie căptușită - așa cum ați scris, ați așezat bine scrisorile pe fiecare dintre liniile de pe hârtie. Linia de bază și grila de bază în acțiune. Linia de bază este o linie imaginară pe care se aliniază fundul literelor.Dacă vă uitați la acest articol acum, veți „vedea” o linie de bază, chiar dacă nu există cu adevărat o linie. Creierul tău pune unul acolo pentru tine, de aceea poți citi propoziții. Liniile pe hârtie căptușită? Sunt o grilă de bază. Drept, astfel încât propozițiile dvs. să fie drepte și setate la intervale regulate, astfel încât textul dvs. să aibă un ritm vertical regulat.

Ritm vertical

Ritmul vertical dictează locul în care este localizat textul paginii. Este o componentă care ne afectează capacitatea de a scana și citi blocuri de text și ne ajută să ne informăm răspunsurile emoționale. Când textul are un ritm vertical puternic și o distanță bună, simțim că este profesionist, considerat, autoritar și confortabil de citit. Când textul are un ritm și o distanță reduse, simțim că este mai puțin considerat, mai puțin profesional și adesea mai greu de citit. Ritmul vertical este o parte utilizabilitate și o parte estetică.

Conducerea ritmului

Din păcate, internetul este încă vărul sărac de tipar în ceea ce privește capacitatea sa de a adopta unele practici fundamentale în ceea ce privește tipul. Pe web nu putem folosi o grilă de bază la fel ca un designer de tipărire (sau un copil la școală) - nu putem alinia linia de bază a textului la grila de bază a unui document. CSS nu are niciun concept de grilă de bază. Deci, textul nostru nu va sta exact pe liniile unei grile de bază. În schimb, va fi centrat vertical în decalajul dintre linii. Este cel mai bun lucru pe care îl poate face webul.

Să ne facem practice cu un exemplu de document. În primul rând, vom seta ritmul făcând o grilă de bază vizibilă. Pentru a face acest lucru, vom folosi o imagine de fundal repetată pentru a trasa linii orizontale obișnuite la distanță de 22 px:

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

Ura, avem hârtia noastră căptușită!

Veți observa că nimic nu se aliniază. Pentru ca totul să se alinieze, vrem ca marginea inferioară a tuturor elementelor să atingă una dintre aceste linii. Cel mai simplu mod de a face acest lucru este să vă asigurați că toate elementele ocupă o înălțime verticală (inclusiv marginile) care este multiplu de 22. Iată câteva CSS care fac exact asta. Folosesc unitatea REM, dar ofer o soluție EM pentru browserele care nu înțeleg REM. Includ, de asemenea, echivalentul unității PX în comentarii. Dacă nu înțelegeți încă REM / EM, puteți folosi valorile px - toate sunt echivalente:

1. html {/ * dimensiunea fontului: 16 px, înălțimea liniei: 22 px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. fundal: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * marginea de sus și de jos sunt ambele 22px * /
6. / * em rezervă * / margin: 1.375em 0;
7. marja: 1.375rem 0; }
8. h1 {/ * dimensiunea fontului este de 32 px, înălțimea liniei este de 44 px * /
9. / * em backback * / font-size: 2em;
10. dimensiunea fontului: 2rem; înălțimea liniei: 1,375; }
11. h2 {/ * dimensiunea fontului este de 26 px, înălțimea liniei este de 44 px * /
12. / * em fallback * / font-size: 1.75em;
13. dimensiunea fontului: 1,75rem; înălțimea liniei: 1,5714285714; }
14. h3, h4, h5, h6 {/ * dimensiunea fontului este de 22 px, înălțimea liniei este de 22 px * /
15. / * em rezervă * / font-size: 1.375em;
16. dimensiunea fontului: 1.375rem; înălțimea liniei: 1; }
17. p, ul, blockquote {/ * marja de jos este de 22 px, înălțimea liniei este moștenită de la html (22 px) * /
18. / * em fallback * / margin-top: 0; marginea de jos: 1.375em;
19. marginea-sus: 0; marginea-fund: 1.375rem; }

Să aruncăm o privire la ceea ce ne oferă asta. Observați cum întregul text se aliniază frumos? Nu stă pe linia de bază, dar are un ritm vertical previzibil. Este frumos și ordonat.

Tratarea imaginilor

Imaginile fac lucrurile mai complicate. Uită-te la ce se întâmplă cu ritmul nostru atunci când includem unele. Îl întrerup ca un salt într-o înregistrare - tempo-ul este corect, dar timpul este oprit. Alinierea devine deplasată. Acest lucru se datorează faptului că este puțin probabil ca imaginile să aibă o înălțime care este un multiplu al liniei de bază, astfel încât marginea de jos nu se aliniază cu grila noastră de bază.

Pentru a rezolva tot ce trebuie să facem este să adăugăm o marjă la fiecare imagine, făcând partea de jos a marginii aliniată cu grila noastră. Ceea ce este suficient de simplu pentru a automatiza cu puțin JavaScript. Iată planul nostru de bază:

1. Aflați înălțimea fiecărei imagini.
2. Vedeți de câte ori valoarea de bază se împarte în spațiul vertical pe care îl ocupă în prezent imaginea și obțineți restul.
3. Scădeți restul de la linia de bază pentru a oferi offsetul pe care trebuie să îl aplicăm pe imagine.
4. Aplicați offsetul ca marjă în partea de jos a imaginii.

Partea inferioară a spațiului vertical al imaginii s-ar alinia acum corect la grila de bază. Iată o funcție de bază în jQuery care face acest lucru:

1. $ (fereastră) .bind ('încărcare', funcție () {
2. $ ("img"). fiecare (funcție () {
3. / * variabile * /
4. var this_img = $ (this);
5. var linie de bază = 22;
6. var img_height = this_img.height ();
7. / * face matematica * /
8. var restul = parseFloat (img_height% linia de bază);
9. / * cât trebuie să adăugăm? * /
10. var offset = parseFloat (linia de bază-rest);
11. / * aplicați marginea imaginii * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

De ce fereastră.bind linia? Deoarece trebuie să așteptăm până când imaginile sunt încărcate înainte să putem obține în mod fiabil dimensiunile lor. Iată un exemplu cu acest cod de bază care rulează.

Îmbunătățirea jQuery

Lumea este rareori simplă și așa se dovedește aici - trebuie să ne ocupăm de câteva detalii de implementare. Ce este în neregulă cu funcția pe care o avem? O mulțime:

• Produce rezultate urâte cu imagini care sunt mai degrabă în linie decât plutitoare sau blocate.
• Pare buggy pe unele imagini, în special pe cele din containere.
• Nu se ocupă de aspectele lichide.
• Nu este foarte reutilizabil.

Nu vrem să aplicăm acest comportament imaginilor care sunt în linie, precum fața zâmbitoare din exemplu. Imaginile în linie sunt aliniate astfel încât marginea de jos să stea pe aceeași linie de bază ca textul (nu grila de bază). Asta înseamnă că imaginea este decalată vertical. Nici CSS, nici JS nu ne oferă o modalitate de a afla unde este linia de bază pentru un element text, deci nu cunoaștem compensarea. Trebuie să ignorăm imaginile în linie și să aplicăm soluția noastră numai la imaginile setate la afișaj: bloc (din fericire, orice imagine plutitoare este setată automat pentru a afișa blocul).

Dacă o imagine se află într-un container, marja aplicată imaginii poate fi ascunsă din cauza setărilor de revărsare pe container. De asemenea, este posibil să nu dorim marja pe imagine, ci pe elementul container. În exemplu, preferăm să avem margini pe caseta albă decât pe imaginea din interiorul casetei, astfel încât să putem evita obținerea unor goluri ciudate care apar în casetă.

Funcția rulează o singură dată, dar pe un design lichid imaginile își schimbă înălțimea atunci când browserul este redimensionat (încercați să redimensionați exemplul la ceva destul de îngust pentru a vedea acest lucru). Redimensionarea rupe din nou ritmul. Avem nevoie ca funcția să ruleze după redimensionarea browserului, precum și după încărcarea paginii. Aspectele lichide introduc și alte probleme; imaginile pot avea pixeli fracționați înălțime, de exemplu 132,34px. Acest lucru, la rândul său, poate provoca rezultate neașteptate, chiar dacă aplicăm o marjă fracționată (dacă sunteți interesat, iată de ce: trac.webkit.org/wiki/LayoutUnit). Deci, va trebui să masăm imaginea la o înălțime totală de pixeli pentru a evita erorile de aspect cauzate de pixeli fracționați.

În sfârșit, ar trebui să transformăm acest lucru într-o funcție mai reutilizabilă. De fapt, având în vedere complexitatea de care are nevoie o soluție practică față de soluția teoretică, ar trebui să realizăm un plug-in care poate fi refolosit în alte proiecte.

În ultimul exemplu veți găsi codul care realizează toate acestea. Plugin-ul JavaScript este foarte comentat, astfel încât să puteți urmări. Puteți utiliza pluginul apelându-l după cum urmează:

1. $ (fereastră) .bind ('încărcare', funcție () {
2. $ ("img"). baselineAlign ();
3. });

Sau, puteți spune pluginului să aplice marja unui container numit, dacă există unul ca părinte al imaginii:

1. $ (fereastră) .bind ('încărcare', funcție () {
2. $ ("img"). baselineAlign ({container: ’. popup’});
3. });

Concluzie

Păstrarea unui ritm vertical bun este o practică de proiectare subtilă, dar eficientă, utilizată în mod regulat în imprimare. Acum cunoașteți principiile de bază, aveți cunoștințe practice despre linii de bază și grila de bază și cunoașteți câteva dintre limitările aspectului text CSS față de tipărire. De asemenea, știți cum să rezolvați aceste limitări, să vă compuneți documentele după orice ritm vertical doriți și aveți un instrument care vă ajută să faceți față conținutului imaginii perturbatoare.

Pe măsură ce CSS se maturizează, continuăm să obținem mai multe funcții în linie cu verii noștri tipăriți, astfel încât o bună înțelegere a tipului va deveni mai importantă pentru crearea de site-uri web de calitate. Dacă doriți să aflați mai multe despre tip, în general, vă recomand cu mare drag www.thinkingwithtype.com (și să cumpărați cartea pentru a merge cu ea). Dacă căutați articole CSS despre tratamentul de tip, există numeroase articole atât aici, cât și în altă parte pe web. Aș recomanda, de asemenea, să ajung la curent cu ultimele noutăți de la Mark Boulton și Elliot Jay Stocks, ambii vorbind adesea despre tip în legătură cu designul web în mod specific.

A se distra!