Fenntartja a függőleges ritmust a CSS és a jQuery segítségével

Tartalom

• Elrendezés típusa
• Függőleges ritmus
• A ritmus vezetése
• Képek kezelése
• A jQuery fejlesztése
• Következtetés

• Szükség van tudásra: CSS, alap jQuery
• Igényel: jQuery, CSS, HTML
• Projekt idő: 30 perc
• Forrásfájlok letöltése

Feltételezve, hogy a tartalomtól kezdve tervezel, az első döntés a tervezésedre van hogy típushoz kapcsolódjon. Még azáltal is nem betűtípust választva olyat tett, amely hatással van a webhelyére. A típus a nyomtatás és a webdesign alapja, és összetett; rengeteg felhalmozott kifejezés, gyakorlat, szabály és technika alkalmazható a megfelelő használatában. Ez a cikk a típus egy aspektusának kezelésére szolgáló egyik technikával foglalkozik, amelyet online nehezen tudtak megtenni, de nyomtatásban rutinszerű: konzisztens vertikális ritmus fenntartása, ami viszont professzionális elrendezést eredményezhet.

Elrendezés típusa

Nyomtatásban minden olyan cikk esetében, amely jelentős mennyiségű szöveget tartalmaz, a tervezés alapja valószínűleg egy alaprács. Arra szolgál, hogy struktúrát hozzon az oldalra, és irányítja a tartalom függőleges áramlását. Szinte minden az adott alaprácshoz képest helyezkedik el. Ne aggódjon, ha nem ismeri fel a kifejezéseket, senki sem ismeri az alapvonalakat vagy az alaprácsokat; már tudsz róluk. Gondoljon vissza az iskolába, amikor kétségtelenül bélelt papírra írt - miközben írt, betűinek alját szépen ráhelyezte a papír minden sorára. Az alapvonal és az alaprács működés közben. Az alapvonal egy képzeletbeli vonal, amelyre a betűk alja igazodik.Ha most megnézi ezt a cikket, akkor "meglátja" az alapvonalat, bár valójában nincs vonal. Az agyad tesz oda egyet neked, ezért olvashatsz mondatokat. A vonalak bélelt papíron? Ők egy alaprács. Egyenes, hogy a mondatai egyenesek legyenek, és szabályos időközönként állítsa be, hogy a szövege szabályos függőleges ritmusú legyen.

Függőleges ritmus

A függőleges ritmus meghatározza az oldal szövegének helyét. Ez az egyik összetevő, amely befolyásolja a szövegblokkok beolvasásának és olvasásának képességét, és segít tájékoztatni érzelmi válaszainkat. Ha a szövegnek vertikális a ritmusa és a térköz jó, akkor azt szakszerűnek, megfontoltnak, mérvadónak és kényelmesen olvashatónak érezzük. Ha a szöveg ritmusa és térköze rossz, azt érezzük, hogy kevésbé megfontolt, kevésbé profi és gyakran nehezebben olvasható. A vertikális ritmus egyrészt használhatóság, másrészt esztétika.

A ritmus vezetése

Sajnos az internet még mindig a nyomtatás szegény unokatestvére, tekintve, hogy képes bevezetni néhány alapvető gyakorlatot a típus tekintetében. Az interneten nem használhatunk alaprácsot ugyanúgy, ahogyan a nyomtatási tervező (vagy az iskola gyermeke) - nem tudjuk összehangolni a szöveg alapvonalát a dokumentum alapvonalának rácsával. A CSS-nek nincs fogalma az alaprácsról. Szóval, szövegünk nem pontosan az alapvonal rácsának vonalain fog ülni. Ehelyett függőlegesen középre kerül a vonalak közötti résbe. Ez a legjobb, amit az internet tehet.

Legyen gyakorlati egy példadokumentummal. Először állítsuk be az ütemet egy látható alaprács elkészítésével. Ehhez egy ismétlődő háttérképet használunk a szabályos vízszintes vonalak 22 képpontos távolságra történő megrajzolásához:

1. html {háttér: #fff url (alapvonal_22.png); }

Hurrá, megvan a bélelt papírunk!

Megjegyzi, hogy semmi nem áll össze. Ahhoz, hogy minden egy vonalba kerüljön, azt akarjuk, hogy az összes elem alsó éle eltalálja az egyik ilyen sort. Ennek legegyszerűbb módja, ha minden elem függőleges magasságot vesz fel (beleértve a margókat is), amely a 22 többszöröse. Íme néhány CSS, amely éppen ezt teszi. A REM egységet használom, de EM tartalékot adok azoknak a böngészőknek, amelyek nem értenek a REM-hez. A megjegyzésekbe belefoglalom a PX egység megfelelőjét is. Ha még nem ért a REM / EM-hez, akkor inkább a px értékeket használhatja - ezek mind egyenértékűek:

1. html {/ * font-size: 16px, line-height: 22px * /
2. betűtípus: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. háttér: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top és bottom egyaránt 22px * /
6. / * em tartalék * / margin: 1,375em 0;
7. margó: 1,375rem 0; }
8. h1 {/ * betűméret 32 ​​képpont, a vonal magassága 44 képpont * * /
9. / * em tartalék * / font-size: 2em;
10. betűméret: 2rem; vonal-magasság: 1,375; }
11. h2 {/ * betűméret 26 képpont, a vonal magassága 44 képpont * * /
12. / * em tartalék * / betűméret: 1,75em;
13. betűméret: 1,75rem; vonal-magasság: 1.5714285714; }
14. h3, h4, h5, h6 {/ * betűméret 22 képpont, a vonal magasság 22 képpont * * /
15. / * em tartalék * / font-size: 1.375em;
16. betűméret: 1.375rem; vonal-magasság: 1; }
17. p, ul, blockquote {/ * alsó margó 22px, a vonalmagasság a html-ből öröklődik (22px) * /
18. / * em tartalék * / margin-top: 0; margin-bottom: 1,375em;
19. margin-top: 0; margin-bottom: 1,375rem; }

Vessünk egy pillantást arra, amit ez ad nekünk. Figyelje meg, hogy az egész szöveg hogyan illeszkedik szépen? Nem ül az alapvonalon, de kiszámítható függőleges ritmusa van. Szép és rendezett.

Képek kezelése

A képek bonyolultabbá teszik a dolgot. Vessen egy pillantást arra, hogy mi történik a ritmusunkkal, ha felveszünk néhányat. Megzavarják, mint egy átugrás a lemezben - a tempó megfelelő, de az időzítés ki van kapcsolva. Az igazítás eltolódik. Ez azért van, mert nem valószínű, hogy a képek magassága az alapvonal többszöröse, ezért az alsó él nem egyezik meg az alapvonal rácsunkkal.

Annak kijavításához, amit valóban meg kell tennünk, egy margót kell hozzáadnunk minden képhez, így a margó alja a rácsunkkal egy vonalba kerül. Ami elég egyszerű ahhoz, hogy automatizáljon egy kis JavaScript-sel. Itt van az alaptervünk:

1. Kitalálja az egyes képek magasságát.
2. Nézze meg, hányszor oszlik meg az alapérték a kép által elfoglalt függőleges térben, és szerezze be a maradékot.
3. A maradékot vonjuk ki az alapvonalból, hogy megadjuk az eltolást, amelyet a képre kell alkalmaznunk.
4. Alkalmazza az eltolást margóként a kép aljára.

A kép függőleges terének alja most megfelelően illeszkedik az alapvonal rácsához. Itt van egy alapfunkció a jQuery-ben, amely ezt teszi:

1. $ (ablak) .bind (’betöltés’, function () {
2. $ ("img"). mindegyik (függvény () {
3. / * változók * /
4. var this_img = $ (ez);
5. var alapvonal = 22;
6. var img_height = this_img.height ();
7. / * matekozzon * /
8. var maradék = parseFloat (img_height% baseline);
9. / * mennyit kell hozzáfűznünk? * /
10. var offset = parseFloat (alapvonal-maradék);
11. / * alkalmazza a margót a képre * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Miért a ablak.köt vonal? Mert meg kell várni, amíg a képek betöltődnek, mielőtt megbízhatóan megkapnánk a méretüket. Íme egy példa ennek az alapkódnak a futtatására.

A jQuery fejlesztése

A világ ritkán halad előre, és így kiderül itt - jó néhány megvalósítási részlettel kell megküzdenünk. Mi a baj a rendelkezésünkre álló funkcióval? Bőven:

• Csúnya eredményeket produkál olyan képekkel, amelyek inline, és nem lebegnek vagy blokkolódnak.
• Néhány képen, különösen a konténerekben lévő képeken, hibásnak tűnik.
• Nem foglalkozik folyékony elrendezéssel.
• Nem nagyon használható fel újra.

Nem szeretnénk ezt a viselkedést olyan képekre alkalmazni, amelyek be vannak kapcsolva, például a mosolygós arc a példában. A beágyazott képek igazodnak, így az alsó szél ugyanazon az alapvonalon helyezkedik el, mint a szöveg (nem az alaprács). Ez azt jelenti, hogy a kép függőlegesen van eltolva. Sem a CSS, sem a JS nem ad módot arra, hogy megtudjuk, hol van a szöveges elem alapvonala, ezért nem ismerjük az eltolást. Figyelmen kívül kell hagynunk a beillesztett képeket, és csak azokra a képekre kell alkalmaznunk a javítást, amelyekre be van állítva kijelző: blokk (szerencsére minden lebegő kép automatikusan blokkolásra kerül).

Ha egy kép egy tárolóban van, akkor a képre alkalmazott margó rejtve lehet a tároló túlcsordulási beállításai miatt. Előfordulhat, hogy nem a margót akarjuk a képre, hanem a tároló elemre. A példában inkább margókkal rendelkezünk a fehér dobozon, mint a doboz belsejében lévő képen, így elkerülhetjük, hogy furcsa rések jelenjenek meg a mezőben.

A funkció csak egyszer futtatható, de folyékony kivitel esetén a képek magasságát megváltoztatja, amikor a böngésző átméretezik (ennek megtekintéséhez próbálja át méretezni a példát valami egészen keskenyre). Az átméretezés ismét megszakítja a ritmust. A funkciónak a böngésző átméretezése és az oldal betöltése után is futnia kell. A folyékony elrendezés más problémákat is felvet; a képek töredék pixelek lehetnek, például 132,34 képpont. Ez viszont váratlan eredményeket okozhat, még akkor is, ha töredék margót alkalmazunk (ha érdekli, íme: miért: trac.webkit.org/wiki/LayoutUnit). Tehát meg kell masszíroznunk a képet egy teljes képpont magasságig, hogy elkerüljük a töredékes pixelek okozta elrendezési hibákat.

Végül ezt egy újrafelhasználhatóbb funkcióvá kell tennünk. Valójában, mivel az elméleti megoldással szemben gyakorlati megoldásra van szükség, olyan plug-int kell készítenünk, amelyet más projektekben is újra fel lehet használni.

Az utolsó példában megtalálja a kódot, amely mindezt eléri. A plug-in JavaScriptet erősen kommentálták, így nyomon követheti. A beépülő modult az alábbiak szerint hívhatja:

1. $ (ablak) .bind (’betöltés’, function () {
2. $ ("img"). baselineAlign ();
3. });

Vagy megmondhatja a beépülő modulnak, hogy alkalmazza a margót egy megnevezett tárolóra, ha a kép szülőjeként létezik:

1. $ (ablak) .bind (’betöltés’, function () {
2. $ ("img"). baselineAlign ({tároló: ’. felugró’});
3. });

Következtetés

A jó függőleges ritmus megőrzése finom, de hatékony tervezési gyakorlat, amelyet rendszeresen használnak a nyomtatásban. Most már ismeri az alapelveket, jól ismeri az alapvonalakat és az alaprácsot, és ismeri a CSS szövegelrendezés és a nyomtatás néhány korlátját. Azt is tudja, hogyan lehet kiküszöbölni ezeket a korlátozásokat, összeállíthatja dokumentumait tetszőleges vertikális ritmusra, és van egy eszköze, amely segít a zavaró képtartalom kezelésében.

Ahogy a CSS érlelődik, továbbra is több funkciót kapunk nyomtatott unokatestvéreinkkel összhangban, így a típusok jó megértése fontosabbá válik a minőségi weboldalak létrehozása szempontjából. Ha többet szeretne megtudni a típusról általában, akkor nagyon ajánlom a www.thinkingwithtype.com oldalt (és megvásárolja a könyvet hozzá). Ha a típuskezelésről szóló CSS-cikkekre kíváncsi, számos cikk található itt és az interneten is. Azt is javasolnám, hogy jöjjön utána Mark Boulton és Elliot Jay Stocks legújabb hírének, akik mindketten gyakran beszélnek típusról kifejezetten a webdesign kapcsán.

Érezd jól magad!