ارتفاع الخط والعناصر المضمنة: غوص أعمق

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

1. عدم التناسق بين حجم الخط والارتفاع المُقاس:

يعرض العنصر المضمّن بحجم خط يبلغ 15 بكسل ارتفاعًا قدره 18 بكسل في أدوات مطور المتصفح. يحدث هذا بسبب:

• ارتفاع المربع المضمن: تحدد خاصية ارتفاع الخط ارتفاع المربع المضمن، الذي يحيط بجميع الحروف الرسومية والنصف البادئ منها على كل جانب. في هذه الحالة، يكون ارتفاع المربع 15 بكسل.
• ارتفاع منطقة المحتوى: تبلغ أدوات المطور عن ارتفاع منطقة المحتوى، والذي يتجاوز عادة ارتفاع الخط بسبب الاختلافات في أحجام الحروف الرسومية داخل الخط.

2. لون الخلفية لا يتطابق مع ارتفاع الخط:

لا يتوافق لون خلفية العنصر المضمّن مع ارتفاع الخط بسبب:

• ارتفاع مربع الخط: بالإضافة إلى المربعات المضمنة، هناك أيضًا مربعات سطرية. يتم تحديد ارتفاع مربع الخط حسب ارتفاع الخط ويتضمن فقط تلك المربعات المضمنة التي تشترك في نفس ارتفاع الخط والمحاذاة الرأسية. في هذا المثال، يبلغ ارتفاع مربع الخط أيضًا 15 بكسل.
• ارتفاع منطقة المحتوى: يتم تطبيق لون الخلفية على منطقة المحتوى، والذي يتوافق مع ارتفاع أطول حرف رسومي في المستخدم الخط والحجم. يمكن أن تختلف هذه القيمة اعتمادًا على خصائص الخط ولا ترتبط بشكل مباشر بارتفاع الخط.

ملاحظة: لا تحدد مواصفات CSS بشكل صريح الخوارزمية لحساب مساحة المحتوى الارتفاع، وترك الأمر لتفسير وكلاء المستخدم.