Behåll vertikal rytm med CSS och jQuery

Innehåll

• Layout typ
• Vertikal rytm
• Genomföra rytmen
• Att hantera bilder
• Förbättra jQuery
• Slutsats

• Kunskap behövs: CSS, grundläggande jQuery
• Kräver: jQuery, CSS, HTML
• Projekttid: 30 minuter
• Ladda ner källfiler

Förutsatt att du designar från innehållet ut, det första beslutet att genomföra din design har att vara typrelaterad. Även av inte välja typsnitt har du gjort något som påverkar din webbplats. Typ är kärnan i tryck och webbdesign, och den är komplex; det finns många ackumulerade termer, praxis, regler och tekniker som används i dess goda användning. Den här artikeln handlar om en teknik för att hantera en typ av typ, en som det har varit svårt att göra online men är rutinmässigt i tryck: bibehålla en jämn vertikal rytm, vilket i sin tur gör det möjligt för oss att uppnå en professionell layout.

Layout typ

I tryck, för varje objekt med en stor mängd text, kommer grunden för designen sannolikt att vara ett baslinjegaller. Det används för att få strukturen till sidan och styr det vertikala flödet av innehåll. Nästan allt är placerat med avseende på det baslinjenätet. Oroa dig inte om du inte känner igen villkoren, ingen känner till baslinjer eller baslinjenät; du vet redan om dem. Tänk tillbaka till skolan när du utan tvekan skrev på fodrad papper - som du skrev placerade du botten på dina brev snyggt på var och en av raderna på papperet. Baslinjen och baslinjenätet i aktion. Baslinjen är en imaginär linje som bokstävernas botten riktar sig mot.Om du tittar på den här artikeln nu kommer du att "se" en baslinje, även om det inte finns någon rad. Din hjärna sätter en där åt dig, det är därför du kan läsa meningar. Linjerna på fodrat papper? De är ett baslinjegaller. Rakt så att dina meningar är raka och ställ in med jämna mellanrum så att din text har en regelbunden vertikal rytm.

Vertikal rytm

Vertikal rytm dikterar var på sidan texten finns. Det är en komponent som påverkar vår förmåga att skanna och läsa textblock, och det hjälper till att informera våra känslomässiga svar. När texten har en stark vertikal rytm och bra avstånd anser vi att den är professionell, ansedd, auktoritär och bekväm att läsa. När texten har dålig rytm och avstånd känner vi att den är mindre omtänksam, mindre professionell och ofta svårare att läsa. Vertikal rytm är en del användbarhet och en del estetik.

Genomföra rytmen

Tyvärr är webben fortfarande den stackars kusinen till tryck när det gäller dess förmåga att anta några grundläggande metoder för typ. På webben kan vi inte använda ett baslinjegaller på samma sätt som en utskriftsdesigner (eller ett barn i skolan) gör - vi kan inte anpassa textens baslinje till ett dokuments baslinjegaller. CSS har inget koncept för ett baslinjegaller. Så vår text kommer inte att ligga exakt på raderna i ett baslinjegaller. Istället centreras det vertikalt i mellanrummet mellan linjerna. Det är det bästa nätet kan göra.

Låt oss bli praktiska med ett exempeldokument. För det första sätter vi takten genom att skapa ett synligt baslinjegaller. För att göra detta använder vi en upprepande bakgrundsbild för att rita vanliga horisontella linjer med 22 bildpunkter:

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

Hurra, vi har vårt fodrade papper!

Du kommer att notera att ingenting står i linje. För att göra allt i linje vill vi att den nedre kanten på alla element ska träffa en av dessa rader. Det enklaste sättet att göra det är att se till att alla element tar en vertikal höjd (inklusive marginaler) som är en multipel av 22. Här är några CSS som gör just det. Jag använder REM-enheten, men ger en EM-reserv för webbläsare som inte förstår REM. Jag tar också med PX-enhetens motsvarighet i kommentarer. Om du ännu inte förstår REM / EM kan du bara använda px-värdena istället - de är alla likvärdiga:

1. html {/ * font-size: 16px, line-height: 22px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. bakgrund: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * marginal-topp och botten är båda 22 pixlar * /
6. / * em fallback * / margin: 1.375em 0;
7. marginal: 1.375rem 0; }
8. h1 {/ * fontstorlek är 32 pixlar, radhöjd är 44 pixlar * /
9. / * em fallback * / font-size: 2em;
10. font-storlek: 2rem; linjehöjd: 1.375; }
11. h2 {/ * fontstorlek är 26 pixlar, radhöjd är 44 pixlar * /
12. / * em fallback * / font-size: 1.75em;
13. font-storlek: 1,75rem; linjehöjd: 1.5714285714; }
14. h3, h4, h5, h6 {/ * teckenstorlek är 22 pixlar, radhöjd är 22 pixlar * /
15. / * em fallback * / font-size: 1.375em;
16. font-storlek: 1.375rem; linjehöjd: 1; }
17. p, ul, blockquote {/ * nedre marginalen är 22px, radhöjd ärvs från html (22px) * /
18. / * em fallback * / margin-top: 0; marginal-botten: 1.375em;
19. marginal-topp: 0; marginal-botten: 1.375rem; }

Låt oss ta en titt på vad det ger oss. Lägg märke till hur all text passar in? Den sitter inte vid baslinjen, men har en förutsägbar vertikal rytm. Det är snyggt och snyggt.

Att hantera bilder

Bilder gör saker mer komplicerade. Ta en titt vad som händer med vår rytm när vi inkluderar några. De stör det som ett hopp i en skiva - tempot är rätt men timingen är av. Inriktningen förskjuts. Det beror på att bilder sannolikt inte har en höjd som är en multipel av baslinjen, så den nedre kanten stämmer inte överens med vårt baslinjegaller.

För att fixa allt vi verkligen behöver göra är att lägga till en marginal i varje bild, vilket gör att botten av marginalen ligger i linje med vårt rutnät. Vilket är enkelt att automatisera med lite JavaScript. Här är vår grundläggande plan:

1. Räkna ut höjden på varje bild.
2. Se hur många gånger grundvärdet delas in i det vertikala utrymmet som bilden för närvarande tar upp och få resten.
3. Subtrahera resten från baslinjen för att ge den förskjutning vi behöver tillämpa på bilden.
4. Applicera förskjutningen som en marginal längst ner på bilden.

Den nedre delen av bildens vertikala utrymme skulle nu anpassas korrekt till baslinjegalleriet. Här är en grundläggande funktion i jQuery som gör detta:

1. $ (fönster) .bind ('ladda', funktion () {
2. $ ("img"). varje (funktion () {
3. / * variabler * /
4. var this_img = $ (detta);
5. var baslinje = 22;
6. var img_height = this_img.height ();
7. / * gör matematiken * /
8. var resten = parseFloat (img_höjd% baslinje);
9. / * hur mycket behöver vi lägga till? * /
10. var offset = parseFloat (baseline-rest);
11. / * tillämpa marginalen på bilden * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Varför window.bind linje? Eftersom vi måste vänta tills bilderna laddas innan vi på ett tillförlitligt sätt kan få deras storlekar. Här är ett exempel med den här grundläggande koden.

Förbättra jQuery

Världen är sällan rakt fram, och så visar det sig här - vi måste hantera en hel del detaljer om implementeringen. Vad är fel med funktionen vi har? Massor:

• Det ger otäcka resultat med bilder som är inline snarare än flytande eller blockerar.
• Det verkar buggigt på vissa bilder, särskilt de i behållare.
• Det handlar inte om flytande layouter.
• Det är inte särskilt återanvändbart.

Vi vill inte tillämpa detta beteende på bilder som är inbyggda, som smiley-ansiktet i exemplet. Inline bilder är inriktade så att den nedre kanten sitter på samma baslinje som texten (inte baslinjenätet). Det betyder att bilden är förskjuten vertikalt. Varken CSS eller JS ger oss ett sätt att ta reda på var baslinjen för ett textelement är, så vi vet inte förskjutningen. Vi måste ignorera inline-bilder och tillämpa vår fix endast på bilder som är inställda på display: blockera (lyckligtvis är varje flytande bild automatiskt inställd på att visa block).

Om en bild finns i en behållare kan marginalen som tillämpas på bilden döljas på grund av överflödsinställningar på behållaren. Vi kanske inte vill ha marginalen på bilden utan istället containerelementet. I exemplet skulle vi hellre ha marginaler på den vita rutan än på bilden inuti rutan, så vi kan undvika att få konstiga luckor som visas i rutan.

Funktionen körs bara en gång, men på en flytande design ändrar bilderna höjd när webbläsaren ändras på nytt (prova att ändra storlek på exemplet till något ganska smalt för att se detta). Att ändra storlek bryter rytmen igen. Vi behöver funktionen för att köras efter att webbläsaren har ändrats såväl som efter sidinläsning. Flytande layouter medför också andra problem; bilder kan vara bråkdelar höga, till exempel 132,34 pixlar. Det kan i sin tur orsaka oväntade resultat, även om vi tillämpar en bråkdelmarginal (om du är intresserad, här är varför: trac.webkit.org/wiki/LayoutUnit). Så vi kommer att behöva massera bilden till en hel pixelhöjd för att undvika layoutfel orsakade av bråkdelar.

Slutligen bör vi göra detta till en mer återanvändbar funktion. I själva verket, med den komplexitet som en praktisk lösning behöver över den teoretiska lösningen, bör vi göra ett plugin-program som kan återanvändas i andra projekt.

I det sista exemplet hittar du koden som uppnår allt detta. Plugin-JavaScript är starkt kommenterat så att du kan följa med. Du kan använda plugin-programmet genom att ringa det på följande sätt:

1. $ (fönster) .bind ('ladda', funktion () {
2. $ ("img"). baselineAlign ();
3. });

Eller så kan du berätta för plugin-programmet att använda marginalen på en namngiven behållare, om en finns som förälder till bilden:

1. $ (fönster) .bind ('ladda', funktion () {
2. $ ("img"). baselineAlign ({container: ’. popup’});
3. });

Slutsats

Att hålla en bra vertikal rytm är en subtil men effektiv designpraxis som används regelbundet i tryck. Du känner nu till de grundläggande principerna, har en fungerande kunskap om baslinjer och baslinjenätet och känner till några av begränsningarna för CSS-textlayout kontra utskrift. Du vet också hur du kan kringgå dessa begränsningar, komponera dina dokument till vilken vertikal rytm du vill, och du har ett verktyg som hjälper dig att hantera störande bildinnehåll.

När CSS mognar fortsätter vi att få fler funktioner i linje med våra utskrivna kusiner, så en god typförståelse blir viktigare för att skapa kvalitetswebbplatser. Om du vill lära dig mer om typ i allmänhet rekommenderar jag starkt www.thinkingwithtype.com (och köpa boken för att följa den). Om du är ute efter CSS-artiklar om typbehandling finns det många artiklar både här och någon annanstans på webben. Jag skulle också rekommendera att fånga det senaste från Mark Boulton och Elliot Jay Stocks, som båda ofta talar om typ i förhållande till webbdesign specifikt.

Ha så kul!