Mantingueu el ritme vertical amb CSS i jQuery

Content

• Tipus de distribució
• Ritme vertical
• Conducció del ritme
• Tractar les imatges
• Millora de la jQuery
• Conclusió

• Coneixements necessaris: CSS, jQuery bàsic
• Requereix: jQuery, CSS, HTML
• Temps del projecte: 30 minuts
• Descarregueu fitxers font

Suposant que heu dissenyat a partir del contingut, la primera decisió és afectar el vostre disseny té estar relacionat amb el tipus. Fins i tot per no en triar una tipografia, heu fet alguna cosa que afecti el vostre lloc. El tipus és bàsic per a la impressió i el disseny web, i és complex; hi ha molts termes, pràctiques, regles i tècniques acumulades que fan un bon ús. Aquest article tracta d’una tècnica per gestionar un aspecte del tipus, que ha estat difícil de fer en línia, però que és habitual en la impressió: mantenir un ritme vertical consistent, que al seu torn ens permet assolir un disseny professional.

Tipus de distribució

En impressió, per a qualsevol element amb una quantitat considerable de text, és probable que la base del disseny sigui una quadrícula de base. S'utilitza per portar l'estructura a la pàgina i guiar el flux vertical de contingut. Gairebé tot es col·loca respecte a aquesta quadrícula de línia de base. No us preocupeu si no reconeixeu els termes, ningú no està familiaritzat amb les línies de base ni les quadrícules de base; ja en sabeu. Penseu de nou a l’escola quan, sens dubte, escrivíeu sobre paper folrat: mentre escrivíeu, col·locàveu perfectament la part inferior de les vostres cartes a cadascuna de les línies del paper. La línia de base i la quadrícula de base en acció. La línia de base és una línia imaginària sobre la qual s’alinea la part inferior de les lletres.Si mireu aquest article ara, "veureu" una línia de base, tot i que realment no hi ha cap línia. El vostre cervell us en posa un, per això podeu llegir frases. Les línies sobre paper folrat? Són una quadrícula de base. Rectes perquè les frases siguin rectes i ajustades a intervals regulars perquè el text tingui un ritme vertical regular.

Ritme vertical

El ritme vertical dicta on es troba el text de la pàgina. És un dels components que afecta la nostra capacitat d’escanejar i llegir blocs de text i ajuda a informar les nostres respostes emocionals. Quan el text té un fort ritme vertical i un bon espaiat, sentim que és professional, considerat, autoritari i còmode de llegir. Quan el text té un ritme i un espaiador deficients, sentim que és menys considerat, menys professional i sovint és més difícil de llegir. El ritme vertical és una part d’usabilitat i una part d’estètica.

Conducció del ritme

Malauradament, el web segueix sent el primer cosí imprès pel que fa a la seva capacitat de promulgar algunes pràctiques fonamentals pel que fa al tipus. Al web no podem utilitzar una quadrícula de línia de la mateixa manera que ho fa un dissenyador d’impressions (o un nen a l’escola): no podem alinear la línia de base del text a la quadrícula de base d’un document. CSS no té cap concepte de quadrícula de base. Per tant, el nostre text no s’assentarà exactament a les línies d’una quadrícula de base. En el seu lloc, es centrarà verticalment a la bretxa entre les línies. És el millor que pot fer el web.

Anem a la pràctica amb un document d’exemple. En primer lloc, establirem el ritme fent una quadrícula de línia visible. Per fer-ho, utilitzarem una imatge de fons que es repeteix per dibuixar línies horitzontals regulars separades de 22 px:

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

Hola, tenim el nostre paper folrat!

Notareu que no hi ha res en línia. Per fer que tot s’alini, volem que la vora inferior de tots els elements colpegi una d’aquestes línies. La manera més senzilla de fer-ho és assegurar-se que tots els elements ocupen una alçada vertical (inclosos els marges) que sigui múltiple de 22. A continuació, es mostren alguns CSS que fan això. Estic fent servir la unitat REM, però ofereixo una alternativa alternativa als navegadors que no entenen REM. També incloc l’equivalent de la unitat PX als comentaris. Si encara no enteneu REM / EM, podríeu fer servir els valors px; tots són equivalents:

1. html {/ * font-size: 16 px, alçada de línia: 22 px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. fons: URL #fff (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top i bottom són 22px * /
6. / * em alternativa * / margin: 1.375em 0;
7. marge: 1.375rem 0; }
8. h1 {/ * la mida del tipus de lletra és de 32 px, l'alçada de la línia és de 44 px * /
9. / * em alternativa * / font-size: 2em;
10. mida de la lletra: 2rem; alçada de línia: 1.375; }
11. h2 {/ * la mida del tipus de lletra és de 26 px, l'alçada de la línia és de 44 px * /
12. / * em alternativa * / font-size: 1,75em;
13. mida de la lletra: 1,75rem; alçada de línia: 1,5714285714; }
14. h3, h4, h5, h6 {/ * la mida de la font és de 22 px, l'alçada de la línia és de 22 px * /
15. / * em alternativa * / font-size: 1.375em;
16. mida de la lletra: 1.375rem; alçada de línia: 1; }
17. p, ul, blockquote {/ * el marge inferior és de 22 px, l'alçada de la línia s'hereta de html (22 px) * /
18. / * em alternativa * / margin-top: 0; marge inferior: 1.375em;
19. marge superior: 0; marge-fons: 1.375rem; }

Fem una ullada al que això ens proporciona. Fixeu-vos en com tot el text s’alinea molt bé? No se situa a la línia de base, però té un ritme vertical previsible. És agradable i ordenat.

Tractar les imatges

Les imatges compliquen les coses. Feu una ullada al que passa amb el nostre ritme quan hi inclourem alguns. Ho interrompen com un salt en un disc: el tempo és correcte, però el temps està desactivat. L'alineació es canvia. Es deu al fet que és improbable que les imatges tinguin una alçada múltiple de la línia de base, de manera que la vora inferior no s’alinea amb la nostra quadrícula de línia de base.

Per solucionar-ho, tot el que realment hem de fer és afegir un marge a cada imatge, fent que la part inferior del marge quedi alineada amb la nostra quadrícula. Que és prou senzill com per automatitzar-lo amb una mica de JavaScript. Aquí teniu el nostre pla bàsic:

1. Esbrineu l’alçada de cada imatge.
2. Vegeu quantes vegades el valor de la línia de base es divideix en l’espai vertical que ocupa actualment la imatge i obteniu la resta.
3. Resteu la resta de la línia de base per donar el desplaçament que hem d'aplicar a la imatge.
4. Apliqueu el desplaçament com a marge a la part inferior de la imatge.

La part inferior de l’espai vertical de la imatge ara s’alinearia correctament amb la quadrícula de línia de base. A continuació, es mostra una funció bàsica a jQuery:

1. $ (finestra) .bind ('carregar', funció () {
2. $ ("img"). cadascun (function () {
3. /* les variables */
4. var this_img = $ (this);
5. var basal = 22;
6. var img_height = this_img.height ();
7. / * fer les matemàtiques * /
8. var resto = parseFloat (img_height% baseline);
9. / * quant hem d'afegir? * /
10. var offset = parseFloat (línia base-resta);
11. / * apliqueu el marge a la imatge * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Per què el window.bind línia? Perquè hem d’esperar fins que es carreguin les imatges per poder obtenir les mides de manera fiable. Aquí teniu un exemple amb aquest codi bàsic en execució.

Millora de la jQuery

El món poques vegades és senzill i, per tant, resulta aquí: hem de tractar força detalls d’implementació. Què passa amb la funció que tenim? Un munt:

• Produeix resultats desagradables amb imatges en línia en lloc de flotants o bloquejades.
• Sembla un error en algunes imatges, concretament en les contenidors.
• No tracta els dissenys de líquids.
• No és molt reutilitzable.

No volem aplicar aquest comportament a les imatges en línia, com la cara somrient de l’exemple. Les imatges en línia estan alineades de manera que la vora inferior es troba a la mateixa línia de base que el text (no la graella de línia de base). Això significa que la imatge es desplaça verticalment. Ni CSS ni JS no ens ofereixen una manera d’esbrinar on es troba la línia de base d’un element de text, de manera que no sabem la compensació. Hem d’ignorar les imatges en línia i aplicar la nostra solució només a les imatges configurades a pantalla: bloc (afortunadament, qualsevol imatge flotant es configura automàticament per mostrar el bloc).

Si una imatge es troba en un contenidor, el marge aplicat a la imatge es pot amagar a causa de la configuració de desbordament del contenidor. A més, és possible que no vulguem el marge de la imatge, sinó de l’element contenidor. A l’exemple, preferim tenir marges al quadre blanc que a la imatge que hi ha dins del quadre, de manera que podem evitar que apareguin buits estranys que apareguin al quadre.

La funció només s'executa una vegada, però en un disseny líquid, les imatges canvien d'alçada quan el navegador es redimensiona (proveu de canviar la mida de l'exemple a una cosa bastant estreta per veure-ho). Redimensionar trenca el ritme de nou. Necessitem que la funció s'executi després de canviar la mida del navegador i després de carregar la pàgina. Els dissenys de líquids també introdueixen altres problemes; les imatges poden tenir una alçada fraccionada de píxels, per exemple 132,34 px. Això al seu torn pot provocar resultats inesperats, fins i tot si apliquem un marge fraccionat (si us interessa, aquí teniu el motiu: trac.webkit.org/wiki/LayoutUnit). Per tant, haurem de fer massatges a la imatge a tota una alçada de píxels per evitar errors de disseny causats per píxels fraccionats.

Per últim, hauríem de convertir-ho en una funció més reutilitzable. De fet, amb la complexitat que necessita una solució pràctica per sobre de la solució teòrica, hauríem de fer un complement que es pugui tornar a utilitzar en altres projectes.

A l’últim exemple trobareu el codi que ho aconsegueix tot. El complement JavaScript està molt comentat perquè pugueu seguir-lo. Podeu utilitzar el connector trucant-lo de la manera següent:

1. $ (finestra) .bind ('carregar', funció () {
2. $ ("img"). baselineAlign ();
3. });

O bé, podeu dir al complement que apliqui el marge a un contenidor amb nom, si n'hi ha un com a pare de la imatge:

1. $ (finestra) .bind ('carregar', funció () {
2. $ ("img"). baselineAlign ({contenidor: '. popup'});
3. });

Conclusió

Mantenir un bon ritme vertical és una pràctica de disseny subtil però eficaç que s’utilitza regularment a la impressió. Ara coneixeu els principis bàsics, teniu un coneixement pràctic de les línies de base i de la quadrícula de línia de base i coneixeu algunes de les limitacions del disseny de text CSS en comparació amb la impressió. També sabeu com solucionar aquestes limitacions, redactar els vostres documents a qualsevol ritme vertical que vulgueu i teniu una eina que us ajudarà a afrontar el contingut de la imatge perjudicial.

A mesura que madura CSS, continuem obtenint més funcions en línia amb els nostres cosins impresos, de manera que una bona comprensió del tipus serà més important per crear llocs web de qualitat. Si voleu obtenir més informació sobre el tipus en general, us recomano www.thinkingwithtype.com (i comprar el llibre per acompanyar-lo). Si busqueu articles CSS sobre tractament de tipus, hi ha nombrosos articles aquí i en altres llocs al web. També us recomanaria posar-vos al dia de les novetats de Mark Boulton i Elliot Jay Stocks, que parlen sovint de tipus en relació amb el disseny web específicament.

Diverteix-te!