CSS-i ja jQuery abil saate säilitada vertikaalset rütmi

Sisu

• Paigutus tüüp
• Vertikaalne rütm
• Rütmi juhtimine
• Piltidega tegelemine
• JQuery täiustamine
• Järeldus

• Vaja on teadmisi: CSS, põhiline jQuery
• Vajab: jQuery, CSS, HTML
• Projekti aeg: 30 minutit
• Allikafailide allalaadimine

Eeldades, et kujundate sisult, on esimene otsus kujunduse kujundamiseks on olla tüübiga seotud. Isegi poolt mitte valides kirjatüübi, olete teinud midagi, mis teie saiti mõjutab. Tüüp on printimise ja veebidisaini tuum ning see on keeruline; selle heaks kasutamiseks on palju akumuleeritud termineid, tavasid, reegleid ja tehnikaid. See artikkel käsitleb ühte tüübi ühe aspekti haldamise tehnikat, mida on Internetis olnud keeruline teha, kuid mis on printimisel tavapärane: püsiva vertikaalse rütmi säilitamine, mis omakorda võimaldab meil saavutada professionaalse kujunduse.

Paigutus tüüp

Trükituna on suure hulga tekstiga eseme puhul tõenäoliselt kujunduse aluseks baasjoonevõrk. Seda kasutatakse lehe struktuuri toomiseks ja sisu vertikaalse voo suunamiseks. Peaaegu kõik on paigutatud selle baasvõrgu suhtes. Ärge muretsege, kui te termineid ei tunnista, keegi ei tunne algjooni ega baasvõrke; te juba teate neist. Mõtle tagasi kooli, kui kirjutasid kahtlemata vooderdatud paberile - kirjutades panid oma kirjade põhja korralikult paberile igale reale. Baasjoon ja baasvõrk toimivad. Baasjoon on mõtteline joon, millele tähtede põhi joondub.Kui te seda artiklit nüüd vaatate, näete lähtejoont, kuigi tegelikult pole joont. Teie aju paneb teile ühe, see on põhjus, miks saate lauseid lugeda. Jooned vooderdatud paberil? Need on baasvõrk. Sirge, nii et teie laused on sirged, ja määrake regulaarsete intervallidega, nii et teie tekstil on korrapärane vertikaalne rütm.

Vertikaalne rütm

Vertikaalne rütm dikteerib lehe teksti asukohta. See on üks komponent, mis mõjutab meie võimet skannida ja lugeda tekstiplokke ning aitab teavitada meie emotsionaalseid vastuseid. Kui tekstil on tugev vertikaalne rütm ja hea vahekaugus, tunneme seda, et see on professionaalne, kaalutletud, autoriteetne ja mugav lugeda. Kui teksti rütm ja vahe on kehv, tunneme, et see on vähem kaalutletud, vähem professionaalne ja sageli raskemini loetav. Vertikaalne rütm on üks osa kasutatavus ja üks osa esteetika.

Rütmi juhtimine

Kahjuks on veeb endiselt trükikoja vaene nõbu, kuna see suudab rakendada mõningaid põhitavasid seoses tüübiga. Veebis ei saa me kasutada baasjoone ruudustikku samamoodi nagu trükikujundaja (või kooli laps) - me ei saa teksti joont joondada dokumendi alusvõrguga. CSSil puudub baasvõrgu kontseptsioon. Niisiis, meie tekst ei istu täpselt alusvõrgu joontel. Selle asemel koondub see vertikaalselt joontevahelisse vahesse. See on parim, mida veeb saab teha.

Olgem praktiliseks näidisdokumendiga. Esiteks määrame löögi, tehes nähtava baasjoone ruudustiku. Selleks kasutame korrapäraseid taustapilte, et joonistada tavalised horisontaaljooned üksteisest 22 pikslit:

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

Hurraa, meil on oma vooderdatud paber!

Pange tähele, et miski pole rivis. Et kõik oleks joondatud, tahame, et kõigi elementide alumine serv tabaks ühte nendest joontest. Lihtsaim viis seda teha on veenduda, et kõik elemendid võtaksid vertikaalse kõrguse (sh veerised), mis on 22. kordne. Siin on mõned CSS-id, mis seda teevad. Kasutan REM-i üksust, kuid võimaldan EM-i varundamist brauseritele, kes REM-i ei mõista. Lisan kommentaaridesse ka PX-seadme ekvivalendi. Kui te veel REM / EM-st aru ei saa, võite selle asemel kasutada vaid px-väärtusi - need kõik on samaväärsed:

1. html {/ * fondi suurus: 16px, joone kõrgus: 22px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. taust: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * veeriste ülemine ja alumine osa on mõlemad 22px * /
6. / * em tagavarad * / veeris: 1.375em 0;
7. varu: 1,375rem 0; }
8. h1 {/ * fondi suurus on 32px, joone kõrgus on 44px * /
9. / * em varukoopia * / font-size: 2em;
10. fondi suurus: 2rem; joone kõrgus: 1,375; }
11. h2 {/ * fondi suurus on 26px, joone kõrgus on 44px * /
12. / * em varukoopia * / font-size: 1,75em;
13. fondi suurus: 1.75rem; joone kõrgus: 1,5714285714; }
14. h3, h4, h5, h6 {/ * fondi suurus on 22 pikslit, joone kõrgus on 22 pikslit * /
15. / * em varukoopia * / font-size: 1.375em;
16. fondi suurus: 1.375rem; joone kõrgus: 1; }
17. p, ul, blockquote {/ * alumine veeris on 22px, joone kõrgus on päritud html-st (22px) * /
18. / * em tagavarad * / margin-top: 0; alumine serv: 1,375em;
19. ülemine serv: 0; ääris-põhi: 1,375rem; }

Vaatame, mida see meile annab. Pange tähele, kuidas kogu tekst joondub kenasti? See ei istu baasjoonel, kuid sellel on ennustatav vertikaalne rütm. See on kena ja korralik.

Piltidega tegelemine

Kujutised teevad asja keerulisemaks. Vaadake, mis juhtub meie rütmiga, kui mõned neist kaasame. Nad rikuvad seda nagu plaadi vahelejätmine - tempo on õige, kuid aeg on väljas. Joondamine muutub nihutatuks. Sellepärast, et piltidel ei ole tõenäoliselt kõrgust, mis on algjoone mitmekordne, nii et alumine serv ei asu meie baasjoone võrguga.

Selle parandamiseks, mida me tegelikult peame tegema, on lisama igale pildile veeris, muutes veerise alaosa meie ruudustikuga joondatuks. Mis on piisavalt JavaScripti abil automatiseeritav. Siin on meie põhiplaan:

1. Mõelge välja iga pildi kõrgus.
2. Vaadake, mitu korda jagatakse baasväärtus vertikaalsesse ruumi, mille pilt praegu võtab, ja saate järelejäänud osa.
3. Lahutades jäägi baasjoonest, andke nihe, mida peame pildile rakendama.
4. Rakendage nihe marginaalina pildi alaossa.

Pildi vertikaalse ruumi põhi joonduks nüüd õigesti baasjoone võrguga. Siin on jQuery põhifunktsioon, mis seda teeb:

1. $ (aken) .bind (’koormus’, function () {
2. $ ("img"). iga (funktsioon () {
3. / * muutujad * /
4. var this_img = $ (see);
5. var baasjoon = 22;
6. var img_height = this_img.height ();
7. / * tehke matemaatikat * /
8. var ülejäänud = parseFloat (img_height% baseline);
9. / * kui palju peame lisama? * /
10. var offset = parseFloat (algväärtus-ülejäänud);
11. / * rakendage pildile veerist * /
12. this_img.css ("marginaal-põhi", nihe + "px");
13. });
14. });

Miks aken.köita rida? Sest me peame ootama, kuni pildid laaditakse, enne kui saame nende suurused usaldusväärselt kätte saada. Siin on näide selle põhikoodi töötamisest.

JQuery täiustamine

Maailm on harva sirgjooneline ja nii selgub siin - peame tegelema üsna paljude rakenduse detailidega. Mis on valesti meie funktsioonil? Palju:

• See annab vastikuid tulemusi piltidega, mis on pigem sissepoole paigutatud kui hõljuvad või blokeeritud.
• Mõnel pildil, eriti konteinerites, tundub see lollakas.
• See ei tegele vedelate paigutustega.
• See pole eriti korduvkasutatav.

Me ei soovi seda käitumist rakendada piltidel, mis on sees, näiteks näol olev naerunägu. Sisesed pildid on joondatud, nii et alumine serv asetseb tekstiga (mitte baasvõrk). See tähendab, et pilt on vertikaalselt nihutatud. CSS ega JS ei anna meile võimalust teada saada, kus on tekstielemendi lähtejoon, nii et me ei tea nihet. Peame eirama sisepilte ja rakendama parandust ainult piltidele, millele on määratud kuva: plokk (õnneks seatakse kõik hõljuvad pildid automaatselt blokeerimisele).

Kui pilt on konteineris, võib pildile kantud veeris varjatud konteineris olevate ülevoolusätete tõttu. Samuti ei pruugi me soovida veerist pildile, vaid selle asemel konteineri elemendile. Selles näites oleks meil pigem veerised valgel kastil kui kasti sees oleval pildil, et saaksime vältida kastis kuvatavate imelike tühimike tekkimist.

Funktsioon töötab ainult üks kord, kuid vedelal kujundusel muudavad pildid kõrgust, kui brauser suurust suurendab (selle nägemiseks proovige näide suureks muuta üsna kitsaks). Suuruse muutmine rikub rütmi uuesti. Peame funktsiooni käivitama nii pärast brauseri suuruse muutmist kui ka pärast lehe laadimist. Vedelad paigutused toovad kaasa ka muid probleeme; pildid võivad olla osade pikslite kõrgused, näiteks 132,34 pikslit. See võib omakorda põhjustada ootamatuid tulemusi, isegi kui rakendame murdosa (kui olete huvitatud, siis tehke järgmist: trac.webkit.org/wiki/LayoutUnit). Niisiis, osade pikslite põhjustatud paigutusvigade vältimiseks peame pildi masseerima kogu piksli kõrguseks.

Lõpuks peaksime sellest tegema korduvkasutatavama funktsiooni. Tegelikult peaksime teoreetilise lahenduse keerukuse tõttu praktilise lahenduse jaoks tegema pistikprogrammi, mida saab teistes projektides uuesti kasutada.

Viimases näites leiate koodi, millega see kõik saavutatakse. Pistikprogrammi JavaScripti kommenteeritakse tugevalt, et saaksite seda jälgida. Pistikprogrammi saate kasutada, helistades sellele järgmiselt:

1. $ (aken) .bind (’koormus’, function () {
2. $ ("img"). baselineAlign ();
3. });

Või võite pistikprogrammil käskida marginaali nimetatavale konteinerile rakendada, kui see on pildi vanemana olemas:

1. $ (aken) .bind (’koormus’, function () {
2. $ ("img"). baselineAlign ({konteiner: ’. hüpikaken’});
3. });

Järeldus

Hea vertikaalse rütmi hoidmine on peen, kuid tõhus disainipraktika, mida kasutatakse regulaarselt trükis. Nüüd teate põhiprintsiipe, teil on algtasemeid ja alusvõrku käsitlevad teadmised ning teate mõningaid CSS-i teksti paigutuse ja printimise piiranguid. Samuti teate, kuidas nendest piirangutest mööda hiilida, koostada oma dokumendid mis tahes vertikaalses rütmis, mis teile meeldib, ja teil on tööriist, mis aitab häiriva pildisisu lahendamisel.

CSS-i küpsedes saame jätkuvalt rohkem funktsioone kooskõlas meie prinditütardega, nii et kvaliteetsete veebisaitide loomisel on tüüpide hea mõistmine olulisem. Kui soovite lisateavet tüübi kohta üldiselt, soovitan tungivalt www.thinkingwithtype.com (ja osta raamat selle juurde). Kui jälgite tüübiravi käsitlevaid CSS-i artikleid, on nii siin kui ka mujal veebis arvukalt artikleid. Samuti soovitaksin järele jõuda Mark Boultoni ja Elliot Jay Stocksi viimastega, kes mõlemad räägivad sageli veebidisainiga seotud tüübist.

Lõbutse hästi!