CSS/text-emphasis-style

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

/* القيمة الابتدائية */
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;

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

أمثلة

مثال عن استخدام الخاصية 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;

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

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