Säilytä pystysuuntainen rytmi CSS: n ja jQueryn avulla

Sisältö

• Asettelu tyyppi
• Pystyrytmi
• Rytmin johtaminen
• Kuvien käsittely
• JQueryn parantaminen
• Johtopäätös

• Tarvittavaa tietoa: CSS, perus jQuery
• Vaatii: jQuery, CSS, HTML
• Projektin aika: 30 minuuttia
• Lataa lähdetiedostot

Olettaen, että suunnittelet sisällöstä, ensimmäinen päätös vaikuttaa suunnitteluusi on olla tyyppiin liittyvä. Jopa ei valitsemalla kirjasintyypin, olet tehnyt jotain, joka vaikuttaa sivustoosi. Tyyppi on painotuotteiden ydin ja verkkosuunnittelu, ja se on monimutkainen sen hyvässä käytössä on paljon kertyneitä termejä, käytäntöjä, sääntöjä ja tekniikoita. Tämä artikkeli koskee yhtä tekniikkaa yhden tyypin piirteen hallitsemiseksi, jota on ollut vaikea tehdä verkossa, mutta joka on rutiininomaista painettuna: ylläpitämällä yhtenäistä vertikaalista rytmiä, mikä puolestaan ​​antaa meille mahdollisuuden saavuttaa ammattimainen ulkoasu.

Asettelu tyyppi

Tulostettuna jokaiselle tuotteelle, jolla on huomattava määrä tekstiä, suunnittelun perusta on todennäköisesti perusviiva. Sitä käytetään rakenteen tuomiseen sivulle ja ohjaamaan sisällön vertikaalista kulkua. Lähes kaikki on sijoitettu kyseiseen perusverkkoon nähden. Älä huoli, jos et tunnista termejä, kenellekään ei ole tuntematon perusviivat tai ruudukot; tiedät jo niistä. Ajattele takaisin kouluun, kun kirjoitit epäilemättä vuoratulle paperille - kirjoittaessasi sijoitit kirjeesi pohjan siististi paperin jokaiselle riville. Perus- ja perusverkko toiminnassa. Perusviiva on kuvitteellinen viiva, jolle kirjainten alaosa kohdistuu.Jos tarkastelet tätä artikkelia nyt, näet "perustason", vaikka viivaa ei oikeastaan ​​ole. Aivosi laittaa yhden sinulle, siksi voit lukea lauseita. Viivat vuoratulla paperilla? Ne ovat perustason ruudukko. Suora, jotta lauseesi ovat suorat, ja aseta säännöllisin väliajoin, jotta tekstillä on säännöllinen pystysuuntainen rytmi.

Pystyrytmi

Pystysuuntainen rytmi sanelee, missä sivulla teksti sijaitsee. Se on yksi komponentti, joka vaikuttaa kykyymme skannata ja lukea tekstilohkoja, ja se auttaa tiedottamaan emotionaalisista vastauksistamme. Kun tekstillä on vahva pystysuora rytmi ja hyvä väli, tunnemme sen olevan ammattimaista, harkittua, arvovaltaista ja mukavaa lukea. Kun tekstin rytmi ja välit ovat huonot, mielestämme sitä pidetään vähemmän harkittuna, vähemmän ammattimaisena ja usein vaikeampana lukea. Vertikaalinen rytmi on yksi osa käytettävyyttä ja yksi osa estetiikkaa.

Rytmin johtaminen

Valitettavasti verkko on edelleen painotuotteiden huono serkku, kun otetaan huomioon sen kyky toteuttaa joitain perustyyppisiä käytäntöjä tyypin suhteen. Verkossa emme voi käyttää perusviivaruudukkoa samalla tavalla kuin painosuunnittelija (tai koulun lapsi) - emme voi kohdistaa tekstin perusviivaa asiakirjan perusviivaruudukkoon. CSS: llä ei ole käsitystä perusviivasta. Joten tekstimme ei istu tarkalleen perusverkon viivoilla. Sen sijaan se keskitetään pystysuoraan viivojen väliin. Se on paras mitä verkko voi tehdä.

Tehdään käytännön esimerkkidokumentin kanssa. Ensinnäkin asetamme tahdin tekemällä näkyvän perustason ruudukon. Tätä varten käytämme toistuvaa taustakuvaa piirtämään säännölliset vaakasuorat viivat 22 kuvapisteen välein:

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

Hurraa, meillä on vuorattu paperimme!

Huomaa, että mikään ei ole rivissä. Jotta kaikki olisi linjassa, haluamme, että kaikkien elementtien alareuna osuu johonkin näistä viivoista. Helpoin tapa tehdä se on varmistaa, että kaikki elementit vievät pystysuoran korkeuden (mukaan lukien marginaalit), joka on 22: n moninkertainen. Tässä on joitain CSS: itä, jotka tekevät juuri sen. Käytän REM-yksikköä, mutta annan EM-varaversion selaimille, jotka eivät ymmärrä REM: ää. Lisään kommentteihin myös PX-yksikön vastaavan. Jos et vielä ymmärrä REM / EM: ää, voit käyttää vain px-arvoja - ne kaikki ovat vastaavia:

1. html {/ * font-size: 16px, line-height: 22px * /
2. fontti: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. tausta: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * marginaali-ylä ja ala ovat molemmat 22 kuvapistettä * /
6. / * em varavara * / marginaali: 1,375em 0;
7. marginaali: 1,375rem 0; }
8. h1 {/ * kirjasinkoko on 32 kuvapistettä, viivan korkeus on 44 kuvapistettä * /
9. / * em varavara * / font-size: 2em;
10. kirjasinkoko: 2rem; viivan korkeus: 1,375; }
11. h2 {/ * kirjasinkoko on 26 kuvapistettä, viivan korkeus on 44 kuvapistettä * /
12. / * em varavara * / font-size: 1.75em;
13. kirjasinkoko: 1.75rem; viivan korkeus: 1,5714285714; }
14. h3, h4, h5, h6 {/ * kirjasinkoko on 22 kuvapistettä, viivan korkeus on 22 kuvapistettä * /
15. / * em varavara * / font-size: 1.375em;
16. kirjasinkoko: 1.375rem; viivan korkeus: 1; }
17. p, ul, blockquote {/ * alimarginaali on 22 kuvapistettä, viivan korkeus periytyy html: stä (22 kuvapistettä) * /
18. / * em varavara * / margin-top: 0; alareuna: 1,375em;
19. yläreuna: 0; marginaali-pohja: 1,375rem; }

Katsotaanpa, mitä se antaa meille. Huomaa, kuinka koko teksti kohdistuu hienosti? Se ei istu perusviivalla, mutta sillä on ennustettava pystysuora rytmi. Se on mukava ja siisti.

Kuvien käsittely

Kuvat tekevät asioista monimutkaisempia. Katso, mitä rytmillemme tapahtuu, kun sisällytämme joitain. He häiritsevät sitä kuin hyppy ennätyksessä - tempo on oikea, mutta ajoitus on poissa. Kohdistus muuttuu. Tämä johtuu siitä, että kuvien korkeus ei todennäköisesti ole perusviivan moninkertainen, joten alareuna ei ole linjassa perusviivan kanssa.

Korjataksemme kaiken, mitä meidän on todella tehtävä, on lisätä marginaali jokaiselle kuvalle, jolloin marginaalin alaosa on linjassa ristikkomme kanssa. Mikä on tarpeeksi yksinkertainen automatisoimaan pienellä JavaScriptillä. Tässä on perussuunnitelma:

1. Selvitä kunkin kuvan korkeus.
2. Katso kuinka monta kertaa perusarvo jakautuu pystysuoraan tilaan, jonka kuva parhaillaan vie, ja hanki loput.
3. Vähennä loput perusviivasta, jotta saat siirtymän, jota meidän on sovellettava kuvaan.
4. Käytä siirtymää marginaalina kuvan alaosaan.

Kuvan pystysuoran tilan alaosa olisi nyt linjassa oikein perusviivaruudukon kanssa. Tässä on jQueryn perustoiminto, joka tekee tämän:

1. $ (ikkuna) .bind (’lataa’, function () {
2. $ ("img"). kukin (function () {
3. / * muuttujat * /
4. var this_img = $ (tämä);
5. var lähtötaso = 22;
6. var img_height = tämä_img.height ();
7. / * tee matematiikka * /
8. var jäännös = parseFloat (img_height% lähtötaso);
9. / * kuinka paljon meidän on lisättävä? * /
10. var offset = parseFloat (lähtötaso-loppuosa);
11. / * käytä marginaalia kuvaan * /
12. this_img.css ("marginaali-pohja", offset + "px");
13. });
14. });

Miksi ikkuna. sido linja? Koska meidän on odotettava kuvien lataamista, ennen kuin voimme luotettavasti saada niiden koot. Tässä on esimerkki tästä peruskoodista.

JQueryn parantaminen

Maailma on harvoin suoraviivaista, ja niin se käy täältä - meidän on käsiteltävä melkoisesti toteutuksen yksityiskohtia. Mikä vikaa toiminnallamme on? Paljon:

• Se tuottaa ikäviä tuloksia kuvilla, jotka ovat pikemminkin linjassa kuin kelluvia tai tukkeutuneita.
• Se näyttää bugiselta joillakin kuvilla, erityisesti säiliöissä.
• Se ei käsittele nestemäisiä asetteluja.
• Se ei ole kovin uudelleenkäytettävä.

Emme halua soveltaa tätä käyttäytymistä kuviin, jotka ovat linjassa, kuten esimerkin hymiöt. Sisäiset kuvat on kohdistettu niin, että alareuna on samalla perusviivalla kuin teksti (ei perusverkko). Tämä tarkoittaa, että kuva on siirtynyt pystysuunnassa. CSS ja JS eivät anna meille tapaa selvittää, missä tekstielementin perusviiva on, joten emme tiedä siirtymää. Meidän on jätettävä huomiotta sisäiset kuvat ja sovellettava korjaustamme vain kuviin, jotka on asetettu näyttö: lohko (onneksi kaikki kelluvat kuvat asetetaan automaattisesti näyttölohkoiksi).

Jos kuva on säilössä, kuvaan käytetty marginaali voi olla piilotettu säiliön ylivuotoasetusten vuoksi. Emme myöskään välttämättä halua marginaalia kuvaan, vaan konttielementtiin. Esimerkissä haluaisimme mieluummin marginaalit valkoisessa laatikossa kuin laatikon sisällä olevassa kuvassa, jotta voimme välttää outoja aukkoja, jotka näkyvät laatikossa.

Toiminto toimii vain kerran, mutta nestemäisessä kuvassa kuvien korkeus muuttuu, kun selain mitoitetaan uudelleen (yritä muuttaa esimerkin kokoa melko kapeaksi nähdäksesi tämän). Koon muuttaminen rikkoo rytmin uudelleen. Toiminnon on toimittava selaimen koon muuttamisen jälkeen ja sivun lataamisen jälkeen. Nestemäiset asettelut aiheuttavat myös muita ongelmia; kuvat voivat olla murto-osapisteitä korkeita, esimerkiksi 132,34 kuvapistettä. Tämä puolestaan ​​voi aiheuttaa odottamattomia tuloksia, vaikka käytämme murto-osaa (jos olet kiinnostunut, syitä tähän: trac.webkit.org/wiki/LayoutUnit). Joten meidän on hierottava kuva kokonaiseksi pikselikorkeudeksi, jotta vältetään murto-osapisteiden aiheuttamat asetteluvirheet.

Viimeiseksi meidän pitäisi tehdä tästä uudelleenkäytettävä toiminto. Itse asiassa, koska käytännön ratkaisu on monimutkainen teoreettisen ratkaisun suhteen, meidän pitäisi tehdä laajennus, jota voidaan käyttää uudelleen muissa projekteissa.

Viimeisestä esimerkistä löydät koodin, jolla kaikki tämä saavutetaan. JavaScript-laajennusta on kommentoitu voimakkaasti, jotta voit seurata mukana. Voit käyttää laajennusta kutsumalla sitä seuraavasti:

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

Tai voit pyytää laajennusta käyttämään marginaalia nimettyyn säilöön, jos sellainen on kuvan vanhempana:

1. $ (ikkuna) .bind (’lataa’, function () {
2. $ ("img"). baselineAlign ({säilö: ’. ponnahdusikkuna’});
3. });

Johtopäätös

Hyvän vertikaalisen rytmin säilyttäminen on hienovarainen, mutta tehokas suunnittelukäytäntö, jota käytetään säännöllisesti painatuksessa. Tiedät nyt perusperiaatteet, sinulla on toimiva tuntemus perusviivoista ja perusviivaruudukosta ja tiedät joitain CSS-tekstin asettelun ja tulostuksen rajoituksia. Tiedät myös, miten kiertää näitä rajoituksia, säveltää dokumenttisi haluamaasi vertikaaliseen rytmiin ja sinulla on työkalu, joka auttaa käsittelemään häiritsevää kuvasisältöä.

CSS: n kypsyessä saamme yhä enemmän ominaisuuksia painoserkkumme kanssa, joten tyyppien hyvä tuntemus tulee entistä tärkeämmäksi laadukkaiden verkkosivustojen luomisessa. Jos haluat oppia lisää tyypistä yleensä, suosittelen lämpimästi www.thinkingwithtype.com (ja ostamaan kirjan sen mukana). Jos pidät tyyppihoitoa koskevista CSS-artikkeleista, on olemassa lukuisia artikkeleita sekä täällä että muualla verkossa. Suosittelen myös pitämään kiinni uusimmista Mark Boultonista ja Elliot Jay Stocksista, jotka molemmat puhuvat usein nimenomaan verkkosuunnittelusta.

Pidä hauskaa!