∞ Permalien

Premier mot : j’adore Bootstrap.

Comme pour tout framework, j’étais très sceptique au départ, lorsqu’il est sorti en août dernier : un design tout fait ? Des CSS avec LESS ? Un amalgame contenu HTML / présentation ?

Mais la dernière version sortie il y a quelques semaines a vraiment rafiné le design et l’équilibre global, et amélioré un étonnant nombre d’éléments : boutons, menus, pagination, tabs, dropdowns…

Le problème ?

Enormément de développeurs utilisent Bootstrap pour promouvoir leur produit/service, mais se contentent du design de base, ou simplement de légères variations. Il n’y a qu’à naviguer à travers cette liste de sites basés sur Bootstrap.

Quelque part, c’est bien normal pour un développeur de, soit ne pas savoir comment modifier son design, soit ne pas s’en soucier, quand bien même il est très facile (avec LESS notamment) d’adopter et d’appliquer une palette de couleurs différente !

Cette critique qui peut s’appliquer aux développeurs qui utilisent un framework design pour monter leur site est très semblable à celle adressée aux designers qui utilisent Rails comme framework dev pour monter un site dynamique basique en 2 min, sans savoir comment ça marche réellement.

A qui la faute ? A personne. Les frameworks existent pour simplifier le travail d’un designer et/ou développeur, en lui fournissant des éléments préfabriqués comme raccourcis. Mais ils ne doivent en aucun cas se substituer à la connaissance du domaine dans lequel ils subsistent.

Avec cette répartition des infos, des Conditional Tags et des Templates de Post Format, je peux manipuler à ma guise l’affichage différencié.

Modifier le flux RSS

Seul le flux RSS subsistait dans l’affichage érroné de mes billets. En effet, il n’affiche que le titre (title) et le contenu (content). Par contre, pas de featured image, d’excerpt ou de custom field.

Il fallait y remédier grâce aux filtres WordPress.

Lien

Lien direct vers le site distant + permalien vers mon billet

Image

Ajout de la featured image

Citation

Ajout de la citation complète

Code

Voici le code présent dans mon functions.php :

add_filter('the_content_feed', 'tumblr_content');
function tumblr_content($content)
{
  global $post;
  $format = get_post_format($post->ID);
  $permalink = get_permalink($post->ID);
  if ($format == 'image') {
    $thumbnail = get_the_post_thumbnail($post->ID, 'medium');
    $content = '<p>' . $thumbnail . '</p>' . $content;
  }
  if ($format == 'quote') {
    $excerpt = $post->post_excerpt;
    $content = '<blockquote><p>' . $excerpt . '</p></blockquote>' . $content;
  }
  if ($format == 'link') {
    $content = $content . '<p><a href="' . $permalink . '">&#8734; Permalien</a></p>';
  }
  return $content;
}

add_filter('the_permalink_rss', 'tumblr_link');
function tumblr_link($link)
{
  global $post;
  $format = get_post_format($post->ID);
  if ($format == 'link') {
    $link_url = get_post_meta($post->ID, 'link_url', true);
    $link = $link_url;
  }
  return $link;
}

add_filter('the_title_rss', 'tumblr_title');
function tumblr_title($title)
{
  global $post;
  $format = get_post_format($post->ID);
  if ($format == 'link') {
    $title = '→ ' . $title;
  }
  return $title;
}

PS : je devrais peut-être rajouter le même syntax highlighter que pour mon tuto WordPress.

J’ai remplacé le vieux syntax highlighter sur WordPress Le Tutoriel par celui-ci: highlight.js

Pourquoi ?

1. Il n’utilise que 2 fichiers.
2. Il détecte tout seul le language.
3. Il propose l’exceptionnel thème Solarized.

Le line-height est une propriété de base très importante mais trop souvent mal utilisée. En fait, elle est très souvent ignorée, ou bien définie approximativement parce qu’elle concerne l’espace qu’occupe le texte. Et visuellement, le texte est difficile à mesurer. Néanmoins, le line-height est essentiel au confort de lecture ainsi qu’à l’équilibre spatial d’une page web.

Je vais essayer d’expliquer le peu qu’il y à comprendre en m’appuyant sur un élément que vous venez de lire : le titre de mon billet.

Le line-height a deux amours

Le line-height a principalement 2 objectifs, qui ne sont et ne doivent pas être contradictoires :

1. Confort de lecture
2. Alignement vertical

Alors que le confort de lecture s’établit pour un bloc de texte, l’alignement vertical s’établit pour une ligne de texte. ¹

Le souci est que je vois souvent les intégrateurs négliger le confort de lecture, voire l’ignorer totalement lorsqu’il s’agit d’alignement vertical. Pourtant, il est facile de jouer sur les deux fronts.

Confort de lecture

En CSS, le line-height ne définit pas l’espacement des lignes mais plutôt la hauteur d’une ligne (ce qui, forcément, définit indirectement leur espacement, mais la nuance est importante). Ainsi, un paragraphe de 3 lignes, dont le line-height est de 16px fera 48px de hauteur. C’est évident à comprendre non ?

Relatif au font-size

L’erreur serait de considérer le font-size pour calculer la hauteur d’un paragraphe : si un paragraphe a un font-size de 20px, alors chaque ligne fait 20px de haut. FAUX. Le font-size n’entre pas directement en compte. Le font-size définit uniquement la taille des caractères d’une police. A vous de le définir à votre guise.

Le line-height sera néanmoins définit en fonction du font-size. Une règle simple est d’appliquer un line-height équivalent à 1,4x le font-size (environ). Prenez le paragraphe que vous êtes en train de lire : le font-size est de 15px (parce que c’est ce que je voulais tout simplement). Si on multiplie 15 par 1,4, on obtient 21. Mon line-height est en réalité de 22, ce qui est terriblement proche.

Cette règle peut légèrement varier selon la police utilisée (les polices avec serif apparaissent un peu plus grandes, du coup, un line-height légèrement plus grand est préférable). Mais au final, le confort de lecture se juge surtout à l’oeil : à vous de juger l’équilibre font-size/line-height.

Titre ≠ paragraphe

Les titres sont un cas particulier : en général, le line-height est plus petit, parce que les titres comportent beaucoup moins de lignes (1 seule très souvent, 2 régulièrement, 3 parfois, et rarement + de 3).

Du coup, le ratio line-height/font-size est très proche de 1.

Alignement vertical

L’alignement vertical s’effectue à 90% pour les éléments à une seule ligne de texte : boutons, titres, menus.. Il s’applique donc sur une seule ligne, ou bien la première ligne d’une série.

Reprenons mon titre de billet : je veux aligner verticalement le texte de mon titre avec le carré de gauche, qui s’avère être le format du post (article, lien, image, citation ou brève). Mon carré est placé en premier. C’est donc le titre qui doit s’adapter pour être aligné avec le carré.

Alignement vertical FTW

Mon carré fait 40px de haut. La solution de facilité serait d’appliquer un line-height de 40px : chaque première ligne de mon titre serait alignée verticalement avec le carré, et ce, quel que soit le font-size appliqué. Cette solution serait correcte pour une seule ligne, mais on aurait des soucis dès l’apparition d’une deuxième ligne.

En effet, le font-size de mes titres varie selon le format du post. Du coup, même si un line-height de 40px peut passer pour un font-size de 36px, il sera ridicule pour mon format “Brève” qui a un font-size de 17px.

Un line-height de 40px avec un font-size de 17px : ça colle pas.

En fait, on aurait fait une erreur dans l’ordre de définition des propriétés : le line-height doit servir au confort de lecture, avant toute chose. La volonté s’aligner verticalement ne doit pas se faire au détriment du confort de lecture. Et ce confort de lecture n’apparaissant qu’à partir de la deuxième ligne, peut se voir être négligé si l’on ne travaille que sur une seule ligne.

Ordre de définition des propriétés

Voici dans quel ordre on doit choisir la valeur des propriétés :

font size -> line-height -> padding-top

A quoi correspond chaque propriété ?

• Font size : la taille des caractères. Il s’établit selon des critères d’esthétique, d’équilibre. Il est défini indépendamment, en premier. A vous de le choisir, judicieusement.
• Line-height : le confort de lecture (uniquement !). Ratio de 1,4 pour des paragraphes, 1 pour des titres.
• Padding-top : c’est l’arme secrète qui va nous permettre d’aligner la première ligne sans compromettre le confort de lecture.

J’ai plusieurs formats de post. On va se focaliser sur 3 d’entre eux :

• Articles : font-size 36px / line-height 36px
• Liens : font-size 28px / line-height 28px
• Brèves : font-size 17px / line-height 24px

Première chose : maintenant que les line-height ont été établis selon le font-size, on va oublier les font-size. Ils ne sont plus utiles. On va se focaliser sur les line-height qui, eux, rentrent en considération dans l’alignement vertical.

Articles

Mes titres d’articles ont un line-height de 36px, et je veux qu’ils s’alignent verticalement dans un espace de 40px. Puisqu’on ne peut plus toucher au line-height (sous peine de dégrader le confort de lecture), on va décaler le titre vers le bas en haut utilisant du padding-top. Mais de combien ? Et bien de la différence entre line-height et hauteur désignée, divisée par deux. Une image pour expliquer ça ?

Avec un titre qui occupe 36px de haut, il nous faut 2px en haut et 2px en bas pour l’aligner verticalement avec le carré de 40px.

Vous remarquerez qu’à ce stade, le padding-bottom est négligeable. Il pourrait être de 40px qu’il n’entrerait pas en compte dans l’alignement vertical. Du coup, vous pouvez le définir à votre guise. Par exemple, ayant un border-bottom de 1px, j’ai établi mon padding-bottom à 16px.

Qu’en est-il des autres formats ?

Liens

Les liens que je poste sont moins importants que mes articles. Du coup, leur font-size n’est qu’à 28px, et leur line-height aussi. Du coup, le calcul est : (40-28) / 2 = 6px de padding-top.

Brèves

La particularité de mes brèves est qu’il n’y a pas de titre (ou du moins, il n’est pas affiché sur mon site). Du coup, c’est un paragraphe, pas un titre. Le font-size de 17px a généré un line-height de 24px. Calcul rapide : (40-24) / 2 = 8px de padding-top.

Avec cette utilisation simple du padding-top, on aligne la première ligne sans compromettre le confort de lecture établi en amont.

∞ Permalien

D’ailleurs, si vous voulez avoir la même chose mais en local, voici le simple responsive design test page.

∞ Permalien

Because web designers want font families, not just fonts.

Je ne l’aurais pas mieux dit. En effet, le seul souci de Google Web Fonts, c’est qu’il sépare les polices appartenant à une même famille.

∞ Permalien

Dans la famille des “Cadeaux Web Design qu’il vaut mieux donner que jeter à la poubelle”, voici une petite liste d’astuces CSS glanées au fil du temps. Elles est destinée à tous les niveaux, et peut être agrandie par vous-même en m’envoyant vos supers astuces, ou bien par moi-même si jamais d’autres idées lumineuses me reviennent…