الخاصية 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;