Ohranite navpični ritem s CSS in jQuery

Vsebina

• Vrsta postavitve
• Navpični ritem
• Izvajanje ritma
• Ukvarjanje s slikami
• Izboljšanje jQuery
• Zaključek

• Potrebno znanje: CSS, osnovni jQuery
• Zahteva: jQuery, CSS, HTML
• Čas projekta: 30 minut
• Prenesite izvorne datoteke

Ob predpostavki, da načrtujete iz vsebine, je prva odločitev za izvedbo vašega oblikovanja ima biti povezan s tipom. Tudi mimo ne z izbiro pisave ste naredili nekaj, kar vpliva na vaše spletno mesto. Tip je jedro tiska in spletnega oblikovanja in je zapleten; obstaja veliko nabranih izrazov, praks, pravil in tehnik, ki se dobro uporabljajo. Ta članek obravnava eno tehniko upravljanja enega vidika vrste, tistega, ki ga je bilo težko izvesti v spletu, a je rutina v tisku: vzdrževanje doslednega vertikalnega ritma, kar pa nam omogoča, da dosežemo profesionalno postavitev.

Vrsta postavitve

V tiskanem tisku bo za vsak element z veliko količino besedila osnova zasnove verjetno osnovna mreža. Uporablja se za prikaz strukture na strani in vodi navpični tok vsebine. Skoraj vse je postavljeno glede na to osnovno mrežo. Ne skrbite, če izrazov ne prepoznate, nihče ni seznanjen s temeljnimi črtami ali osnovnimi mrežami; že veste zanje. Spomnite se nazaj v šolo, ko ste nedvomno pisali na podloženi papir - kot ste pisali, ste dno svojih črk lepo postavili na vsako od vrstic na papirju. Osnovna in osnovna mreža v akciji. Osnovna črta je namišljena črta, na katero se poravna dno črk.Če zdaj pogledate ta članek, boste "videli" osnovno črto, čeprav črte v resnici ni. Možgani vam ga dajo tam, zato lahko berete stavke. Vrstice na podloženem papirju? So osnovna mreža. Ravno, tako da so vaši stavki naravnost in postavljeni v rednih intervalih, tako da ima besedilo pravilen vertikalni ritem.

Navpični ritem

Navpični ritem določa, kje na strani se nahaja besedilo. Je ena komponenta, ki vpliva na našo sposobnost skeniranja in branja blokov besedila, in pomaga pri obveščanju o naših čustvenih odzivih. Ko ima besedilo močan vertikalni ritem in dober razmik, se nam zdi strokovno, premišljeno, avtoritativno in prijetno za branje. Če ima besedilo slab ritem in razmike, se nam zdi, da je manj premišljeno, manj profesionalno in pogosto težje za branje. Navpični ritem je en del uporabnosti in en del estetike.

Izvajanje ritma

Na žalost je splet še vedno slab bratranec tiska, kar zadeva njegovo sposobnost uveljavljanja nekaterih temeljnih praks glede vrste. V spletu ne moremo uporabiti osnovne mreže tako, kot to počne oblikovalec tiska (ali otrok v šoli) - temeljne črte besedila ne moremo poravnati z osnovno mrežo dokumenta. CSS nima pojma osnovne mreže. Torej, naše besedilo ne bo natančno ležalo na črtah osnovne mreže. Namesto tega bo centriran navpično v režo med vrsticami. To je najboljše, kar lahko splet naredi.

Bodimo praktični s primerom dokumenta. Prvič, utrip bomo nastavili tako, da bomo naredili vidno osnovno mrežo. Za to bomo s ponavljajočo se sliko ozadja narisali pravilne vodoravne črte na 22 slikovnih pik narazen:

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

Hura, imamo naš podložen papir!

Opazili boste, da se nič ne ujema. Če želite, da se vse poravna, želimo, da spodnji rob vseh elementov zadene eno od teh vrstic. To najlažje naredite tako, da zagotovite, da vsi elementi zavzamejo navpično višino (vključno z robovi), ki je večkratnik 22. Tukaj je nekaj CSS, ki počne ravno to. Uporabljam enoto REM, vendar dajem nadomestni EM za brskalnike, ki ne razumejo REM. V komentarje vključim tudi ekvivalent enote PX. Če še ne razumete REM / EM, lahko raje uporabite vrednosti px - vse so enakovredne:

1. html {/ * velikost pisave: 16px, višina črte: 22px * /
2. pisava: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. ozadje: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * rob zgoraj in spodaj sta 22 slikovnih pik * /
6. / * em nadomestni * / marža: 1.375em 0;
7. marža: 1.375rem 0; }
8. h1 {/ * velikost pisave je 32 slikovnih pik, višina vrstice je 44 slikovnih pik * /
9. / * em nadomestno * / velikost pisave: 2em;
10. velikost pisave: 2rem; višina črte: 1.375; }
11. h2 {/ * velikost pisave je 26 slikovnih pik, višina vrstice je 44 slikovnih pik * /
12. / * em nadomestni * / velikost pisave: 1,75em;
13. velikost pisave: 1,75rem; višina črte: 1,5714285714; }
14. h3, h4, h5, h6 {/ * velikost pisave je 22 slikovnih pik, višina črte je 22 slikovnih pik * /
15. / * em nadomestni * / velikost pisave: 1.375em;
16. velikost pisave: 1.375rem; višina črte: 1; }
17. p, ul, blockquote {/ * spodnji rob je 22 slikovnih pik, višina vrstice je podedovana iz html (22 slikovnih pik) * /
18. / * em nadomestno * / margin-top: 0; margin-bottom: 1.375em;
19. margin-top: 0; margin-bottom: 1.375rem; }

Oglejmo si, kaj nam to daje. Ste opazili, kako se vse besedilo lepo poravna? Ne sedi na osnovni črti, ima pa predvidljiv vertikalni ritem. Je lepo in urejeno.

Ukvarjanje s slikami

Slike otežujejo stvari. Oglejte si, kaj se zgodi z našim ritmom, ko nekaj vključimo. Motijo ​​ga kot preskok v zapisu - tempo je pravi, čas pa izklopljen. Poravnava se premakne. To je zato, ker slike verjetno nimajo višine, ki je večkratnik osnovne črte, zato se spodnji rob ne ujema z našo osnovno mrežo.

Da bi to popravili, moramo vsaki sliki dodati rob, tako da se dno roba poravna z našo mrežo. Kar je dovolj preprosto za avtomatizacijo z malo JavaScripta. Tu je naš osnovni načrt:

1. Ugotovite višino vsake slike.
2. Oglejte si, kolikokrat se osnovna vrednost deli na navpični prostor, ki ga trenutno zajema slika, in dobite preostanek.
3. Preostanek odštejemo od osnovne črte, da dobimo odmik, ki ga moramo uporabiti na sliki.
4. Odmik uporabite kot rob na dnu slike.

Dno navpičnega prostora slike bi se zdaj pravilno poravnalo z osnovno mrežo. Tu je osnovna funkcija v jQuery, ki to počne:

1. $ (window) .bind ('load', function () {
2. $ ("img"). vsak (funkcija () {
3. / * spremenljivke * /
4. var this_img = $ (to);
5. var osnova = 22;
6. var img_height = this_img.height ();
7. / * opravi matematiko * /
8. ostanek var = parseFloat (img_height% izhodišča);
9. / * koliko moramo dodati? * /
10. var offset = parseFloat (osnovni ostanek);
11. / * uporabi rob za sliko * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Zakaj window.bind črta? Ker moramo počakati, da se slike naložijo, preden lahko zanesljivo dobimo njihove velikosti. Tu je primer teče te osnovne kode.

Izboljšanje jQuery

Svet je le redko naravnost, tako se je izkazalo tudi tukaj - obravnavati moramo kar nekaj podrobnosti izvedbe. Kaj je narobe s funkcijo, ki jo imamo? Veliko:

• Daje neprijetne rezultate s slikami, ki so v vrstici in ne plavajoče ali blokirane.
• Na nekaterih slikah se zdi moteč, zlasti tisti v posodah.
• Ne ukvarja se s postavitvami tekočin.
• Ni preveč uporabna.

Tega vedenja ne želimo uporabljati za slike, ki so v vrstici, na primer smeška v primeru. Vstavljene slike so poravnane, tako da spodnji rob leži na isti osnovni črti kot besedilo (ne osnovna mreža). To pomeni, da je slika pomaknjena navpično. Niti CSS niti JS nam ne omogočata, da ugotovimo, kje je osnovna črta za besedilni element, zato ne poznamo odmika. Zanemariti moramo vrstice in popravke uporabiti samo za slike, ki so nastavljene na zaslon: blok (na srečo je vsaka plavajoča slika samodejno nastavljena na prikazni blok).

Če je slika v vsebniku, je lahko rob, ki je uporabljen za sliko, skrit zaradi nastavitev prelivanja na vsebniku. Prav tako morda ne želimo roba na sliki, temveč na elementu vsebnika. V primeru bi raje imeli robove na belem polju kot na sliki znotraj polja, zato se lahko izognemo čudnim vrzelim, ki se pojavijo v polju.

Funkcija se zažene samo enkrat, vendar pri tekočem dizajnu slike spremenijo višino, ko se brskalnik spremeni v velikost (poskusite primer spremeniti v velikost, ki je precej ozka, da to vidite). Spreminjanje velikosti ponovno prekine ritem. Funkcija mora delovati po spremembi velikosti brskalnika in po nalaganju strani. Postavitve tekočin povzročajo tudi druge težave; slike so lahko visoke le v delnih slikovnih pikah, na primer 132,34 slikovnih pik. To pa lahko povzroči nepričakovane rezultate, tudi če uporabimo delno maržo (če vas zanima, tukaj je razlog: trac.webkit.org/wiki/LayoutUnit). Torej bomo morali sliko zmasirati v celotno višino slikovnih pik, da se izognemo napakam pri postavitvi, ki jih povzročajo delne slikovne pike.

Nazadnje bi morali to spremeniti v bolj uporabno funkcijo. Pravzaprav bi morali biti zaradi zapletenosti praktične rešitve v primerjavi s teoretično rešitvijo vtičnik, ki ga je mogoče ponovno uporabiti v drugih projektih.

V zadnjem primeru boste našli kodo, ki vse to doseže. Vtičnik JavaScript je močno komentiran, tako da lahko sledite. Vtičnik lahko uporabite tako, da ga pokličete na naslednji način:

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

Vtičniku lahko tudi naročite, naj uporabi rob za imenovani vsebnik, če obstaja kot nadrejeni del slike:

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

Zaključek

Ohranjanje dobrega navpičnega ritma je subtilna, a učinkovita praksa oblikovanja, ki se redno uporablja v tisku. Zdaj poznate osnovna načela, dobro poznate izhodišča in osnovno mrežo ter poznate nekatere omejitve postavitve besedila CSS v primerjavi s tiskom. Vedete tudi, kako se izogniti tem omejitvam, sestaviti dokumente v poljubnem navpičnem ritmu in imate orodje za reševanje motečih vsebin slike.

Ko CSS dozori, še naprej dobivamo več funkcij v skladu z našimi bratranci, zato bo dobro razumevanje vrste postalo pomembnejše za ustvarjanje kakovostnih spletnih mest. Če bi radi izvedeli več o tipkanju na splošno, toplo priporočam www.thinkingwithtype.com (in nakup knjige, da gre z njo). Če iščete članke o CSS o obdelavi tipa, obstaja veliko člankov tako tu kot drugod po spletu. Priporočal bi tudi, da se dotaknete najnovejših novic Marka Boultona in Elliota Jaya Stocksa, ki se pogosto pogovarjata o tipu v povezavi s spletnim oblikovanjem.

Zabavaj se!