- Dans les applications de nombreuses entreprises, des éléments d’UI comme le texte ou les icônes ne sont pas correctement centrés
- Même s’il est facile de les centrer avec
flexetgriden CSS
display: flex
justify-content: center /* centrage horizontal */
align-items: center /* centrage vertical */
ou
display: grid
justify-items: center /* centrage horizontal */
align-items: center /* centrage vertical */
Les facteurs qui rendent le centrage difficile
- Les métriques de police jouent un rôle important. La plupart des polices populaires n’ont pas de boîte englobante parfaitement ajustée et comportent des marges, ce qui complique le centrage
- À cause du réglage de la hauteur de ligne (
line-height), il est presque impossible d’aligner deux éléments placés dans des conteneurs différents - Aligner des icônes à côté du texte est aussi très difficile. La propriété CSS
vertical-alignne permet pas d’aligner les icônes de manière vraiment pertinente - Les icon fonts, qui placent les icônes dans un fichier de police, rendent l’alignement encore plus difficile car on ne peut pas ajuster leur taille et leur padding
- Les designers aussi commettent l’erreur de centrer mécaniquement sans tenir compte de la forme des icônes
- L’alignement horizontal peut lui aussi être incorrect si l’on n’y prête pas une attention minutieuse
Solutions
Designers
- Si la boîte englobante de la police est ajustée au plus près du texte, le centrage devient beaucoup plus simple
- Figma prend en charge cette fonctionnalité (mais ce n’est pas le réglage par défaut)
- Vertical Trim : Cap Height to baseline
Designers de polices
- Si les métriques de la police sont définies de sorte que l’espace entre l’ascender et le descender soit égal à 2 fois la cap-height, les développeurs pourront centrer beaucoup plus facilement
- Il n’est pas nécessaire d’étendre les véritables ascender/descender jusqu’aux limites ; il suffit que les valeurs numériques correspondent
Développeurs web
- Il faut connaître à l’avance la police qui sera utilisée (cela ne fonctionne pas en cas de substitution de police)
- On peut obtenir un centrage vertical correct en ajoutant une valeur de
padding-bottomcalculée à partir des métriques de la police - Les icônes aussi peuvent être alignées en définissant
vertical-align: baseline, puis en les décalant vers le bas d’une valeur calculée à partir des métriques de la police et de la taille de l’icône
Icon fonts
- Arrêtez s’il vous plaît d’utiliser des icon fonts et utilisez des formats d’image classiques
- Il n’y a rien de plus simple que d’aligner deux rectangles ayant une largeur et une hauteur
Correction visuelle
- Les développeurs ne peuvent aligner que des rectangles mathématiquement parfaits. Pour ce qui nécessite une correction manuelle, il faut placer les icônes dans leur rectangle de manière visuellement équilibrée
L’avis de GN⁺
- Cela montre qu’une attention portée aux petits détails peut fortement améliorer la qualité d’une UI. Un simple centrage, qui peut sembler anodin, change à lui seul la sensation d’ensemble
- Cela suggère que, plutôt que de penser simplement « les designers ne s’occupent que du design, les développeurs uniquement de l’implémentation », il faut comprendre les contraintes de l’autre et collaborer pour obtenir un bon résultat
- Idéalement, il vaudrait mieux ajuster les métriques de police et préparer les maquettes dès l’étape de design afin d’éviter les différences de rendu entre navigateurs et de faciliter une implémentation fidèle à l’intention du designer
- On trouve ce problème même dans les produits d’entreprises majeures comme Apple, Microsoft ou Google, mais la plupart des gens semblent ne pas y prêter assez attention pour le remarquer consciemment. Cela montre à quel point il est important de fabriquer les produits avec une obsession du détail
- En particulier, avec l’usage récent d’outils d’automatisation des tests UI, les vérifications visuelles manuelles sont parfois omises, ce qui peut rendre ce type de problème encore plus fréquent ; il faut donc rester vigilant
3 commentaires
Il faut aussi se demander si un centrage purement mécanique est vraiment une bonne chose. Tout comme une souris est plus confortable quand elle a une forme ergonomique légèrement asymétrique plutôt qu’une symétrie parfaite gauche-droite, cela peut aussi être un élément à décider en fonction de l’utilisabilité globale.
L’idée centrale, c’est qu’on peut obtenir un résultat différent de l’intention. Par exemple, une situation où le clic de souris se fait sur la partie arrière du curseur à l’écran, et non sur la pointe de la flèche.
Avis Hacker News
Résumé :
justifyetalignen CSS