Oprethold lodret rytme med CSS og jQuery

Indhold

• Udformningstype
• Lodret rytme
• Udfører rytmen
• Beskæftiger sig med billeder
• Forbedring af jQuery
• Konklusion

• Viden nødvendig: CSS, grundlæggende jQuery
• Kræver: jQuery, CSS, HTML
• Projekt tid: 30 minutter
• Download kildefiler

Forudsat at du designer fra indholdet ud, den første beslutning om at gennemføre dit design har at være type relateret. Selv ved ikke vælge et skrifttype, du har gjort noget, der påvirker dit websted. Type er kernen i udskrivning og webdesign, og den er kompleks; der er mange akkumulerede udtryk, praksis, regler og teknikker, der går i god brug. Denne artikel handler om en teknik til styring af et aspekt af typen, en, der har været svært at gøre online, men som er rutinemæssigt i tryk: opretholdelse af en ensartet lodret rytme, som igen giver os mulighed for at opnå et professionelt layout.

Udformningstype

På tryk, for ethvert element med en betydelig mængde tekst, er fundamentet for designet sandsynligvis et baseline-gitter. Det bruges til at bringe siden struktur og styrer den lodrette strøm af indhold. Næsten alt er placeret i forhold til det grundlæggende gitter. Bare rolig, hvis du ikke genkender vilkårene, ingen er ukendte med basislinjer eller basislinjenet; du kender allerede til dem. Tænk tilbage på skolen, når du utvivlsomt skrev på foret papir - som du skrev placerede du bunden af ​​dine breve pænt på hver af linjerne på papiret. Basislinjen og basislinjegitteret i aktion. Basislinjen er en imaginær linje, som bunden af ​​bogstaverne ligger på.Hvis du ser på denne artikel nu, vil du "se" en basislinje, selvom der ikke rigtig er en linje. Din hjerne sætter en der for dig, det er derfor, du kan læse sætninger. Linjerne på foret papir? De er et basislinjegitter. Lige så dine sætninger er lige og indstilles med jævne mellemrum, så din tekst har en regelmæssig lodret rytme.

Lodret rytme

Lodret rytme dikterer, hvor på siden teksten er placeret. Det er en komponent, der påvirker vores evne til at scanne og læse tekstblokke, og det hjælper med at informere vores følelsesmæssige reaktioner. Når teksten har en stærk lodret rytme og god afstand, føler vi, at den er professionel, betragtet, autoritativ og behagelig at læse. Når teksten har dårlig rytme og afstand, føler vi, at den er mindre overvejet, mindre professionel og ofte sværere at læse. Lodret rytme er en del brugbarhed og en del æstetik.

Udfører rytmen

Desværre er nettet stadig den fattige fætter til tryk med hensyn til dets evne til at vedtage nogle grundlæggende fremgangsmåder med hensyn til type. På nettet kan vi ikke bruge et baseline-gitter på samme måde som en printdesigner (eller et barn i skolen) gør - vi kan ikke justere tekstens baseline til et dokuments baseline-grid. CSS har intet koncept for et basislinjenet. Så vores tekst sidder ikke nøjagtigt på linjerne i et basislinjegitter. I stedet vil det være centreret lodret i afstanden mellem linjerne. Det er det bedste, internettet kan gøre.

Lad os blive praktiske med et eksempel på et dokument. For det første indstiller vi rytmen ved at lave et synligt baseline-gitter. For at gøre dette bruger vi et gentaget baggrundsbillede til at tegne regelmæssige vandrette linjer med 22 pix fra hinanden:

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

Hurra, vi har vores foret papir!

Du vil bemærke, at intet er i linje. For at få alt til at stemme overens, ønsker vi, at den nederste kant af alle elementer skal ramme en af ​​disse linjer. Den nemmeste måde at gøre det på er at sikre, at alle elementer optager en lodret højde (inklusive margener), der er et multiplum af 22. Her er nogle CSS, der gør netop det. Jeg bruger REM-enheden, men giver et EM-fallback for browsere, der ikke forstår REM. Jeg inkluderer også PX-enhedens ækvivalent i kommentarer. Hvis du endnu ikke forstår REM / EM, kan du bare bruge px-værdierne i stedet - de er alle ækvivalente:

1. html {/ * skriftstørrelse: 16 pixel, linjehøjde: 22 pixel * * /
2. skrifttype: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. baggrund: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margen-top og bund er begge 22 pixel * * /
6. / * em fallback * / margin: 1.375em 0;
7. margin: 1.375rem 0; }
8. h1 {/ * skriftstørrelse er 32 pixel, linjehøjde er 44 pixel * * /
9. / * em fallback * / font-size: 2em;
10. skriftstørrelse: 2rem; linjehøjde: 1.375; }
11. h2 {/ * skriftstørrelse er 26 pixel, linjehøjde er 44 pixel * * /
12. / * em fallback * / font-size: 1.75em;
13. skriftstørrelse: 1.75rem; linjehøjde: 1.5714285714; }
14. h3, h4, h5, h6 {/ * skriftstørrelse er 22 pixel, linjehøjde er 22 pixel * * /
15. / * em fallback * / font-size: 1.375em;
16. skriftstørrelse: 1.375rem; linjehøjde: 1; }
17. p, ul, blockquote {/ * bundmargen er 22 pixel, linjehøjde arves fra html (22 pixel) * /
18. / * em fallback * / margin-top: 0; margin-bund: 1.375 em;
19. margin-top: 0; margin-bund: 1.375rem; }

Lad os se på, hvad det giver os. Læg mærke til, hvordan al teksten stemmer overens? Det sidder ikke på basislinjen, men det har en forudsigelig lodret rytme. Det er pænt og pænt.

Beskæftiger sig med billeder

Billeder gør tingene mere komplicerede. Se hvad der sker med vores rytme, når vi inkluderer nogle. De forstyrrer det som et spring over en post - tempoet er rigtigt, men timingen er slået fra. Justeringen bliver forskudt. Det er fordi billeder sandsynligvis ikke har en højde, der er et multiplum af basislinjen, så den nederste kant stemmer ikke overens med vores basislinjegitter.

For at rette op på alt, hvad vi virkelig skal gøre, er at tilføje en margen til hvert billede, hvilket gør bunden af ​​margenen på linje med vores gitter. Hvilket er simpelt nok til at automatisere med lidt JavaScript. Her er vores grundlæggende plan:

1. Find ud af højden på hvert billede.
2. Se, hvor mange gange basisværdien deler sig i det lodrette rum, billedet i øjeblikket optager, og få resten.
3. Træk resten fra basislinjen for at give den forskydning, vi skal anvende på billedet.
4. Anvend forskydningen som en margen i bunden af ​​billedet.

Bunden af ​​billedets lodrette plads ville nu justeres korrekt med basislinjegitteret. Her er en grundlæggende funktion i jQuery, der gør dette:

1. $ (vindue) .bind ('load', funktion () {
2. $ ("img"). hver (funktion () {
3. / * variabler * /
4. var this_img = $ (dette);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * gør matematikken * /
8. var resten = parseFloat (img_højde% baseline);
9. / * hvor meget skal vi tilføje? * /
10. var offset = parseFloat (baseline-rest);
11. / * anvend margenen på billedet * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Hvorfor window.bind linje? Fordi vi skal vente, indtil billederne er indlæst, før vi pålideligt kan få deres størrelser. Her er et eksempel med denne grundlæggende kode, der kører.

Forbedring af jQuery

Verden er sjældent ligetil, og så viser det sig her - vi er nødt til at beskæftige os med en hel del implementeringsdetaljer. Hvad er der galt med den funktion, vi har? Masser:

• Det giver ubehagelige resultater med billeder, der er inline snarere end flydende eller blokeret.
• Det virker buggy på nogle billeder, specielt dem i containere.
• Det beskæftiger sig ikke med flydende layout.
• Det kan ikke meget genbruges.

Vi ønsker ikke at anvende denne adfærd på billeder, der er indbygget, som smiley ansigtet i eksemplet. Indbyggede billeder er justeret, så den nederste kant sidder på samme basislinje som teksten (ikke basislinjenettet). Det betyder, at billedet er forskudt lodret. Hverken CSS eller JS giver os en måde at finde ud af, hvor basislinjen for et tekstelement er, så vi ikke kender forskydningen. Vi skal ignorere indbyggede billeder og kun anvende vores rettelse på billeder, der er indstillet til display: blok (heldigvis indstilles ethvert flydende billede automatisk til at vise blokering).

Hvis et billede er i en container, kan margenen, der anvendes på billedet, skjules på grund af overløbsindstillinger på containeren. Vi vil muligvis ikke have margenen på billedet, men i stedet for containerelementet. I eksemplet vil vi hellere have margener på den hvide boks end på billedet inde i feltet, så vi kan undgå at få underlige huller, der vises i feltet.

Funktionen kører kun en gang, men på et flydende design ændrer billederne højden, når browseren ændres til størrelse (prøv at ændre størrelsen på eksemplet til noget ret snævert for at se dette). Ændring af størrelse bryder rytmen igen. Vi har brug for funktionen til at køre, efter at browserens størrelse er ændret såvel som efter sideindlæsning. Flydende layouts introducerer også andre problemer; billeder kan være brøkdelte pixels høje, for eksempel 132.34px. Dette kan igen medføre uventede resultater, selvom vi anvender en brøkmargen (hvis du er interesseret, her er hvorfor: trac.webkit.org/wiki/LayoutUnit). Så vi bliver nødt til at massere billedet i en hel pixelhøjde for at undgå layoutfejl forårsaget af brøkpunkter.

Endelig skal vi gøre dette til en mere genanvendelig funktion. Faktisk, med den kompleksitet, en praktisk løsning har brug for i forhold til den teoretiske løsning, skal vi lave et plug-in, der kan genbruges i andre projekter.

I det sidste eksempel finder du den kode, der opnår alt dette. Plugin-JavaScriptet er stærkt kommenteret, så du kan følge med. Du kan bruge pluginnet ved at kalde det som følger:

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

Eller du kan fortælle plug-in'en at anvende margenen på en navngivet container, hvis der findes en som forælder til billedet:

1. $ (vindue) .bind ('load', funktion () {
2. $ ("img"). baselineAlign ({container: ’. popup’});
3. });

Konklusion

At holde en god lodret rytme er en subtil, men effektiv designpraksis, der bruges regelmæssigt i tryk. Du kender nu de grundlæggende principper, har en fungerende viden om basislinjer og basislinjegitteret og kender nogle af begrænsningerne ved CSS-tekstlayout versus print. Du ved også, hvordan du kan omgå disse begrænsninger, komponere dine dokumenter til enhver lodret rytme, du kan lide, og du har et værktøj til at hjælpe med at håndtere forstyrrende billedindhold.

Efterhånden som CSS modnes, fortsætter vi med at få flere funktioner på linje med vores fætre, så en god forståelse af typen bliver vigtigere for oprettelse af kvalitetswebsteder. Hvis du gerne vil lære mere om type generelt, anbefaler jeg stærkt www.thinkingwithtype.com (og købe bogen til at gå med den). Hvis du er ude efter CSS-artikler om typebehandling, er der adskillige artikler både her og andre steder på nettet. Jeg vil også anbefale at indhente det seneste fra Mark Boulton og Elliot Jay Stocks, som begge ofte taler om type i forhold til webdesign specifikt.

Hav det sjovt!