الفرق بين المراجعتين لصفحة: «CSS/text-emphasis-style»

المراجعة الحالية بتاريخ 17:46، 31 يوليو 2018

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>text-emphasis-style</code>}}</noinclude>
-الخاصية <code>text-decoration-style</code> في CSS تُحدِّد نوع علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة <code>[[CSS/text-emphasis|text-emphasis]]</code>.<syntaxhighlight lang="css">
+الخاصية <code>text-decoration-style</code> في CSS تُحدِّد نوع علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة <code>[[CSS/text-emphasis|text-emphasis]]</code>.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>none</code>
+|-
+! scope="row" |تُطبَّق على
+|جميع العناصر.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للتحريك
+|لا
+|-
+! scope="row" |الوسائط
+|مرئية
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت.
+|}
+<syntaxhighlight lang="css">
 /* القيمة الابتدائية */
 text-emphasis: none;
@@ سطر 22: / سطر 46: @@
 text-emphasis-style: unset;
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>none</code>
-|-
-! scope="row" |تُطبَّق على
-|جميع العناصر.
-|-
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للتحريك
-|لا
-|-
-! scope="row" |الوسائط
-|مرئية
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت.
-|}
 == أمثلة ==
@@ سطر 115: / سطر 119: @@
 == البنية العامة ==
 تقبل الخاصية <code>text-emphasis-style</code> القيم الآتية.
-=== القيمة <code>none</code> ===
+=== <code>none</code> ===
 لن تُستعمَل علامات التوكيد.
-=== القيمة <code>filled</code> ===
+===  <code>filled</code> ===
 سيُملأ الشكل المُحدَّد باللون تمامًا، وهذه هي القيمة الافتراضية إن لم تُضبَط القيمة <code>open</code>.
-=== القيمة <code>open</code> ===
+===  <code>open</code> ===
 سيكون الشكل مفرغًا (أي أجوف).
-=== القيمة <code>dot</code> ===
+===  <code>dot</code> ===
 عرض دوائر صغيرة كعلامة توكيد. الدائرة المليئة هي <code>•</code> (المحرف <code>U+2022</code>)، والدائرة المُفرَّغة هي <code>◦</code> (المحرف <code>U+25E6</code>).
-=== القيمة <code>circle</code> ===
+===  <code>circle</code> ===
 عرض دوائر كبيرة كعلامة توكيد. الدائرة المليئة هي <code>●</code> (المحرف <code>U+25CF</code>)، والدائرة المُفرَّغة هي <code>○</code> (المحرف <code>U+25CB</code>).
-=== القيمة <code>double-circle</code> ===
+===  <code>double-circle</code> ===
 عرض دائرة مزدوجة كعلامة توكيد. الدائرة المزدوجة المليئة هي <code>◉</code> (المحرف <code>U+25C9</code>)، والدائرة المزدوجة المُفرَّغة هي <code>◎</code> (المحرف <code>U+25CE</code>).
-=== القيمة <code>triangle</code> ===
+===  <code>triangle</code> ===
 عرض مثلث كعلامة توكيد. المثلث المليء هو <code>▲</code> (المحرف <code>U+25B2</code>)، والمثلث المُفرَّغ هو <code>△</code> (المحرف <code>U+25B3</code>).
-=== القيمة <code>sesame</code> ===
+===  <code>sesame</code> ===
 عرض حبّة سمسم كعلامة توكيد. حبة السمسم المليئة هي ﹅ (المحرف U+FE45)، وحبة السمسم المُفرَّغة هي ﹆ (المحرف U+FE46).
-=== القيمة <code><string></code> ===
+===  <code><string></code> ===
 عرض سلسلة نصيّة كعلامة توكيد، ويجب على المطورين عدم تحديد أكثر من محرف واحد، ويمكن أن تأخذ المتصفحات أوّل محرف في السلسلة النصية أو تتجاهلها تمامًا إن احتوت على أكثر من محرف واحد.
 === البنية الرسمية ===
@@ سطر 140: / سطر 144: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/text-emphasis|text-emphasis]]</code> التي تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
+* صفحة الخاصية  <code>[[CSS/text-emphasis-color|text-emphasis-color]]</code> التي  تُحدِّد اللون المستخدم لرسم علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
+* صفحة الخاصية <code>[[CSS/text-emphasis-position|text-emphasis-position]]</code> التي تُحدِّد موضع رسم علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property CSS Text Decoration Module Level 3].