\u003ckbd\u003e:blue_square: n'importe quel texte\u003c/kbd\u003e
Sera rendu de la même manière que :
\u003ckbd\u003e:blue_square:n'importe quel texte\u003c/kbd\u003e
\u003ckbd\u003e:blue_square: n’importe quel texte\u003c/kbd\u003e
Il n’y a pas d’espace visible entre l’emoji et le texte, bien que l’espace soit présent dans le code HTML.
Est-ce une limitation de la balise \u003ckbd\u003e ? Existe-t-il un moyen élégant de corriger cela ou devons-nous nous fier à des astuces comme \u0026nbsp; ou ㅤ etc. ?
\u003ckbd\u003e:blue_square:\u0026nbsp;n'importe quel texte\u003c/kbd\u003e
\u003ckbd\u003e:blue_square:\u0026nbsp;n’importe quel texte\u003c/kbd\u003e
\u003ckbd\u003e:blue_square:ㅤn'importe quel texte\u003c/kbd\u003e
\u003ckbd\u003e:blue_square:ㅤn’importe quel texte\u003c/kbd\u003e
Une solution consiste à ajouter des valeurs pour la propriété white-space, comme pre-wrap, mais cela causera des problèmes si nous avons un ou plusieurs sauts de ligne supplémentaires à l’intérieur de <kbd>.
Deviendrait :
Une alternative serait d’ajouter automatiquement des marges gauche et/ou droite à l’emoji s’il n’est pas le premier ou le dernier élément.
Ces marges forcées seraient-elles acceptables ? C’est plus joli et augmente la lisibilité, mais il sera impossible pour l’utilisateur de ne pas avoir de marge entre l’emoji et certains textes (quant à moi, j’en serais ravi car je vois la marge forcée comme un avantage).
Je pense que nous pouvons utiliser la propriété gap pour cela ? le problème est que le changement de kbd pour utiliser flexbox a supprimé tout espace naturel entre les éléments à l’intérieur :
kbd {
gap: 0.5em;
}
produit :
Cela ajouterait de l’espace entre tous les éléments HTML à l’intérieur de la balise KBD, et ne nécessiterait aucune exception pour le premier/dernier enfant.
