Problème d'emoji lors du rendu sur webkit - Problème avec la façon dont le HTML est rendu

Contribuer UX
6

Du côté CSS, c’est facilement implémenté :

img.emoji {
  width: auto; /* remplace width: 20px; */
  height: 20px;
  vertical-align: text-bottom;
}

(Voir DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub pour l’explication.)

Le travail le plus difficile concerne la partie « émojis personnalisés » et le rendu des émojis :

  • les émojis personnalisés ont besoin d’un attribut supplémentaire pour chaque émoji : aspect-ratio (ou alternativement height et width).
  • le rendu des émojis doit utiliser le nouvel attribut aspect-ratio pour que les émojis personnalisés varient la width en conséquence – height reste à 20px.

Approche rapide et facile pour les émojis personnalisés :
Pour les émojis personnalisés, les balises img définissent uniquement height="20" et ne définissent pas du tout width – abandonnant ainsi l’avantage de définir l’aspect-ratio/la hauteur et la largeur.
CSS : img.emoji { width: auto; }

2 « J'aime »