مشكلة الرموز التعبيرية عند العرض على webkit - مشكلة في كيفية عرض HTML

ذلك لأن جميع رموز يونيكود الموحدة القياسية مصممة لتناسب مربعًا، ونفترض أن المواقع تريد أن تكون رموزها التعبيرية بنفس الحجم بطريقة تعمل جنبًا إلى جنب مع النص والرموز التعبيرية الأخرى :teapot: إذا كان هذا الإبريق 50x50 فسيؤدي ذلك إلى ترك فجوة كبيرة بين الأسطر مثل هذا:

هناك شرح جيد من وقت إضافته في الأصل:

مع تفاصيل داعمة من Multimedia: Images - Learn web development | MDN

عندما يتم تضمين سمات width و height للصورة في عنصر HTML <img>، يمكن للمتصفح حساب نسبة العرض إلى الارتفاع للصورة قبل تحميل الصورة. تُستخدم نسبة العرض إلى الارتفاع هذه لحجز المساحة اللازمة لعرض الصورة، مما يقلل أو حتى يمنع تغيير التخطيط عند تنزيل الصورة ورسمها على الشاشة. يعد تقليل تغيير التخطيط مكونًا رئيسيًا لتجربة المستخدم الجيدة وأداء الويب.

بينما قد تكون أفضل ممارسات المطورين من العقد الماضي قد أوصت بتجاهل سمات width و height للصورة في عنصر HTML <img>، نظرًا لتعيين نسبة العرض إلى الارتفاع، فإن تضمين هاتين السمتين يعتبر من أفضل ممارسات المطورين.

كل ما سبق، لديك مثال معقول لحالة لن يعمل فيها التحجيم الافتراضي لجميع الرموز التعبيرية… هذا الرمز التعبيري القديم للتحية أعرض بثلاث مرات، لذا فهو لا يتناسب بشكل جيد مع مربع. ليس من غير المعتاد أن تحد التطبيقات الأخرى جميع الرموز التعبيرية إلى مربعات لذا فإن سلوكنا ليس غريبًا جدًا في هذا الصدد (كل من Slack و Discord يفعلان ذلك، على سبيل المثال)… ولكن بدلاً من ذلك، يمكننا التفكير في السماح للرموز التعبيرية المخصصة بالحصول على أبعاد محددة اختياريًا.

إعجابَين (2)