Uzturiet vertikālo ritmu ar CSS un jQuery

Saturs

• Izkārtojuma veids
• Vertikālais ritms
• Ritma vadīšana
• Darbs ar attēliem
• JQuery uzlabošana
• Secinājums

• Nepieciešamas zināšanas: CSS, pamata jQuery
• Nepieciešams: jQuery, CSS, HTML
• Projekta laiks: 30 minūtes
• Lejupielādējiet avota failus

Pieņemot, ka jūs veidojat dizainu no satura, pirmais lēmums ietekmēt jūsu dizainu ir lai tas būtu saistīts ar tipu. Pat pēc nē izvēloties burtveidolu, esat izdarījis kaut ko tādu, kas ietekmē jūsu vietni. Tips ir drukas un tīmekļa dizaina pamatelements, un tas ir sarežģīts; ir daudz uzkrātu terminu, prakses, noteikumu un paņēmienu, kas tiek izmantoti tā labā izmantošanā. Šis raksts attiecas uz vienu paņēmienu viena tipa aspekta pārvaldīšanai, tādu, kuru tiešsaistē ir grūti izdarīt, bet drukāšana ir ikdiena: konsekventa vertikāla ritma uzturēšana, kas savukārt ļauj mums sasniegt profesionālu izkārtojumu.

Izkārtojuma veids

Drukātā veidā jebkuram priekšmetam ar ievērojamu teksta daudzumu dizaina pamats, visticamāk, būs bāzes režģis. To izmanto, lai lapā iegūtu struktūru un virzītu satura vertikālo plūsmu. Gandrīz viss ir novietots attiecībā pret šo bāzes līniju. Neuztraucieties, ja neatpazīstat terminus, nevienam nav sveši bāzes līnijas vai bāzes režģi; jūs jau zināt par viņiem. Padomājiet par skolu, kad jūs, bez šaubām, rakstījāt uz ieklāta papīra - rakstot, jūs kārtīgi uzlikāt savu burtu apakšdaļu uz katras papīra rindas. Bāzes līnija un bāzes režģis darbībā. Bāzes līnija ir iedomāta līnija, uz kuras izlīdzinās burtu apakšdaļa.Ja tagad aplūkosit šo rakstu, jūs "redzēsiet" bāzes līniju, kaut arī patiesībā līnijas nav. Jūsu smadzenes jums to ievieto, tāpēc jūs varat lasīt teikumus. Līnijas uz izklāta papīra? Tie ir bāzes režģis. Taisni, lai jūsu teikumi būtu taisni, un iestatiet tos regulāri, lai jūsu tekstam būtu regulārs vertikāls ritms.

Vertikālais ritms

Vertikālais ritms nosaka, kur lapā atrodas teksts. Tas ir viens komponents, kas ietekmē mūsu spēju skenēt un lasīt teksta blokus, un tas palīdz informēt mūsu emocionālās atbildes. Ja tekstam ir spēcīgs vertikāls ritms un laba atstarpe, mēs uzskatām, ka tas ir profesionāls, apsvērts, autoritatīvs un ērti lasāms. Ja tekstam ir slikts ritms un atstarpes, mēs uzskatām, ka tas ir mazāk apsvērts, mazāk profesionāls un bieži vien grūtāk lasāms. Vertikālais ritms ir viena daļa lietojamības un viena daļa estētika.

Ritma vadīšana

Diemžēl tīmeklis joprojām ir nabadzīgais drukas brālēns, ņemot vērā tā spēju ieviest dažas pamatprakses attiecībā uz veidu. Tīmeklī mēs nevaram izmantot bāzes režģi tāpat kā drukas dizainers (vai bērns skolā) - mēs nevaram saskaņot teksta bāzes līniju ar dokumenta bāzes līniju. CSS nav pamata tīkla režīma koncepcijas. Tātad mūsu teksts neatradīsies tieši uz bāzes līnijas līnijām. Tā vietā tas tiks centrēts vertikāli spraugā starp līnijām. Tas ir labākais, ko tīmeklis var paveikt.

Iepazīsimies ar dokumenta piemēru. Pirmkārt, mēs iestatīsim ritmu, izveidojot redzamu bāzes līniju. Lai to izdarītu, mēs izmantosim atkārtotu fona attēlu, lai uzzīmētu regulāras horizontālas līnijas 22 pikseļu atstatumā:

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

Urrā, mums ir savs izklātais papīrs!

Jūs atzīmēsiet, ka nekas nav ierindots. Lai viss būtu vienā līnijā, mēs vēlamies, lai visu elementu apakšējā mala trāpītu vienā no šīm līnijām. Vieglākais veids, kā to izdarīt, ir pārliecināties, ka visi elementi aizņem vertikālu augstumu (ieskaitot piemales), kas ir 22. reizinājums. Šeit ir daži CSS, kas to dara. Es izmantoju REM vienību, bet dodu EM rezerves pārlūkiem, kuri nesaprot REM. Komentāros esmu iekļāvis arī PX vienības ekvivalentu. Ja jūs vēl nesaprotat REM / EM, tā vietā varat izmantot tikai px vērtības - tās visas ir līdzvērtīgas:

1. html {/ * font-size: 16px, line-height: 22px * /
2. fonts: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. fons: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * augšējā un apakšējā mala ir 22 pikseļi * /
6. / * em atkāpšanās * / starpība: 1.375em 0;
7. starpība: 1,375rem 0; }
8. h1 {/ * fonta lielums ir 32 pikseļi, līnijas augstums ir 44 pikseļi * /
9. / * em atkāpšanās * / font-size: 2em;
10. fonta lielums: 2rem; līnijas augstums: 1,375; }
11. h2 {/ * fonta lielums ir 26 pikseļi, līnijas augstums ir 44 pikseļi * /
12. / * em atkāpšanās * / font-size: 1,75em;
13. fonta lielums: 1,75rem; līnijas augstums: 1,5714285714; }
14. h3, h4, h5, h6 {/ * fonta lielums ir 22 pikseļi, līnijas augstums ir 22 pikseļi * /
15. / * em atkāpšanās * / font-size: 1.375em;
16. fonta lielums: 1,375rem; līnijas augstums: 1; }
17. p, ul, blockquote {/ * apakšējā mala ir 22 pikseļi, līnijas augstums tiek mantots no html (22 pikseļi) * /
18. / * em atkāpšanās * / margin-top: 0; margin-bottom: 1,375em;
19. margin-top: 0; margin-bottom: 1,375rem; }

Apskatīsim, ko tas mums dod. Ievērojiet, kā viss teksts ir labi izlīdzināts? Tas nesēž uz bāzes līnijas, bet tam ir paredzams vertikāls ritms. Tas ir jauki un kārtīgi.

Darbs ar attēliem

Attēli padara lietas sarežģītākas. Apskatiet, kas notiek ar mūsu ritmu, kad mēs tos iekļaujam. Viņi to izjauc kā izlaišanu ierakstā - temps ir pareizs, bet laiks ir izslēgts. Izlīdzināšana kļūst nobīdīta. Tas ir tāpēc, ka maz ticams, ka attēlu augstums ir pamatlīnijas reizinājums, tāpēc apakšējā mala nesakrīt ar mūsu bāzes līniju.

Lai to visu labotu, kas mums patiešām ir jādara, ir jāpievieno katram attēlam piemale, padarot piemales apakšdaļu vienā līnijā ar mūsu režģi. Kas ir pietiekami vienkārši, lai automatizētu ar nelielu JavaScript. Šis ir mūsu pamata plāns:

1. Noskaidrojiet katra attēla augstumu.
2. Skatiet, cik reizes bāzes vērtība dalās vertikālajā telpā, kuru attēls pašlaik aizņem, un iegūstiet atlikušo daļu.
3. Atņemiet atlikumu no bāzes līnijas, lai iegūtu nobīdi, kas mums jāpielieto attēlā.
4. Pielietojiet nobīdi kā piemali attēla apakšdaļā.

Attēla vertikālās atstarpes apakšdaļa tagad pareizi izlīdzināsies ar bāzes režģi. Šeit ir jQuery pamatfunkcija, kas to dara:

1. $ (logs) .bind (’ielādēt’, funkcija () {
2. $ ("img"). katrs (funkcija () {
3. / * mainīgie * /
4. var this_img = $ (šis);
5. var bāzes līnija = 22;
6. var img_height = this_img.height ();
7. / * veic matemātiku * /
8. var atlikums = parseFloat (img_height% baseline);
9. / * cik mums jāpievieno? * /
10. var offset = parseFloat (bāzes līnija-atlikums);
11. / * pieliek attēla piemali * /
12. this_img.css ("margin-bottom", nobīde + "px");
13. });
14. });

Kāpēc logs.saista līnija? Tā kā mums jāgaida, līdz attēli tiek ielādēti, pirms mēs varam droši iegūt to izmērus. Lūk, piemērs ar šī pamata koda darbību.

JQuery uzlabošana

Pasaule reti ir tieša, un tāpēc šeit izrādās - mums jātiek galā ar diezgan daudzām ieviešanas detaļām. Kas ir nepareizi ar mūsu funkciju? Daudz:

• Tas rada nepatīkamus rezultātus ar attēliem, kas ir ievietoti, nevis peldoši vai bloķēti.
• Dažiem attēliem, it īpaši konteineros, tas šķiet kļūdains.
• Tas nenodarbojas ar šķidriem izkārtojumiem.
• Tas nav ļoti atkārtoti lietojams.

Mēs nevēlamies šo rīcību piemērot attēliem, kas ir iekļauti vienā līnijā, piemēram, pieminekļa smaidīgajai sejai. Iekļautie attēli ir izlīdzināti, tāpēc apakšējā mala atrodas tajā pašā bāzes līnijā, kur teksts (nē bāzes režģis). Tas nozīmē, ka attēls ir nobīdīts vertikāli. Ne CSS, ne JS nedod mums iespēju uzzināt, kur atrodas teksta elementa pamatlīnija, tāpēc mēs nezinām nobīdi. Mums ir jāignorē iekļautie attēli un jāpielieto mūsu labojums tikai tiem attēliem, kuriem ir iestatīta vērtība displejs: bloķēt (par laimi, jebkurš peldošais attēls tiek automātiski iestatīts uz displeja bloku).

Ja attēls atrodas konteinerā, attēlam piemērotā piemale var būt paslēpta konteinera pārpildes iestatījumu dēļ. Tāpat mēs, iespējams, nevēlamies attēla, bet tā vietā konteinera elementa piemali. Šajā piemērā mēs drīzāk vēlētos, lai uz baltā lodziņa būtu piemales, nevis uz attēla kastes iekšpusē, lai mēs varētu izvairīties no dīvainu atstarpju parādīšanās lodziņā.

Funkcija darbojas tikai vienu reizi, bet šķidrā dizainā attēli mainās pēc augstuma, kad pārlūkprogramma tiek mainīta (mēģiniet mainīt piemēru uz kaut ko diezgan šauru, lai to redzētu). Lieluma maiņa atkal pārtrauc ritmu. Mums ir nepieciešama funkcija, lai tā darbotos pēc pārlūkprogrammas lieluma maiņas, kā arī pēc lapas ielādes. Šķidrie izkārtojumi rada arī citas problēmas; attēli var būt daļēji pikseļi, piemēram, 132,34 pikseļi. Tas savukārt var izraisīt negaidītus rezultātus, pat ja mēs izmantojam daļēju rezervi (ja jūs interesē, šeit ir iemesls: trac.webkit.org/wiki/LayoutUnit). Tāpēc mums būs nepieciešams masēt attēlu visā pikseļu augstumā, lai izvairītos no izkārtojuma kļūdām, ko izraisa daļēji pikseļi.

Visbeidzot, mums tas jāpadara par vairāk izmantojamu funkciju. Faktiski, ņemot vērā teorētiskā risinājuma sarežģītību, mums ir jāizveido spraudnis, kuru var atkārtoti izmantot citos projektos.

Pēdējā piemērā atradīsit kodu, ar kuru tas viss tiek sasniegts. Spraudnis JavaScript ir ļoti komentēts, lai jūs varētu sekot līdzi. Spraudni var izmantot, izsaucot to šādi:

1. $ (logs) .bind (’ielādēt’, funkcija () {
2. $ ("img"). baselineAlign ();
3. });

Vai arī varat spraudnim pateikt, lai marķieris tiktu lietots nosauktajam konteineram, ja tāds pastāv kā attēla vecāks:

1. $ (logs) .bind (’ielādēt’, funkcija () {
2. $ ("img"). baselineAlign ({konteiners: ’. uznirstošais’});
3. });

Secinājums

Laba vertikāla ritma ievērošana ir smalka, bet efektīva dizaina prakse, ko regulāri lieto drukā. Tagad jūs zināt pamatprincipus, jums ir pamatzināšanas par bāzes līnijām un bāzes līniju un zināmi daži CSS teksta izkārtojuma un drukas ierobežojumi. Jūs arī zināt, kā apiet šos ierobežojumus, sastādīt dokumentus pēc jebkura vertikāla ritma, kas jums patīk, un jums ir rīks, kas palīdz tikt galā ar traucējošu attēlu saturu.

Kamēr CSS nobriest, mēs turpinām iegūt vairāk funkciju atbilstoši mūsu drukātajiem brālēniem, tāpēc laba veida izpratne kļūs svarīgāka kvalitatīvu vietņu izveidē. Ja vēlaties uzzināt vairāk par veidu kopumā, es ļoti iesaku www.thinkingwithtype.com (un nopirkt grāmatu, lai to pievienotu). Ja jūs meklējat CSS rakstus par tipa ārstēšanu, šeit un citur tīmeklī ir daudz rakstu. Es iesaku arī iepazīties ar jaunākajiem Mark Boulton un Elliot Jay Stocks, kuri abi bieži runā par veidu saistībā ar tīmekļa dizainu.

Ir jautri!