Maintenez le rythme vertical avec CSS et jQuery

Contenu

• Type de mise en page
• Rythme vertical
• Diriger le rythme
• Gérer les images
• Amélioration de jQuery
• Conclusion

• Connaissances nécessaires: CSS, jQuery basique
• A besoin: jQuery, CSS, HTML
• Temps de projet: 30 minutes
• Télécharger les fichiers source

En supposant que vous concevez à partir du contenu, la première décision pour effectuer votre conception possède être lié au type. Même par ne pas en choisissant une police, vous avez fait quelque chose qui a un impact sur votre site. Le type est au cœur de l'impression et de la conception Web et il est complexe il y a beaucoup de termes, pratiques, règles et techniques accumulés qui entrent dans son bon usage. Cet article concerne une technique permettant de gérer un aspect du texte, difficile à faire en ligne mais routinière à l’impression: maintenir un rythme vertical cohérent, ce qui nous permet à son tour d’obtenir une mise en page professionnelle.

Type de mise en page

En version imprimée, pour tout élément contenant une quantité importante de texte, la base de la conception est susceptible d'être une grille de base. Il sert à structurer la page et guide le flux vertical du contenu. Presque tout est placé par rapport à cette grille de base. Ne vous inquiétez pas si vous ne reconnaissez pas les termes, personne ne connaît mal les lignes de base ou les grilles de lignes de base; vous les connaissez déjà. Pensez à l'école, lorsque vous avez sans aucun doute écrit sur du papier ligné - pendant que vous écriviez, vous avez placé le bas de vos lettres proprement sur chacune des lignes du papier. La ligne de base et la grille de base en action. La ligne de base est une ligne imaginaire sur laquelle le bas des lettres s'aligne.Si vous regardez cet article maintenant, vous "verrez" une ligne de base, même s'il n'y a pas vraiment de ligne. Votre cerveau en met un là pour vous, c'est pourquoi vous pouvez lire des phrases. Les lignes sur papier ligné? Il s’agit d’une grille de base. Droit pour que vos phrases soient droites, et définies à intervalles réguliers pour que votre texte ait un rythme vertical régulier.

Rythme vertical

Le rythme vertical dicte où se trouve le texte de la page. C'est un composant qui affecte notre capacité à numériser et à lire des blocs de texte, et il aide à informer nos réponses émotionnelles. Lorsque le texte a un rythme vertical fort et un bon espacement, nous pensons qu'il est professionnel, réfléchi, faisant autorité et confortable à lire. Lorsque le texte a un rythme et un espacement médiocres, nous pensons qu'il est moins considéré, moins professionnel et souvent plus difficile à lire. Le rythme vertical est une partie de la convivialité et une partie de l'esthétique.

Diriger le rythme

Malheureusement, le Web est toujours le cousin pauvre de l'imprimé en termes de sa capacité à adopter certaines pratiques fondamentales concernant le type. Sur le Web, nous ne pouvons pas utiliser une grille de base de la même manière qu’un graphiste (ou un enfant à l’école) - nous ne pouvons pas aligner la ligne de base du texte sur la grille de base d’un document. CSS n'a aucun concept de grille de base. Ainsi, notre texte ne sera pas placé exactement sur les lignes d'une grille de base. Au lieu de cela, il sera centré verticalement dans l'espace entre les lignes. C’est ce que le Web peut faire de mieux.

Soyons pratiques avec un exemple de document. Tout d'abord, nous allons définir le rythme en créant une grille de ligne de base visible. Pour ce faire, nous allons utiliser une image d'arrière-plan répétitive pour dessiner des lignes horizontales régulières distantes de 22 pixels:

1. html {arrière-plan: #fff url (baseline_22.png); }

Hourra, nous avons notre papier ligné!

Vous remarquerez que rien ne s'aligne. Pour que tout s'aligne, nous voulons que le bord inférieur de tous les éléments atteigne l'une de ces lignes. Le moyen le plus simple de le faire est de s'assurer que tous les éléments occupent une hauteur verticale (y compris les marges) qui est un multiple de 22. Voici quelques CSS qui font exactement cela. J'utilise l'unité REM, mais je donne une solution de secours EM pour les navigateurs qui ne comprennent pas REM. J'inclus également l'équivalent de l'unité PX dans les commentaires. Si vous ne comprenez pas encore REM / EM, vous pouvez simplement utiliser les valeurs px à la place - elles sont toutes équivalentes:

1. html {/ * font-size: 16px, line-height: 22px * /
2. police: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans empattement;
3. arrière-plan: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top et bottom sont tous les deux 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. marge: 1,375rem 0; }
8. h1 {/ * font-size est de 32px, la hauteur de ligne est de 44px * /
9. / * em fallback * / font-size: 2em;
10. taille de la police: 2rem; hauteur de ligne: 1,375; }
11. h2 {/ * font-size est 26px, la hauteur de la ligne est 44px * /
12. / * em fallback * / font-size: 1,75em;
13. taille de la police: 1,75rem; hauteur de ligne: 1,5714285714; }
14. h3, h4, h5, h6 {/ * la taille de la police est de 22px, la hauteur de la ligne est de 22px * /
15. / * em fallback * / font-size: 1.375em;
16. taille de la police: 1,375rem; hauteur de ligne: 1; }
17. p, ul, blockquote {/ * la marge inférieure est de 22px, la hauteur de ligne est héritée de html (22px) * /
18. / * em fallback * / margin-top: 0; marge inférieure: 1,375em;
19. margin-top: 0; marge inférieure: 1,375rem; }

Jetons un œil à ce que cela nous donne. Remarquez comment tout le texte s'aligne bien? Il ne repose pas sur la ligne de base, mais il a un rythme vertical prévisible. C’est joli et bien rangé.

Gérer les images

Les images compliquent les choses. Jetez un œil à ce qui arrive à notre rythme lorsque nous en incluons. Ils le perturbent comme un saut dans un disque - le tempo est juste mais le timing est décalé. L'alignement est décalé. En effet, il est peu probable que les images aient une hauteur qui soit un multiple de la ligne de base, de sorte que le bord inférieur ne s'aligne pas avec notre grille de ligne de base.

Pour résoudre ce problème, tout ce que nous devons vraiment faire est d'ajouter une marge à chaque image, en alignant le bas de la marge sur notre grille. Ce qui est assez simple pour être automatisé avec un peu de JavaScript. Voici notre plan de base:

1. Calculez la hauteur de chaque image.
2. Voyez combien de fois la valeur de la ligne de base se divise dans l'espace vertical occupé par l'image et obtenez le reste.
3. Soustrayez le reste de la ligne de base pour donner le décalage que nous devons appliquer sur l'image.
4. Appliquez le décalage sous forme de marge au bas de l'image.

Le bas de l’espace vertical de l’image s’aligne désormais correctement avec la grille de ligne de base. Voici une fonction de base dans jQuery qui fait cela:

1. $ (window) .bind ('load', function () {
2. $ ("img"). each (function () {
3. / * variables * /
4. var this_img = $ (ceci);
5. var base = 22;
6. var img_height = this_img.height ();
7. / * faire le calcul * /
8. var reste = parseFloat (img_height% de base);
9. / * combien devons-nous ajouter? * /
10. var offset = parseFloat (base-reste);
11. / * applique la marge à l'image * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Pourquoi le window.bind ligne? Parce que nous devons attendre que les images soient chargées avant de pouvoir obtenir leurs tailles de manière fiable. Voici un exemple avec ce code de base en cours d’exécution.

Amélioration de jQuery

Le monde est rarement simple, et il s'avère donc que nous devons traiter de nombreux détails de mise en œuvre. Quel est le problème avec la fonction que nous avons? Beaucoup:

• Cela produit des résultats désagréables avec des images qui sont en ligne plutôt que flottantes ou bloquées.
• Cela semble bogué sur certaines images, en particulier celles des conteneurs.
• Il ne traite pas des mises en page liquides.
• Ce n’est pas très réutilisable.

Nous ne souhaitons pas appliquer ce comportement aux images en ligne, comme le smiley dans l'exemple. Les images en ligne sont alignées de sorte que le bord inférieur se trouve sur la même ligne de base que le texte (ne pas la grille de base). Cela signifie que l'image est décalée verticalement. Ni CSS ni JS ne nous permettent de savoir où se trouve la ligne de base d'un élément de texte, nous ne connaissons donc pas le décalage. Nous devons ignorer les images en ligne et appliquer notre correctif uniquement aux images définies sur bloc de visualisation (heureusement, toute image flottante est automatiquement définie pour afficher le bloc).

Si une image se trouve dans un conteneur, la marge appliquée à l'image peut être masquée en raison des paramètres de débordement sur le conteneur. De plus, nous ne voulons peut-être pas la marge sur l'image, mais plutôt sur l'élément conteneur. Dans l'exemple, nous préférons avoir des marges sur la boîte blanche que sur l'image à l'intérieur de la boîte, afin d'éviter que des espaces étranges apparaissent dans la boîte.

La fonction ne s'exécute qu'une seule fois, mais sur une conception liquide, les images changent de hauteur lorsque le navigateur est redimensionné (essayez de redimensionner l'exemple à quelque chose d'assez étroit pour voir cela). Le redimensionnement rompt à nouveau le rythme. Nous avons besoin que la fonction s’exécute après le redimensionnement du navigateur ainsi qu’après le chargement de la page. Les mises en page liquides posent également d'autres problèmes; les images peuvent avoir une hauteur fractionnaire de pixels, par exemple 132,34 pixels. Cela peut à son tour entraîner des résultats inattendus, même si nous appliquons une marge fractionnaire (si vous êtes intéressé, voici pourquoi: trac.webkit.org/wiki/LayoutUnit). Nous allons donc devoir masser l'image sur une hauteur de pixel entière pour éviter les bogues de mise en page causés par des pixels fractionnaires.

Enfin, nous devrions en faire une fonction plus réutilisable. En fait, compte tenu de la complexité d'une solution pratique par rapport à la solution théorique, nous devrions créer un plug-in qui peut être réutilisé dans d'autres projets.

Dans le dernier exemple, vous trouverez le code qui réalise tout cela. Le plug-in JavaScript est fortement commenté afin que vous puissiez suivre. Vous pouvez utiliser le plug-in en l'appelant comme suit:

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

Ou, vous pouvez demander au plug-in d'appliquer la marge à un conteneur nommé, s'il en existe un en tant que parent de l'image:

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

Conclusion

Garder un bon rythme vertical est une pratique de conception subtile mais efficace utilisée régulièrement dans l'impression. Vous connaissez maintenant les principes de base, avez une connaissance pratique des lignes de base et de la grille de base, et connaissez certaines des limites de la mise en page du texte CSS par rapport à l'impression. Vous savez également comment contourner ces limitations, composer vos documents selon le rythme vertical de votre choix et vous disposez d'un outil pour vous aider à gérer le contenu d'image perturbateur.

Au fur et à mesure que CSS mûrit, nous continuons à obtenir plus de fonctionnalités en ligne avec nos cousins ​​d'impression, de sorte qu'une bonne compréhension du type deviendra plus importante pour créer des sites Web de qualité. Si vous souhaitez en savoir plus sur le type en général, je vous recommande vivement www.thinkingwithtype.com (et d'acheter le livre qui va avec). Si vous recherchez des articles CSS sur le traitement de type, il existe de nombreux articles ici et ailleurs sur le Web. Je vous recommande également de vous tenir au courant des dernières nouvelles de Mark Boulton et Elliot Jay Stocks, qui parlent tous deux souvent de type en relation avec la conception Web en particulier.

S'amuser!