محاذاة النص بدقة

المشكلة

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

تشمل المشاكل الشائعة ما يلي:

• رموز غير محاذية: يظهر النص بصريًا أقل أو أعلى من رمز مجاور حتى عند استخدام align-items: center.
• مساحة متروكة غير دقيقة: يظهر زر يتضمّن padding: 12px بمساحة أكبر في الأعلى أو الأسفل بسبب المسافة الداخلية بين الأسطر في الخط.
• المحاذاة المتساوية: لا يمكنك محاذاة الجزء العلوي من حرف كبير مع الجزء العلوي من حاوية أو صورة مجاورة بدقة بدون استخدام هوامش سلبية "رقم سحري".

الحل

تتيح لك السمتان text-box-trim وtext-box-edge (الاختصار text-box) اقتطاع هذا التباعد الداخلي استنادًا إلى مقاييس خطوط معيّنة. من خلال اقتصاص مربّع النص إلى ارتفاع الحرف الكبير (أعلى الأحرف الكبيرة) وخط الأساس الأبجدي (أسفل معظم الأحرف)، يمكنك التأكّد من أنّ المربّع المحيط بالعنصر يتطابق مع محتواه المرئي.

استراتيجية التنفيذ

1. إلزامي: طبِّق السمة text-box-trim: trim-both (أو الاختصار text-box) على العنصر الذي يحتوي على النص.
2. مَعلمة إلزامية: تُحدِّد المقاييس التي يجب استخدامها للاقتطاع باستخدام text-box-edge. بالنسبة إلى معظم محاذاة واجهة المستخدم، استخدِم cap alphabetic.
3. يجب استخدام هذه السمة لتحقيق توسيط عمودي مرئي في حاويات flex أو grid.
4. يجب استخدامها لضمان تطابق قيم padding في CSS مع الفجوة المرئية بين النص وحافة الحاوية.
5. لا تستخدِمه في النص الأساسي الطويل الذي يتطلّب تباعدًا تقليديًا بين الأسطر لتسهيل القراءة. وهو الأنسب للعناوين والأزرار وتصنيفات واجهة المستخدم.

دليل الاستخدام

حالة الاستخدام 1: إزالة المسافة الداخلية العلوية للشارات

تتضمّن الخطوط المختلفة مسافات مدمجة مختلفة فوق النص وأسفله. قد يؤدي ذلك إلى صعوبة في مطابقة التصميم أو توسيط النص بشكل مرئي في الشارة. عندما تريد أن تلتف حشوة الحاوية حول النص تمامًا، استخدِم text-box: trim-both cap alphabetic. هذا مفيد بشكل خاص لمكونات واجهة المستخدم الكثيفة مثل الشارات أو العلامات. يتيح ذلك بدء المساحة المتروكة عند حافة النص مباشرةً من جميع الجوانب.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

حالة الاستخدام 2: توسيط النص مع الرموز

عند استخدام Flexbox لمحاذاة النص والرموز، غالبًا ما تجعل "المساحة غير المرئية" النص يبدو بعيدًا قليلاً عن المركز. يضمن اقتصاص المربّع أن يستخدم محرّك التنسيق ارتفاع الحرف الفعلي المرئي للمحاذاة.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

حالة الاستخدام 3: محاذاة النص مع الحواف العلوية

لمحاذاة عنوان بشكل مثالي مع الجزء العلوي من صورة مجاورة أو عنصر زخرفي، استخدِم trim-start cap alphabetic. على الرغم من أنّه لن يتم قطع النهاية، يجب تحديد الحافة النهائية.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

أفضل الممارسات

• يُرجى استخدام الاختصار text-box للإيجاز: text-box: <trim-direction> <edges>.
• يجب دائمًا تحديد كلا الحافتَين، حتى إذا تم اقتصاص حافة واحدة فقط (ما لم يتم استخدام الحافة التلقائية text).
• يجب استخدامها مع line-height للتحكّم في المسافات. تؤدي عملية الاقتصاص إلى إزالة المسافة البادئة قبل السطر الأول والأخير من النص، ولكن تظل السمة line-height تؤثر في المسافة بين الأسطر في النص المتعدّد الأسطر.
• لا تطبّقها على كل عنصر. استخدِمها فقط عندما تكون المحاذاة الدقيقة مطلوبة.

استراتيجيات احتياطية

‫text-box هو تحسين تدريجي. في المتصفحات التي لا تتيح هذه السمة، سيتم عرض النص ببساطة مع المسافة التلقائية بين الأسطر. سيظل التخطيط يعمل، ولكن بدقة أقل قليلاً. لا يلزم توفير رمز احتياطي خاص لأنّ المتصفحات القديمة تتجاهل السمات بأمان.

اعتبارات أخرى

1. مقاييس الخطوط: تختلف المقاييس الداخلية باختلاف الخطوط. ‫cap alphabetic هو الخيار التلقائي الموثوق به، ولكن قد تتطلّب بعض الخطوط أو حالات الاستخدام استخدام ex (ارتفاع الحرف x) لمحاذاة الأحرف الصغيرة بشكل أفضل.
2. النص المتعدّد الأسطر: يتم تطبيق الاقتصاص على السطرَين الأول والأخير من مجموعة الرموز. ولا تتأثر الخطوط الداخلية.