Behalen vertikale Rhythmus mat CSS an jQuery

Inhalt

• Lay out Typ
• Vertikale Rhythmus
• Dirigent de Rhythmus
• Ëmgank mat Biller
• Verbesserung vun der jQuery
• Fazit

• Wëssen néideg: CSS, Basis jQuery
• Verlaangt: jQuery, CSS, HTML
• Projet Zäit: 30 Minutten
• Download Quell Dateien

Assuming Dir designt aus dem Inhalt eraus, déi éischt Entscheedung fir Äert Design ze beaflossen huet typ bezunn ze sinn. Och duerch net e Schrëftwielt auswielen Dir hutt eppes gemaach wat Äre Site beaflosst. Typ ass Kär fir ze drécken an Webdesign, an et ass komplex; et gi vill ugesammelt Begrëffer, Praktiken, Reegelen an Techniken, déi a säi gudde Gebrauch goen. Dësen Artikel beschäftegt sech mat enger Technik fir een Aspekt vum Typ ze managen, deen ass schwéier online ze maachen, awer ass routinéiert am Drock: e konsequente vertikale Rhythmus behalen, wat eis erlaabt et e professionelle Layout z'erreechen.

Lay out Typ

Am Drock, fir all Element mat enger grousser Quantitéit vum Text, ass d'Fundament vum Design méiglecherweis e Baseline-Gitter. Et gëtt benotzt fir Struktur op d'Säit ze bréngen a leet de vertikale Floss vum Inhalt. Bal alles ass a Bezuch op dat Baseline Gitter gesat. Maacht Iech keng Suergen wann Dir d'Begrëffer net erkennt, keen ass net vertraut mat Basislinnen oder Baseline Gitter; Dir wësst schonn iwwer hinnen. Denkt zréck an d'Schoul, wann Dir zweiflech op gezeechentem Pabeier geschriwwen hutt - wéi Dir geschriwwen hutt, hutt Dir de Buedem vun Äre Bréiwer uerdentlech op all d'Linn um Pabeier geluecht. D'Basislinn an d'Basislinegitter an Aktioun. D'Basislinn ass eng imaginär Linn op déi de Buedem vun de Buschtawen ausgeriicht ass.Wann Dir dësen Artikel elo kuckt, gesitt Dir eng Baseline, och wann et net wierklech eng Linn ass. Äert Gehir setzt een do fir Iech, dofir kënnt Dir Sätz liesen. D'Linnen op gezeechent Pabeier? Si sinn e Baseline Gitter. Riichtaus sou datt Är Sätz riicht sinn, a mat reegelméissegen Intervalle gesat sou datt Ären Text e reegelméissege vertikale Rhythmus huet.

Vertikale Rhythmus

Vertikale Rhythmus diktéiert wou op der Säit Text ass. Et ass eng Komponent déi eis Fäegkeet beaflosst ze scannen an Textblocken ze liesen, an et hëlleft eis emotional Äntwerten z'informéieren. Wann Text e staarke vertikale Rhythmus a gudder Abstand huet, fille mir et professionell, ugesinn, autoritär a bequem ze liesen. Wann Text e schlechte Rhythmus an Abstand huet, da fille mir et gëtt manner berécksiichtegt, manner professionell, an dacks méi schwéier ze liesen. Vertikale Rhythmus ass een Deel Usability an een Deel Ästhetik.

Dirigent de Rhythmus

Leider ass de Web nach ëmmer den armen Cousin vum Print a Saache seng Fäegkeet fir e puer grondleeënd Praktiken iwwer den Typ anzesetzen. Um Internet kënne mir kee Baseline Gitter benotzen op déiselwecht Manéier wéi e Printdesigner (oder e Kand an der Schoul) mécht - mir kënnen d'Basislinn vum Text net dem Baseline Gitter vun engem Dokument ausriichten. CSS huet kee Konzept vun engem Baseline Raster. Also, eisen Text wäert net exakt op de Linne vun engem Baseline Gitter sëtzen. Amplaz datt et vertikal an der Spalt tëscht den Zeilen zentréiert gëtt. Et ass dat Bescht wat de Web maache kann.

Loosst eis praktesch mat engem Beispill Dokument. Als éischt wäerte mir de Beat setzen andeems en e sichtbare Baseline Gitter mécht. Fir dëst ze maachen, benotze mir e widderhuelend Hannergrondbild fir regelméisseg horizontale Linnen 22px auserneen ze zéien:

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

Hurra, mir hunn eist Linnenpabeier!

Dir wäert feststellen datt näischt opgestallt ass. Fir alles opzeriichten, wëlle mir den ënneschte Rand vun allen Elementer fir eng vun dësen Zeilen ze treffen. Deen einfachste Wee fir dat ze maachen ass sécher datt all Elementer eng vertikal Héicht (abegraff Margen) ophuelen, déi e Multiple vun 22. Hei ass e puer CSS déi just dat maachen. Ech benotzen d'REM Eenheet, awer ginn en EM Fallback fir Browser déi net REM verstoen. Ech sinn och de PX-Eenheetsäquivalent a Kommentaren mat. Wann Dir REM / EM nach net versteet, da kënnt Dir just d'Px Wäerter amplaz benotzen - si sinn all gläichwäerteg:

1. html {/ * Schrëftgréisst: 16px, Linn-Héicht: 22px * /
2. Schrëft: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. Hannergrond: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * Margin-uewen an ënnen si béid 22px * /
6. / * em Fallback * * / Spillraum: 1.375em 0;
7. Spillraum: 1.375rem 0; }
8. h1 {/ * Schrëftgréisst ass 32px, Linn-Héicht ass 44px * /
9. / * em Fallback * * / Schrëftgréisst: 2em;
10. Schrëftgréisst: 2rem; Linn-Héicht: 1.375; }
11. h2 {/ * Schrëftgréisst ass 26px, Linn-Héicht ass 44px * /
12. / * em Fallback * * / Schrëftgréisst: 1.75em;
13. Schrëftgréisst: 1.75rem; Linn-Héicht: 1.5714285714; }
14. h3, h4, h5, h6 {/ * Schrëftgréisst ass 22px, Linnhéicht ass 22px * /
15. / * em Fallback * * / Schrëftgréisst: 1.375em;
16. Schrëftgréisst: 1.375rem; Linn-Héicht: 1; }
17. p, ul, blockquote {/ * ënne Margin ass 22px, Linn-Héicht ass vun HTML geierft (22px) * /
18. / * em Fallback * * / Rand-Top: 0; Spillraum-ënnen: 1.375em;
19. Spillraum-Top: 0; Spillraum-ënnen: 1.375rem; }

Loosst eis kucken wat dat eis gëtt. Notiz wéi den ganzen Text gutt ausgeriicht ass? Et sëtzt net op der Basislinn, awer et huet e viraussiichtleche vertikale Rhythmus. Et ass schéin an uerdentlech.

Ëmgank mat Biller

Biller maachen d'Saache méi komplizéiert. Kuckt wat geschitt mat eisem Rhythmus wa mir e puer abegraff. Si stéieren et wéi e Skip an engem Record - den Tempo ass richteg awer den Timing ass aus. D'Ausriichtung gëtt verréckelt. Et ass well Biller onwahrscheinlech eng Héicht hunn déi e Multiple vun der Basis ass, sou datt den ënneschte Rand net mat eisem Baseline Gitter steet.

Fir alles ze fixéieren wat mir wierklech brauchen ze maachen ass eng Margin fir all Bild bäizefügen, sou datt de Buedem vun der Margin mat eisem Gitter steet. Wat einfach genuch ass fir mat e bësse JavaScript ze automatiséieren. Hei ass eise Basisplang:

1. Erauszefannen der Héicht vun all Bild.
2. Kuckt wéi dacks de Baseline-Wäert sech an de vertikale Raum deelt, deen d'Bild aktuell hëlt, a kritt de Rescht.
3. Subtraktéiert de Rescht vun der Basis fir den Offset ze ginn deen mir op d'Bild uwenden mussen.
4. Fëllt den Offset als Rand op den ënneschten Deel vum Bild.

Déi ënnescht vum vertikale Raum vum Bild géif elo korrekt mat dem Baseline Gitter ausriichten. Hei ass eng Basisfunktioun am jQuery déi dëst mécht:

1. $ (Fënster) .bind ('lueden', Funktioun () {
2. $ ("img"). all (Funktioun () {
3. / * Verännerlechen * /
4. var this_img = $ (dësen);
5. var Baseline = 22;
6. var img_height = this_img.height ();
7. / * maacht d'Rechnen * /
8. var Rescht = parseFloat (img_height% baseline);
9. / * wéi vill musse mir derbäisetzen? * /
10. var offset = parseFloat (Baseline-Rescht);
11. / * applizéiert d'Margin op d'Bild * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Firwat den window.bind Linn? Well mir musse waarden bis d'Biller eropgeluede ginn ier mir hir Gréissten zouverléisseg kënne kréien. Hei ass e Beispill mat dësem Basiscode.

Verbesserung vun der jQuery

D'Welt ass selten direkt no vir, an et stellt sech hei eraus - mir hu mat e puer Implementéierungsdetailer ze dinn. Wat ass falsch mat der Funktioun déi mir hunn? Vill:

• Et produzéiert béis Resultater mat Biller déi inline sinn anstatt schwammen oder blockéieren.
• Et schéngt buggy op e puer Biller, speziell déi a Container.
• Et handelt net mat flëssege Layouten.
• Et ass net ganz nei benotzbar.

Mir wëllen dëst Verhalen net op Biller uleeën déi inline sinn, wéi d'Smiley Face am Beispill. Inline Biller sinn ausgeriicht sou datt den ënneschte Rand op der selwechter Basislinn sëtzt wéi den Text (net de Baseline Gitter). Dat heescht datt d'Bild vertikal kompenséiert gëtt. Weder CSS nach JS ginn eis e Wee fir erauszefannen wou d'Basis fir en Textelement ass, sou datt mir den Offset net kennen. Mir mussen Inline Biller ignoréieren, an eise Fix nëmmen op Biller uwenden, déi op gesat sinn uweisen: blockéieren (glécklecherweis gëtt all flott Bild automatesch gesat fir de Block ze weisen).

Wann e Bild an engem Container ass, kann d'Margin op d'Bild verstoppt ginn wéinst Iwwerflow-Astellungen um Container. Och kënne mir d'Marge net um Bild wënschen, awer op de Container Element amplaz. Am Beispill hu mir léiwer Margen op der wäisser Këscht wéi um Bild an der Këscht, sou datt mir komesch Lücken vermeiden déi an der Këscht erschéngen.

D'Funktioun leeft nëmmen eemol, awer op engem flëssegen Design änneren d'Biller Héicht wann de Browser nei geännert gëtt (probéiert d'Beispiller z'änneren op eppes ganz schmuel fir dëst ze gesinn). Gréisst änneren brécht de Rhythmus erëm. Mir brauchen d'Funktioun fir ze lafen nodeems de Browser geännert gouf wéi och no der Säitelaaschtung. Flësseg Layouten stellen och aner Probleemer vir; Biller kënne fraktionéiert Pixel héich sinn, zum Beispill 132.34px. Dat kann erëm onerwaart Resultater verursaachen, och wa mir e Brochdeel applizéieren (wann Dir interesséiert sidd, hei ass firwat: trac.webkit.org/wiki/LayoutUnit). Also, mir brauchen d'Bild an eng ganz Pixel Héicht ze masséieren fir Layout Käfer ze vermeiden verursaacht duerch fraktionéiert Pixel.

Lescht solle mir dëst zu enger méi benotzbaren Funktioun maachen. Tatsächlech, mat der Komplexitéit eng praktesch Léisung brauch iwwer d'theoretesch Léisung, solle mir e Plug-in maachen deen an anere Projeten nei benotzt ka ginn.

Am leschte Beispill fannt Dir de Code deen all dëst erreecht. De Plug-in JavaScript ass staark kommentéiert sou datt Dir kënnt verfollegen. Dir kënnt de Plug-in benotze andeems Dir en esou rufft:

1. $ (Fënster) .bind ('lueden', Funktioun () {
2. $ ("img"). baselineAlign ();
3. });

Oder, Dir kënnt de Plug-in soen d'Marge fir e benannte Container anzewenden, wann een als Elterendeel vum Bild existéiert:

1. $ (Fënster) .bind ('lueden', Funktioun () {
2. $ ("img"). baselineAlign ({Container: ’. Popup’});
3. });

Fazit

E gudde vertikale Rhythmus behalen ass eng subtil awer effektiv Designpraxis déi regelméisseg am Drock benotzt gëtt. Dir wësst elo d'Basisprinzipien, hutt e funktionnelt Wësse vu Baselines an dem Baseline Gitter, a wësst e puer vun de Limitatioune vum CSS Text Layout versus Print. Dir wësst och wéi Dir dës Limiten ëmgoe kënnt, Är Dokumenter zu all vertikale Rhythmus komponéiert, deen Dir wëllt, an Dir hutt en Tool fir ze hëllefen mam stéierende Bildinhalt ëmzegoen.

Wéi CSS reift, kréie mir weider méi Features in-line mat eise Print Cousins, sou datt e gutt Verständnis vum Typ méi wichteg gëtt fir Qualitéitswebsäiten ze schafen. Wann Dir méi iwwer Typ am Allgemenge léiere wëllt, empfeelen ech www.thinkingwithtype.com (a kafen d'Buch fir matzehuelen). Wann Dir no CSS Artikelen iwwer Typbehandlung sidd, ginn et vill Artikelen hei a soss am Internet. Ech géif och recommandéieren d'lescht vu Mark Boulton an Elliot Jay Stocks opzefänken, déi zwee dacks iwwer Typ a Relatioun mam Webdesign speziell schwätzen.

Vill Spaass!