Palaikykite vertikalų ritmą naudodami CSS ir „jQuery“

Turinys

• Išdėstymo tipas
• Vertikalus ritmas
• Ritmo dirigavimas
• Darbas su vaizdais
• „JQuery“ tobulinimas
• Išvada

• Reikalingos žinios: CSS, pagrindinis „jQuery“
• Reikalauja: „jQuery“, CSS, HTML
• Projekto laikas: 30 minučių
• Atsisiųskite šaltinio failus

Darant prielaidą, kad jūs kuriate iš turinio, pirmas sprendimas padaryti jūsų dizainą turi būti susiję su tipu. Net ir ne pasirinkdami šriftą, padarėte tai, kas daro įtaką jūsų svetainei. Tipas yra pagrindinis spausdinimo ir interneto dizainas, ir jis yra sudėtingas; yra daugybė sukauptų terminų, praktikos, taisyklių ir metodų, kurie yra tinkamai naudojami. Šiame straipsnyje kalbama apie vieną tipo valdymo aspektą, kurį sunku atlikti internete, tačiau spausdinant yra įprasta: išlaikyti pastovų vertikalų ritmą, kuris savo ruožtu leidžia mums pasiekti profesionalų išdėstymą.

Išdėstymo tipas

Spausdinant bet kokį daiktą, kuriame yra didelis teksto kiekis, dizaino pagrindas greičiausiai bus pagrindinė tinklelis. Jis naudojamas norint pateikti puslapio struktūrą ir nukreipti vertikalų turinio srautą. Beveik viskas dedama atsižvelgiant į tą pagrindinį tinklelį. Nesijaudinkite, jei neatpažįstate terminų, niekas nepažįsta bazinių linijų ar bazinių tinklelių; jūs jau žinote apie juos. Pagalvokite apie mokyklą, kai neabejotinai rašėte ant iškloto popieriaus - rašydami dailiai padėjote laiškų apačią ant kiekvienos popieriaus eilutės. Pradinis ir pradinis tinklelis veikia. Bazinė linija yra įsivaizduojama linija, ant kurios susilygina raidžių apačia.Jei dabar pažvelgsite į šį straipsnį, pamatysite pradinę liniją, nors linijos iš tikrųjų nėra. Jūsų smegenys įdeda vieną jums, todėl galite skaityti sakinius. Linijos ant iškloto popieriaus? Jie yra bazinis tinklelis. Tiesus, kad sakiniai būtų tiesūs, ir nustatykite reguliariais intervalais, kad jūsų tekstas būtų taisyklingas vertikalus ritmas.

Vertikalus ritmas

Vertikalus ritmas nurodo, kur yra puslapio tekstas. Tai yra vienas komponentas, kuris daro įtaką mūsų gebėjimui nuskaityti ir skaityti teksto blokus, ir padeda informuoti mūsų emocinius atsakymus. Kai tekstas turi tvirtą vertikalų ritmą ir gerą tarpą, mes manome, kad jis yra profesionalus, apgalvotas, patikimas ir patogus skaityti. Kai tekstas yra prastas ritmas ir tarpai, mes manome, kad jis yra mažiau apgalvotas, mažiau profesionalus ir dažnai sunkiau skaitomas. Vertikalus ritmas yra viena dalis naudojimo ir viena dalis estetika.

Ritmo dirigavimas

Deja, žiniatinklis vis dar yra prastas pusbrolis, turintis spaudą, atsižvelgiant į jo gebėjimą įgyvendinti kai kurias pagrindines praktikos rūšis. Žiniatinklyje mes negalime naudoti bazinių tinklelių taip, kaip naudojasi spaudos dizaineris (arba vaikas mokykloje) - mes negalime suderinti teksto pagrindo su dokumento pagrindinio tinkleliu. CSS neturi pagrindinio tinklelio koncepcijos. Taigi, mūsų tekstas nebus tiksliai išdėstytas pagrindinio tinklelio linijose. Vietoj to, jis bus vertikaliai sutelktas į tarpą tarp linijų. Tai geriausia, ką gali padaryti žiniatinklis.

Panagrinėkime dokumento pavyzdį. Pirma, mes nustatysime ritmą, sukurdami matomą pagrindinį tinklelį. Norėdami tai padaryti, naudosime pasikartojantį fono paveikslėlį, kad nubrėžtume reguliarias horizontalias linijas 22 taškų atstumu:

1. html {background: #fff url (bazinė_22.png); }

Valio, mes turime savo išklotą popierių!

Pastebėsite, kad niekas nesirikiuoja. Norint, kad viskas sutaptų, norime, kad apatinis visų elementų kraštas pasiektų vieną iš tų linijų. Lengviausias būdas tai padaryti yra įsitikinti, kad visi elementai užima vertikalų aukštį (įskaitant paraštes), kuris yra 22 kartotinis. Štai keletas CSS, kurie tai daro. Aš naudoju REM rinkinį, bet suteikiu EM atsarginę versiją naršyklėms, kurios nesupranta REM. Taip pat į komentarus įtraukiu PX vieneto atitikmenį. Jei dar nesuprantate REM / EM, vietoj to galite naudoti px reikšmes - jos visos yra lygiavertės:

1. html {/ * šrifto dydis: 16 taškų, linijos aukštis: 22 taškų * /
2. šriftas: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. fonas: #fff url (bazinė_22.png); }
5. „h1“, „h2“, „h3“, „h4“, „h5“, „h6“ {/ * „margin-top“ ir „bottom“ yra 22 pikselių * /
6. / * em atsarginis * / paraštė: 1.375em 0;
7. skirtumas: 1.375rem 0; }
8. h1 {/ * šrifto dydis yra 32 taškų, linijos aukštis - 44 taškų * /
9. / * em atsarginis * / font-size: 2em;
10. šrifto dydis: 2rem; linijos aukštis: 1,375; }
11. „h2“ {/ * šrifto dydis yra 26 taškų, linijos aukštis - 44 taškų * /
12. / * em atsarginis * / šrifto dydis: 1.75em;
13. šrifto dydis: 1.75rem; linijos aukštis: 1.5714285714; }
14. h3, h4, h5, h6 {/ * šrifto dydis yra 22 taškų, linijos aukštis - 22 taškų * /
15. / * em atsarginis * / šrifto dydis: 1.375em;
16. šrifto dydis: 1.375rem; linijos aukštis: 1; }
17. p, ul, blockquote {/ * apatinė paraštė yra 22 taškų, linijos aukštis paveldimas iš html (22 taškų) * /
18. / * em atsarginis * / margin-top: 0; paraštė-apačia: 1.375em;
19. paraštė-viršuje: 0; paraštė-apačia: 1,375rem; }

Pažvelkime, ką tai mums duoda. Atkreipkite dėmesį, kaip visas tekstas gražiai sulygiuotas? Jis nesėdi ant bazinės linijos, tačiau turi nuspėjamą vertikalų ritmą. Tai malonu ir tvarkinga.

Darbas su vaizdais

Vaizdai viską apsunkina. Pažvelkite, kas nutinka mūsų ritmui, kai juos įtraukiame. Jie tai sutrikdo kaip įrašo praleidimą - tempas yra tinkamas, bet laikas neatitinka. Lygiavimas tampa perkeltas. Taip yra todėl, kad mažai tikėtina, kad vaizdai turi aukštį, kuris yra kartojamas iš bazinės linijos, todėl apatinis kraštas nesutampa su mūsų bazinės grotelėmis.

Norėdami ištaisyti viską, ką iš tikrųjų turime padaryti, yra pridėti prie kiekvieno paveikslėlio paraštę, kad paraštės apačia sutaptų su mūsų tinkleliu. Tai yra pakankamai paprasta, kad būtų galima automatizuoti naudojant šiek tiek „JavaScript“. Štai mūsų pagrindinis planas:

1. Išsiaiškinkite kiekvieno vaizdo aukštį.
2. Sužinokite, kiek kartų bazinė vertė padalijama į vertikalią erdvę, kurią šiuo metu užima vaizdas, ir gaukite likusią dalį.
3. Atimkite likusią dalį nuo bazinės linijos, kad gautumėte poslinkį, kurį turime pritaikyti vaizdui.
4. Taikykite poslinkį kaip paraštę vaizdo apačioje.

Vaizdo vertikalios erdvės apačia dabar bus teisingai sulyginta su pagrindinės tinkleliu. Štai pagrindinė „jQuery“ funkcija, atliekanti tai:

1. $ (langas) .bind (’apkrova’, funkcija () {
2. $ ("img"). kiekvienas (funkcija () {
3. / * kintamieji * /
4. var this_img = $ (tai);
5. var bazinė = 22;
6. var img_height = this_img.height ();
7. / * atlikti matematiką * /
8. var likutis = parseFloat (img_height% baseline);
9. / * kiek mums reikia pridėti? * /
10. var offset = parseFloat (bazinė vertė-likusi dalis);
11. / * pritaikykite paraštę vaizdui * /
12. this_img.css ("paraštė-apačia", poslinkis + "px");
13. });
14. });

Kodėl langas.rišti linija? Nes mes turime palaukti, kol vaizdai bus įkelti, kol galėsime patikimai sužinoti jų dydžius. Štai pavyzdys, kai veikia šis pagrindinis kodas.

„JQuery“ tobulinimas

Pasaulis retai būna tiesus, todėl čia pasirodo - turime susidurti su nemažai įgyvendinimo detalių. Kuo bloga mūsų funkcija? Daugybė:

• Tai duoda nemalonių rezultatų, kai vaizdai yra įterpti, o ne slankioti ar blokuoti.
• Kai kuriuose vaizduose, ypač konteineriuose, atrodo klaidinga.
• Tai nesusiję su skysčių išdėstymu.
• Tai nėra labai daugkartinio naudojimo.

Nenorime šio elgesio pritaikyti vaizdams, kurie yra įterpti, pavyzdžiui, pavyzdžio šypsenėlė. Įterpti vaizdai yra sulygiuoti, todėl apatinis kraštas yra toje pačioje bazinėje linijoje kaip ir tekstas (ne bazinis tinklelis). Tai reiškia, kad vaizdas yra pasislinkęs vertikaliai. Nei CSS, nei JS mums nesuteikia galimybės sužinoti, kur yra pagrindinė teksto elemento linija, todėl mes nežinome poslinkio. Turime nepaisyti įterptųjų vaizdų ir pritaikyti pataisymus tik nustatytiems vaizdams rodyti: blokuoti (laimei, bet koks plūduriuojantis vaizdas automatiškai nustatomas rodyti bloką).

Jei paveikslėlis yra talpykloje, vaizdui pritaikyta paraštė gali būti paslėpta dėl perpildymo nustatymų sudėtiniame rodinyje. Be to, galbūt nenorime, kad būtų paveikslėlio paraštė, o vietoje konteinerio elemento. Pavyzdyje norėtume, kad paraštės būtų baltoje dėžutėje, o ne vaizde dėžutės viduje, todėl galime išvengti lauke pasirodančių keistų spragų.

Funkcija veikia tik vieną kartą, tačiau naudojant skystą dizainą vaizdai keičia aukštį, kai naršyklė keičia dydį (pabandykite pakeisti pavyzdį į gana siaurą, kad tai pamatytumėte). Dydžio keitimas vėl pertraukia ritmą. Mums reikia, kad funkcija veiktų pakeitus naršyklės dydį ir įkėlus puslapį. Skysti maketai taip pat sukelia kitų problemų; vaizdai gali būti trupmenos pikselių aukščio, pavyzdžiui, 132,34 taškų. Tai savo ruožtu gali sukelti netikėtų rezultatų, net jei taikysime trupmeninę maržą (jei jus domina, štai kodėl: trac.webkit.org/wiki/LayoutUnit). Taigi, norėdami išvengti išdėstymo klaidų, kurias sukelia daliniai pikseliai, turėsime išmasažuoti vaizdą į visą pikselių aukštį.

Galiausiai turėtume tai padaryti labiau pakartotinai naudojama funkcija. Tiesą sakant, atsižvelgiant į teorinio sprendimo sudėtingumą, turėtume sukurti papildinį, kurį būtų galima pakartotinai naudoti kituose projektuose.

Paskutiniame pavyzdyje rasite kodą, kuris visa tai pasiekia. Įskiepis „JavaScript“ yra labai komentuojamas, kad galėtumėte sekti paskui. Papildinį galite naudoti paskambinę taip:

1. $ (langas) .bind (’apkrova’, funkcija () {
2. $ ("img"). bazinė linija ();
3. });

Arba galite nurodyti papildiniui pritaikyti paraštę pavadintam sudėtiniam rodiniui, jei toks yra kaip pirminis atvaizdas:

1. $ (langas) .bind (’apkrova’, funkcija () {
2. $ ("img"). baselineAlign ({talpykla: ’. iššokantis’});
3. });

Išvada

Gero vertikalaus ritmo išlaikymas yra subtili, bet efektyvi dizaino praktika, reguliariai naudojama spausdinant. Dabar jūs žinote pagrindinius principus, turite pakankamai žinių apie bazines linijas ir bazinį tinklelį ir žinote kai kuriuos CSS teksto išdėstymo, palyginti su spausdinimu, apribojimus. Jūs taip pat žinote, kaip apeiti tuos apribojimus, sudaryti dokumentus pagal bet kokį vertikalų ritmą, kuris jums patinka, ir turite įrankį, padedantį susidoroti su trikdančiu vaizdų turiniu.

Bręstant CSS, mes ir toliau gauname daugiau funkcijų pagal savo pusbrolius, todėl geras tipo supratimas taps svarbesnis kuriant kokybiškas svetaines. Jei norite sužinoti daugiau apie tipą apskritai, labai rekomenduoju www.thinkingwithtype.com (ir nusipirkti knygą kartu su juo). Jei ieškote CSS straipsnių apie tipo gydymą, čia ir kitur internete yra daugybė straipsnių. Taip pat rekomenduočiau susipažinti su naujausiais Marko Boultono ir Ellioto Jay Stockso pranešimais, kurie abu dažnai kalba apie tipą, susijusį su interneto dizainu.

Pasilinksmink!