CSS/text-emphasis-style

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

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

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
الوسائط	مرئية
القيمة المحسوبة	كما حُدِّدَت.

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

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

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

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

أمثلة

مثال عن استخدام الخاصية text-emphasis-style على عدِّة عناصر <code> مع قيم مختلفة:

<p>
  <code class="filled-dot">text-emphasis-style: filled dot;</code> |
  <code class="open-dot">text-emphasis-style: open dot;</code>
</p>
<hr>

<p>
  <code class="filled-circle">text-emphasis-style: filled circle;</code> |
  <code class="open-circle">text-emphasis-style: open circle;</code>
</p>
<hr>

<p>
  <code class="filled-double-circle">text-emphasis-style: filled double-circle;</code> |
  <code class="open-double-circle">text-emphasis-style: open double-circle;</code>
</p>
<hr>

<p>
  <code class="filled-triangle">text-emphasis-style: filled triangle;</code> |
  <code class="open-triangle">text-emphasis-style: open triangle;</code>
</p>
<hr>

<p>
  <code class="filled-sesame">text-emphasis-style: filled sesame;</code> |
  <code class="open-sesame">text-emphasis-style: open sesame;</code>
</p>
<hr>

<p>
  <code class="string">text-emphasis-style: filled '!';</code>
</p>

شيفرة CSS:

.filled-dot { text-emphasis-style: filled dot; }
.open-dot   { text-emphasis-style: open dot; }

.filled-circle { text-emphasis-style: filled circle; }
.open-circle   { text-emphasis-style: open circle; }

.filled-double-circle { text-emphasis-style: filled double-circle; }
.open-double-circle   { text-emphasis-style: open double-circle; }

.filled-triangle { text-emphasis-style: filled triangle; }
.open-triangle   { text-emphasis-style: open triangle; }

.filled-sesame { text-emphasis-style: filled sesame; }
.open-sesame   { text-emphasis-style: open sesame; }

.string { text-emphasis-style: '!'; }

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

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

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

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

none

لن تُستعمَل علامات التوكيد.

filled

سيُملأ الشكل المُحدَّد باللون تمامًا، وهذه هي القيمة الافتراضية إن لم تُضبَط القيمة open.

open

سيكون الشكل مفرغًا (أي أجوف).

dot

عرض دوائر صغيرة كعلامة توكيد. الدائرة المليئة هي • (المحرف U+2022)، والدائرة المُفرَّغة هي ◦ (المحرف U+25E6).

circle

عرض دوائر كبيرة كعلامة توكيد. الدائرة المليئة هي ● (المحرف U+25CF)، والدائرة المُفرَّغة هي ○ (المحرف U+25CB).

double-circle

عرض دائرة مزدوجة كعلامة توكيد. الدائرة المزدوجة المليئة هي ◉ (المحرف U+25C9)، والدائرة المزدوجة المُفرَّغة هي ◎ (المحرف U+25CE).

triangle

عرض مثلث كعلامة توكيد. المثلث المليء هو ▲ (المحرف U+25B2)، والمثلث المُفرَّغ هو △ (المحرف U+25B3).

sesame

عرض حبّة سمسم كعلامة توكيد. حبة السمسم المليئة هي ﹅ (المحرف U+FE45)، وحبة السمسم المُفرَّغة هي ﹆ (المحرف U+FE46).

<string>

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

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

text-emphasis-style: none|[[filled|open]||[dot|circle|double-circle|triangle|sesame ] ]|<string>|initial|inherit;

انظر أيضًا

• صفحة الخاصية text-emphasis التي تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
• صفحة الخاصية  text-emphasis-color التي  تُحدِّد اللون المستخدم لرسم علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
• صفحة الخاصية text-emphasis-position التي تُحدِّد موضع رسم علامة التوكيد المستخدمة على كل محرف نصي في العنصر.

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

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