من جانب CSS، يتم تنفيذ ذلك بسهولة:
img.emoji {
width: auto; /* استبدال width: 20px; */
height: 20px;
vertical-align: text-bottom;
}
(انظر DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub للشرح.)
العمل الأصعب هو على جزء “الرموز التعبيرية المخصصة” وعرض الرموز التعبيرية:
- تحتاج الرموز التعبيرية المخصصة إلى سمة إضافية لكل رمز تعبيري:
aspect-ratio(أو كبديلheightوwidth). - يجب أن يستخدم عرض الرموز التعبيرية السمة الجديدة
aspect-ratioللرموز التعبيرية المخصصة لتغييرwidthوفقًا لذلك - يبقىheightعند20px.
نهج سريع وسهل للرموز التعبيرية المخصصة:
بالنسبة للرموز التعبيرية المخصصة، قم بتعيين height="20" فقط ولا تقم بتعيين width على الإطلاق - وبالتالي تتخلى عن فائدة تعيين نسبة العرض إلى الارتفاع / العرض والارتفاع.
CSS: img.emoji { width: auto; }