Inhoud
- Type opmaken
- Verticaal ritme
- Het ritme leiden
- Omgaan met afbeeldingen
- Verbetering van de jQuery
- Conclusie
Ervan uitgaande dat u ontwerpt vanuit de inhoud, de eerste beslissing om uw ontwerp uit te voeren heeft om typegerelateerd te zijn. Zelfs door niet door een lettertype te kiezen, heeft u iets gedaan dat van invloed is op uw site. Type is de kern van print en webdesign, en het is complex; er zijn veel verzamelde termen, praktijken, regels en technieken die bij het goede gebruik ervan betrokken zijn. Dit artikel gaat over één techniek voor het beheren van één aspect van lettertypen, een techniek die moeilijk online te doen was, maar routinematig in drukwerk: het handhaven van een consistent verticaal ritme, waardoor we een professionele lay-out kunnen bereiken.
Type opmaken
In gedrukte vorm is voor elk item met een aanzienlijke hoeveelheid tekst de basis van het ontwerp waarschijnlijk een basislijnraster. Het wordt gebruikt om structuur aan te brengen op de pagina en om de verticale stroom van inhoud te begeleiden. Bijna alles wordt geplaatst ten opzichte van dat basislijnraster. Maakt u zich geen zorgen als u de termen niet herkent, niemand is onbekend met basislijnen of basislijnrasters; je kent ze al. Denk terug aan school, toen je ongetwijfeld op gelinieerd papier schreef - terwijl je schreef, plaatste je de onderkant van je brieven netjes op elk van de regels op het papier. De basislijn en het basislijnraster in actie. De basislijn is een denkbeeldige lijn waarop de onderkant van letters is uitgelijnd. Als je dit artikel nu bekijkt, zie je een basislijn, ook al is er niet echt een regel. Je brein plaatst er een voor je, daarom kun je zinnen lezen. De lijnen op gelinieerd papier? Ze zijn een basislijnraster. Recht zodat uw zinnen recht zijn en met regelmatige tussenpozen worden ingesteld, zodat uw tekst een regelmatig verticaal ritme heeft.
Verticaal ritme
Verticaal ritme bepaalt waar op de pagina tekst zich bevindt. Het is een onderdeel dat van invloed is op ons vermogen om tekstblokken te scannen en te lezen, en het helpt bij het informeren van onze emotionele reacties. Wanneer tekst een sterk verticaal ritme en een goede tussenruimte heeft, vinden we dat deze professioneel, weloverwogen, gezaghebbend en comfortabel om te lezen is. Wanneer tekst een slecht ritme en een slechte spatiëring heeft, vinden we dat deze minder doordacht, minder professioneel en vaak moeilijker te lezen is. Verticaal ritme is enerzijds bruikbaarheid en anderzijds esthetiek.
Het ritme leiden
Helaas is het web nog steeds het arme neefje van de print in termen van zijn vermogen om enkele fundamentele praktijken met betrekking tot lettertypen uit te voeren. Op internet kunnen we een basislijnraster niet op dezelfde manier gebruiken als een printontwerper (of een kind op school): we kunnen de basislijn van de tekst niet uitlijnen met het basislijnraster van een document. CSS heeft geen concept van een basislijnraster. Onze tekst zal dus niet precies op de lijnen van een basislijnraster staan. In plaats daarvan wordt het verticaal gecentreerd in de opening tussen de lijnen. Het is het beste wat internet kan doen.
Laten we praktisch worden met een voorbeelddocument. Ten eerste stellen we de beat in door een zichtbaar basislijnraster te maken. Hiervoor gebruiken we een herhalende achtergrondafbeelding om regelmatige horizontale lijnen met een onderlinge afstand van 22 pixels te tekenen:
html {achtergrond: #fff url (baseline_22.png); }
Hoera, we hebben ons gelinieerd papier!
U zult merken dat er niets in de rij staat. Om alles op één lijn te krijgen, willen we dat de onderkant van alle elementen een van die lijnen raakt. De eenvoudigste manier om dat te doen, is ervoor te zorgen dat alle elementen een verticale hoogte (inclusief marges) innemen die een veelvoud is van 22. Hier is wat CSS dat precies dat doet. Ik gebruik de REM-eenheid, maar geef een EM terug voor browsers die REM niet begrijpen. Ik neem ook het equivalent van de PX-eenheid op in opmerkingen. Als u REM / EM nog niet begrijpt, kunt u in plaats daarvan gewoon de px-waarden gebruiken - ze zijn allemaal gelijkwaardig:
html {/ * font-size: 16px, line-height: 22px * / font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif; achtergrond: #fff url (baseline_22.png); } h1, h2, h3, h4, h5, h6 {/ * margin-top en bottom zijn beide 22px * / / * em fallback * / margin: 1.375em 0; marge: 1.375rem 0; } h1 {/ * font-size is 32px, line-height is 44px * / / * em fallback * / font-size: 2em; lettergrootte: 2rem; lijnhoogte: 1.375; } h2 {/ * font-size is 26px, line-height is 44px * / / * em fallback * / font-size: 1.75em; lettergrootte: 1.75rem; lijnhoogte: 1.5714285714; } h3, h4, h5, h6 {/ * font-size is 22px, line-height is 22px * / / * em fallback * / font-size: 1.375em; lettergrootte: 1.375rem; regelhoogte: 1; } p, ul, blockquote {/ * ondermarge is 22px, regelhoogte wordt overgenomen van html (22px) * / / * em fallback * / margin-top: 0; marge-onder: 1.375em; margin-top: 0; marge-onder: 1.375rem; }
Laten we eens kijken wat dat ons oplevert. Merk op hoe alle tekst mooi uitgelijnd is? Het zit niet op de basislijn, maar het heeft een voorspelbaar verticaal ritme. Het is netjes en opgeruimd.
Omgaan met afbeeldingen
Afbeeldingen maken de zaken ingewikkelder.Kijk eens wat er met ons ritme gebeurt als we er een paar opnemen. Ze verstoren het als een sprong in een plaat - het tempo is goed, maar de timing is verkeerd. De uitlijning wordt verschoven. Dit komt omdat het onwaarschijnlijk is dat afbeeldingen een hoogte hebben die een veelvoud is van de basislijn, dus de onderrand komt niet overeen met ons basislijnraster.
Om het probleem op te lossen, hoeven we alleen maar een marge aan elke afbeelding toe te voegen, zodat de onderkant van de marge op één lijn ligt met ons raster. Dat is eenvoudig genoeg om te automatiseren met een beetje JavaScript. Dit is ons basisplan:
- Bereken de hoogte van elke afbeelding.
- Kijk hoe vaak de basislijnwaarde zich verdeelt in de verticale ruimte die de afbeelding momenteel inneemt, en pak de rest.
- Trek de rest van de basislijn af om de offset te geven die we op de afbeelding moeten toepassen.
- Pas de offset toe als een marge aan de onderkant van de afbeelding.
De onderkant van de verticale ruimte van de afbeelding wordt nu correct uitgelijnd met het basislijnraster. Hier is een basisfunctie in jQuery die dit doet:
$ (window) .bind ('load', function () {$ ("img"). each (function () {/ * variabelen * / var this_img = $ (this); var baseline = 22; var img_height = this_img.height (); / * doe de wiskunde * / var rest = parseFloat (img_height% baseline); / * hoeveel moeten we toevoegen? * / var offset = parseFloat (baseline-rest); / * pas de marge toe op de afbeelding * / this_img.css ("margin-bottom", offset + "px");});});
Waarom het window.bind lijn? Omdat we moeten wachten tot de afbeeldingen zijn geladen voordat we betrouwbaar hun afmetingen kunnen krijgen. Hier is een voorbeeld waarin deze basiscode wordt uitgevoerd.
Verbetering van de jQuery
De wereld is zelden rechttoe rechtaan, en zo blijkt hier - we hebben te maken met nogal wat implementatiedetails. Wat is er mis met de functie die we hebben? Genoeg:
- Het levert vervelende resultaten op met afbeeldingen die inline zijn in plaats van zwevend of blokkerend.
- Het lijkt buggy op sommige afbeeldingen, met name die in containers.
- Het heeft geen betrekking op vloeibare lay-outs.
- Het is niet erg herbruikbaar.
We willen dit gedrag niet toepassen op afbeeldingen die inline zijn, zoals de smiley in het voorbeeld. Inline afbeeldingen worden uitgelijnd zodat de onderrand op dezelfde basislijn zit als de tekst (niet het basislijnraster). Dat betekent dat de afbeelding verticaal wordt verschoven. Noch CSS noch JS bieden ons een manier om erachter te komen waar de basislijn voor een tekstelement is, dus we weten de offset niet. We moeten inline afbeeldingen negeren en onze correctie alleen toepassen op afbeeldingen die zijn ingesteld op display: blok (gelukkig wordt elke zwevende afbeelding automatisch ingesteld op weergaveblok).
Als een afbeelding zich in een container bevindt, kan de marge die op de afbeelding wordt toegepast, verborgen zijn vanwege overloopinstellingen op de container. Ook willen we misschien niet de marge op de afbeelding, maar op het containerelement. In het voorbeeld hebben we liever marges op het witte vak dan op de afbeelding in het vak, zodat we kunnen voorkomen dat er rare openingen in het vak verschijnen.
De functie werkt maar één keer, maar bij een vloeibaar ontwerp veranderen de afbeeldingen van hoogte wanneer de grootte van de browser wordt aangepast (probeer het formaat van het voorbeeld te wijzigen naar iets vrij smal om dit te zien). Het formaat wijzigen breekt het ritme opnieuw. We hebben de functie nodig om te worden uitgevoerd nadat het formaat van de browser is gewijzigd, evenals nadat de pagina is geladen. Vloeibare lay-outs introduceren ook andere problemen; afbeeldingen kunnen fractionele pixels hoog zijn, bijvoorbeeld 132.34px. Dat kan op zijn beurt leiden tot onverwachte resultaten, zelfs als we een fractionele marge toepassen (als u geïnteresseerd bent, volgt hier waarom: trac.webkit.org/wiki/LayoutUnit). We zullen de afbeelding dus moeten masseren tot een hele pixelhoogte om lay-outfouten te voorkomen die worden veroorzaakt door fractionele pixels.
Ten slotte moeten we er een meer herbruikbare functie van maken. In feite, met de complexiteit die een praktische oplossing nodig heeft boven de theoretische oplossing, zouden we een plug-in moeten maken die hergebruikt kan worden in andere projecten.
In het laatste voorbeeld vind je de code die dit allemaal bereikt. De plug-in JavaScript is zwaar becommentarieerd, zodat u kunt volgen. U kunt de plug-in gebruiken door deze als volgt te noemen:
$ (window) .bind (’load’, function () {$ ("img"). baselineAlign ();});
Of u kunt de plug-in vertellen om de marge toe te passen op een benoemde container, als deze bestaat als ouder van de afbeelding:
$ (window) .bind (’load’, function () {$ ("img"). baselineAlign ({container: ’. popup’});});
Conclusie
Het handhaven van een goed verticaal ritme is een subtiele maar effectieve ontwerppraktijk die regelmatig in drukwerk wordt gebruikt. U kent nu de basisprincipes, hebt praktische kennis van basislijnen en het basislijnraster en kent enkele beperkingen van CSS-tekstlay-out versus print. U weet ook hoe u deze beperkingen kunt omzeilen, uw documenten kunt samenstellen volgens elk verticaal ritme dat u maar wilt, en u hebt een hulpmiddel om te helpen omgaan met storende beeldinhoud.
Naarmate CSS ouder wordt, krijgen we steeds meer functies in lijn met onze gedrukte neven, dus een goed begrip van het type wordt belangrijker voor het maken van kwaliteitswebsites. Als je meer wilt weten over typen in het algemeen, raad ik ten zeerste www.thinkingwithtype.com aan (en het bijbehorende boek te kopen). Als u op zoek bent naar CSS-artikelen over typebehandeling, zijn er tal van artikelen, zowel hier als elders op internet. Ik zou ook aanraden om bij te praten over het laatste nieuws van Mark Boulton en Elliot Jay Stocks, die allebei vaak praten over type in relatie tot webdesign.
Veel plezier!
