CSS/text-emphasis

الخاصية text-decoration في CSS تُحدِّد علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن ضبط علامات التوكيد معًا، وهي تتضمن text-emphasis-style و text-emphasis-color.

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: text-emphasis-style: none text-emphasis-color: currentcolor
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا، باستثناء قيمة الخاصية text-emphasis-color.
الوسائط	مرئية
القيمة المحسوبة	لكل قيمة مختصرة: text-emphasis-style: كما حُدِّدَت. text-emphasis-color: قيمة لونية <color>.

/* القيمة الابتدائية */
text-emphasis: none; /* No emphasis marks */

/* <string> سلاسل نصية */
text-emphasis: 'x';
text-emphasis: '点';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
text-emphasis: 'foo'; /* لا تستخدم هذه القيمة، فقد يُعرَض أوّل محرف منها فقط */

/* الكلمات المحجوزة */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* استخدام كلمة محجوزة مع تحديد لون */
text-emphasis: filled sesame #555;

/* القيم العامة */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: unset;

الخاصية text-emphasis تختلف اختلافًا كبيرًا عن الخاصية text-decoration، إذ إنَّ الخاصية text-decoration لا تورَّث، وإنما ستُطبَّق على العنصر وجميع العناصر الأبناء؛ لكن الخاصية text-emphasis ستورَّث، مما يعني أنَّ بالإمكان تغيير علامات التوكيد في العناصر الأبناء.

تكون أبعاد علامة التوكيد حوالي 50% من قياس الخط، وقد تؤثر الخاصية text-emphasis على ارتفاع السطر إن لم تتسع العلامات فيه.

ملاحظة: لن تؤدي الخاصية text-emphasis إلى إعادة ضبط قيمة الخاصية text-emphasis-position لأنَّ من المحتمل أن يتغير شكل ولون علامات التوكيد في النص، لكن من غير الشائع أن يتغيّر مكانها.

أمثلة

مثال عن استخدام الخاصية text-emphasis على العنصر <strong> لضبط قيمة الخاصية text-emphasis-style إلى triangle، والخاصية text-emphasis-color  إلى salmon:

<strong>هذا نصٌ مهمٌ جدًا!</strong>

شيفرة CSS:

strong {
  text-emphasis: triangle salmon;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	25.0 مع السابقة -webkit-	46.0	غير مدعومة	15.0 مع السابقة -webkit-	7.1

البنية العامة

تقبل الخاصية text-emphasis القيم الآتية.

<text-emphasis-style>

شكل علامة التوكيد، راجع صفحة الخاصية text-emphasis-style لمزيدٍ من المعلومات.

<text-emphasis-color>

لون علامات التوكيد، انظر صفحة الخاصية text-emphasis-color لمزيدٍ من المعلومات.

البنية الرسمية

text-emphasis: <text-emphasis-style>||<text-emphasis-color>|initial|inherit;

مصادر ومواصفات

• مواصفة CSS Text Decoration Module Level 3.