Ruani ritmin vertikal me CSS dhe jQuery

Përmbajtje

• Lloji i hedhjes
• Ritmi vertikal
• Kryerja e ritmit
• Ballafaqimi me imazhe
• Përmirësimi i pyetësorit jQuery
• Përfundim

• Njohuritë e nevojshme: CSS, pyetje themelore jQuery
• Kërkon: jQuery, CSS, HTML
• Koha e projektit: 30 minuta
• Shkarkoni skedarët burimorë

Duke supozuar se ju krijoni nga përmbajtja jashtë, vendimi i parë për të ndikuar në dizajnin tuaj ka të jetë i lidhur me llojin. Edhe nga jo duke zgjedhur një lloj shkrimi keni bërë diçka që ndikon në faqen tuaj. Lloji është thelbësor për të shtypur dhe dizajn në internet, dhe është kompleks; ka shumë terma, praktika, rregulla dhe teknika të akumuluara që përdoren mirë. Ky artikull ka të bëjë me një teknikë për menaxhimin e një aspekti të llojit, një që është bërë e vështirë për t'u bërë në internet, por është rutinë në shtyp: mbajtja e një ritmi të qëndrueshëm vertikal, i cili nga ana tjetër na lejon të arrijmë një plan urbanistik profesional.

Lloji i hedhjes

Në shtyp, për çdo artikull me një sasi të konsiderueshme teksti, themeli i dizajnit ka të ngjarë të jetë një rrjet bazë. Përdoret për të sjellë strukturën në faqe dhe udhëzon rrjedhën vertikale të përmbajtjes. Pothuajse gjithçka është vendosur në lidhje me atë rrjet bazë. Mos u shqetësoni nëse nuk i njihni termat, askush nuk është i panjohur me linjat bazë ose rrjetet bazë; ju tashmë dini për to. Mendoni përsëri në shkollë, kur padyshim keni shkruar në letër të rreshtuar - ndërsa keni shkruar, keni vendosur pjesën e poshtme të letrave tuaja në çdo rresht në letër. Rrjeti bazë dhe ai bazë në veprim. Vija fillestare është një vijë imagjinare mbi të cilën renditet fundi i shkronjave.Nëse e shikoni këtë artikull tani, do të "shihni" një bazë, edhe pse në të vërtetë nuk ka një linjë. Truri juaj vendos një aty për ju, kjo është arsyeja pse ju mund të lexoni fjali. Linjat në letër të rreshtuar? Ata janë një rrjet bazë. Drejt, në mënyrë që fjalitë tuaja të jenë të drejta, dhe të vendosen në intervale të rregullta, në mënyrë që teksti juaj të ketë një ritëm vertikal të rregullt.

Ritmi vertikal

Ritmi vertikal dikton se ku ndodhet teksti i faqes. Isshtë një komponent që ndikon në aftësinë tonë për të skanuar dhe lexuar blloqe teksti, dhe ndihmon në informimin e përgjigjeve tona emocionale. Kur teksti ka një ritëm të fortë vertikal dhe hapësirë ​​të mirë, ndiejmë se është profesional, i konsideruar, autoritar dhe i këndshëm për t’u lexuar. Kur teksti ka ritëm dhe hapësirë ​​të dobët, ne mendojmë se është më pak i konsideruar, më pak profesional dhe shpesh më i vështirë për t’u lexuar. Ritmi vertikal është një pjesë e përdorshmërisë dhe një pjesë estetikë.

Kryerja e ritmit

Fatkeqësisht, faqja në internet është akoma kushëriri i dobët i shtypjes për sa i përket aftësisë së tij për të miratuar disa praktika themelore në lidhje me llojin. Në ueb nuk mund të përdorim një rrjet fillestar në të njëjtën mënyrë që bën një stilist (ose fëmijë në shkollë) - nuk mund ta rreshtojmë bazën fillestare të tekstit në rrjetin bazë të një dokumenti. CSS nuk ka asnjë koncept të një rrjeti bazë. Pra, teksti ynë nuk do të ulet saktësisht në linjat e një rrjeti bazë. Në vend të kësaj, ajo do të përqendrohet vertikalisht në hendekun midis linjave. Theshtë më e mira që mund të bëjë interneti.

Le të bëhemi praktikë me një dokument shembull. Së pari, ne do të vendosim ritmin duke bërë një rrjet bazë të dukshëm. Për ta bërë këtë do të përdorim një imazh të përsëritur të sfondit për të nxjerrë linja të rregullta horizontale 22 px larg:

1. html {sfondi: #fff url (baza_22.png); }

Urra, ne kemi letrën tonë të rreshtuar!

Ju do të vini re se asgjë nuk rreshtohet. Për të bërë që gjithçka të rreshtohet, duam që buza e poshtme e të gjithë elementëve të godasë njërën nga ato linja. Mënyra më e lehtë për ta bërë këtë është të siguroheni që të gjithë elementët të marrin një lartësi vertikale (përfshirë kufijtë) që është shumëfishi i 22. Ja disa CSS që e bëjnë pikërisht atë. Po përdor njësinë REM, por po jap një kthim kthyes EM për shfletuesit që nuk e kuptojnë REM. Po përfshij edhe ekuivalentin e njësisë PX në komente. Nëse nuk e kuptoni akoma REM / EM, atëherë mund të përdorni vetëm vlerat px - ato janë të gjitha ekuivalente:

1. html {/ * madhësia e shkronjave: 16px, lartësia e vijës: 22px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. sfondi: #fff url (fillimi_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margjina e sipërme dhe e poshtme janë të dyja 22px * /
6. / * em rikthim * / diferencë: 1.375em 0;
7. diferencë: 1.375rem 0; }
8. madhësia e shkronjave h1 {/ * është 32px, lartësia e vijës është 44px * /
9. / * em rikthim * / font-size: 2em;
10. madhësia e shkronjave: 2rem; lartësia e vijës: 1.375; }
11. madhësia e shkronjave h2 {/ * është 26px, lartësia e vijës është 44px * /
12. / * em rikthim * / font-size: 1,75em;
13. madhësia e shkronjave: 1.75rem; lartësia e vijës: 1.5714285714; }
14. h3, h4, h5, h6 {/ * madhësia e shkronjave është 22px, lartësia e vijës është 22px * /
15. / * em rikthim * / font-size: 1.375em;
16. madhësia e shkronjave: 1.375rem; lartësia e vijës: 1; }
17. p, ul, blockquote {/ * marzhi i poshtëm është 22px, lartësia e vijës trashëgohet nga html (22px) * /
18. / * em rikthim * / margin-top: 0; margin-fund: 1.375em;
19. margin-top: 0; margin-fund: 1.375rem; }

Le të hedhim një vështrim në atë që na jep. Vini re se si i gjithë tekstili rreshtohet bukur? Nuk qëndron në vijën fillestare, por ka një ritëm vertikal të parashikueshëm. Niceshtë e bukur dhe e rregullt.

Ballafaqimi me imazhe

Imazhet i bëjnë gjërat më të komplikuara. Shikoni se çfarë ndodh me ritmin tonë kur përfshijmë disa. Ata e prishin atë si një kapërcim në një rekord - tempo është e duhur, por koha është e fikur. Rreshtimi zhvendoset. Becauseshtë për shkak se imazhet nuk ka gjasa të kenë një lartësi që është shumëfish i linjës bazë, kështu që buza e poshtme nuk përputhet me rrjetin tonë bazë.

Për ta rregulluar gjithçka që duhet të bëjmë është të shtojmë një diferencë në secilën imazh, duke e bërë pjesën e poshtme të diferencës me rrjetin tonë. E cila është mjaft e thjeshtë për tu automatizuar me pak JavaScript. Këtu është plani ynë themelor:

1. Shikoni lartësinë e secilës imazh.
2. Shikoni sa herë vlera fillestare ndahet në hapësirën vertikale që zë imazhi aktualisht dhe merrni pjesën e mbetur.
3. Zbrit pjesën e mbetur nga fillimi për të dhënë kompensimin që duhet të zbatojmë në imazh.
4. Zbatoni kompensimin si një diferencë në pjesën e poshtme të figurës.

Pjesa e poshtme e hapësirës vertikale të figurës tani do të rreshtohet në mënyrë korrekte me rrjetin bazë. Këtu është një funksion themelor në jQuery që e bën këtë:

1. $ (dritarja) .bind ('ngarkesa', funksioni () {
2. $ ("img"). secili (funksioni () {
3. / * variablat * /
4. var this_img = $ (kjo);
5. var baza = 22;
6. var img_height = this_img.height ();
7. / * bëj matematikën * /
8. var mbetje = parseFloat (img_height% fillestar);
9. / * sa duhet të shtojmë? * /
10. var kompensimi = parseFloat (fillimi-mbetja);
11. / * aplikoni marzhin në imazh * /
12. this_img.css ("margjina-fund", kompensuar + "px");
13. });
14. });

Pse dritarja.lidhni linjë? Sepse duhet të presim derisa të ngarkohen imazhet para se të mund të marrim me madhësi madhësitë e tyre. Këtu është një shembull me ekzekutimin e këtij kodi bazë.

Përmirësimi i pyetësorit jQuery

Bota është e rrallë drejt, dhe kështu rezulton këtu - ne duhet të merremi me mjaft detaje të zbatimit. Çfarë nuk shkon me funksionin që kemi? Bollëk:

• Ajo prodhon rezultate të këqija me imazhe që janë të vendosura më shumë sesa të fluturojnë ose të bllokuara.
• Duket me probleme në disa imazhe, posaçërisht ato në kontejnerë.
• Nuk merret me paraqitjet e lëngshme.
• Nuk është shumë e ripërdorshme.

Ne nuk duam ta zbatojmë këtë sjellje në imazhe që janë brenda, si fytyra e qeshur në shembull. Imazhet inline janë drejtuar në mënyrë që buza e poshtme të ulet në të njëjtën bazë fillestare si teksti (jo rrjeti bazë). Kjo do të thotë që imazhi kompensohet vertikalisht. As CSS dhe as JS nuk na japin një mënyrë për të gjetur se ku është baza fillestare për një element teksti, kështu që ne nuk e dimë kompensimin. Ne duhet të injorojmë imazhet inline, dhe të zbatojmë rregullimin tonë vetëm për imazhet që janë vendosur në ekran: bllok (për fat të mirë, çdo imazh i lëvizur vendoset automatikisht për të shfaqur bllokun).

Nëse një imazh është në një enë, marzhi i aplikuar në imazh mund të jetë i fshehur për shkak të cilësimeve të tejmbushjes në kontejner. Gjithashtu, mund të mos duam marzhin në figurë, por në vend të tij në elementin e kontejnerit. Në shembull, më mirë të kemi kufij në kutinë e bardhë sesa në imazhin brenda kutisë, kështu që të shmangim marrjen e boshllëqeve të çuditshme që shfaqen në kutinë.

Funksioni ekzekutohet vetëm një herë, por në një dizajn të lëngshëm, imazhet ndryshojnë lartësi kur shfletuesi ripërmasohet (provoni ta ndryshoni shembullin në diçka mjaft të ngushtë për ta parë këtë). Ndryshimi i madhësisë prish ritmin përsëri. Na duhet që funksioni të ekzekutohet pasi të ndryshohet madhësia e shfletuesit, si dhe pas ngarkimit të faqes. Shtrirjet e lëngshme gjithashtu paraqesin probleme të tjera; imazhet mund të jenë të larta piksele fraksionale, për shembull 132.34px. Kjo nga ana tjetër mund të shkaktojë rezultate të papritura, edhe nëse aplikojmë një diferencë të pjesshme (nëse jeni të interesuar, ja pse: trac.webkit.org/wiki/LayoutUnit). Pra, do të duhet të masazhojmë imazhin në një lartësi të plotë të pikselëve për të shmangur defektet në faqosjen e shkaktuar nga pikselët e pjesshëm.

Së fundmi, ne duhet ta bëjmë këtë në një funksion më të ripërdorshëm. Në fakt, me kompleksitetin që i nevojitet një zgjidhje praktike mbi zgjidhjen teorike, ne duhet të bëjmë një shtesë që mund të përdoret përsëri në projekte të tjera.

Në shembullin e fundit do të gjeni kodin që i arrin të gjitha këto. Java plug-in JavaScript është shumë e komentuar kështu që ju mund të ndiqni së bashku. Mund të përdorni shtojcën duke e thirrur si më poshtë:

1. $ (dritare) .bind ('ngarkesë', funksioni () {
2. $ ("img"). baselineAlign ();
3. });

Ose, mund t'i thuash shtojcës që të zbatojë diferencën në një enë të emëruar, nëse ekziston si prind i imazhit:

1. $ (dritare) .bind ('ngarkesë', funksioni () {
2. $ ("img"). baselineAlign ({enë: '. popup'});
3. });

Përfundim

Mbajtja e një ritmi të mirë vertikal është një praktikë delikate por efektive e dizajnit që përdoret rregullisht në shtyp. Tani i njihni parimet themelore, keni një njohuri pune për linjat bazë dhe rrjetin bazë dhe dini disa nga kufizimet e paraqitjes së tekstit CSS kundrejt shtypjes. Ju gjithashtu dini të punoni rreth këtyre kufizimeve, të kompozoni dokumentet tuaja në çdo ritëm vertikal që ju pëlqen dhe keni një mjet për të ndihmuar në trajtimin e përmbajtjes përçarëse të imazhit.

Ndërsa CSS piqet, ne vazhdojmë të marrim më shumë karakteristika në përputhje me kushërinjtë tanë të shtypur, kështu që një kuptim i mirë i llojit do të bëhet më i rëndësishëm për krijimin e faqeve të internetit me cilësi. Nëse dëshironi të mësoni më shumë rreth llojit në përgjithësi, unë rekomandoj shumë www.thinkingwithtype.com (dhe blerjen e librit për të shkuar me të). Nëse jeni pas artikujve të CSS në lidhje me trajtimin e tipit, ka artikuj të shumtë këtu dhe gjetkë në internet. Unë gjithashtu do të rekomandoja të ndiqja më të fundit nga Mark Boulton dhe Elliot Jay Stocks, të dy flasin shpesh për llojin në lidhje me dizajnin e faqes në internet.

Argëtohuni!