الفرق بين المراجعتين ل"CSS/text-emphasis-position"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-emphasis-position</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-emphasis-position</code>}}</noinclude> | ||
| − | الخاصية <code>text-decoration-position</code> في CSS تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد. | + | الخاصية <code>text-decoration-position</code> في CSS تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد. |
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 38: | سطر 23: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* القيمة الابتدائية */ | ||
| + | text-emphasis-position: over right; | ||
| + | |||
| + | /* الكلمات المحجوزة */ | ||
| + | text-emphasis-position: over left; | ||
| + | text-emphasis-position: under right; | ||
| + | text-emphasis-position: under left; | ||
| + | |||
| + | text-emphasis-position: left over; | ||
| + | text-emphasis-position: right under; | ||
| + | text-emphasis-position: left under; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | text-emphasis-position: inherit; | ||
| + | text-emphasis-position: initial; | ||
| + | text-emphasis-position: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 84: | سطر 88: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-emphasis-position</code> القيم الآتية. | تقبل الخاصية <code>text-emphasis-position</code> القيم الآتية. | ||
| − | === | + | === <code>over</code> === |
عرض علامة التوكيد فوق النص في نمط الكتابة الأفقي (كاللغة العربية والإنكليزية). | عرض علامة التوكيد فوق النص في نمط الكتابة الأفقي (كاللغة العربية والإنكليزية). | ||
| − | === | + | === <code>under</code> === |
عرض علامة التوكيد تحت النص في نمط الكتابة الأفقي (كاللغة العربية والإنكليزية). | عرض علامة التوكيد تحت النص في نمط الكتابة الأفقي (كاللغة العربية والإنكليزية). | ||
| − | === | + | === <code>right</code> === |
عرض علامة التوكيد على يمين النص في نمط الكتابة الرأسي (كاللغة الصينية واليابانية). | عرض علامة التوكيد على يمين النص في نمط الكتابة الرأسي (كاللغة الصينية واليابانية). | ||
| − | === | + | === <code>left</code> === |
عرض علامة التوكيد على يسار النص في نمط الكتابة الرأسي (كاللغة الصينية واليابانية). | عرض علامة التوكيد على يسار النص في نمط الكتابة الرأسي (كاللغة الصينية واليابانية). | ||
مراجعة 10:32، 27 يوليو 2018
الخاصية text-decoration-position في CSS تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد.
بطاقة الخاصية
| القيمة الابتدائية | over right
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| الوسائط | مرئية |
| القيمة المحسوبة | كما حُدِّدَت. |
/* القيمة الابتدائية */
text-emphasis-position: over right;
/* الكلمات المحجوزة */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;
/* القيم العامة */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: unset;
أمثلة
مثال عن استخدام الخاصية text-emphasis-position على العنصر <strong> لوضع علامات التوكيد أسفل النص. رجاءً راجع قسم «دعم المتصفحات» لمعلومات عن الاختلافات بين المتصفحات حول صيغة هذه الخاصية.
<strong>هذا نصٌ مهمٌ جدًا!</strong>
شيفرة CSS:
strong {
text-emphasis-color: #069;
text-emphasis-style: "*";
text-emphasis-position: under left;
-webkit-text-emphasis-color: #069;
-webkit-text-emphasis-style: "*";
-webkit-text-emphasis-position: under;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي (over و under) | 25.0 مع السابقة -webkit-
|
46.0 | غير مدعومة | 15.0 مع السابقة -webkit-
|
7.1 |
| left و right | غير مدعومة | 46.0 | غير مدعومة | غير مدعومة | 7.1 |
على الرغم من أنَّ مواصفة CSS Text Decoration Module Level 3 تقول أنَّ استخدام القيمتين left و right اختيارٌ، لكن متصفح Firefox يصير على وجودهما، حتى لو لم يكن لهما فائدة (كما عند استخدام هذه الخاصية على النصوص العربية والإنكليزية).
لكن في المقابل، لا يدعم متصفح Chrome الكلمتين المحجوزتين left و right حتى لو استخدمنا السابقة -webkit-.
البنية العامة
تقبل الخاصية text-emphasis-position القيم الآتية.
over
عرض علامة التوكيد فوق النص في نمط الكتابة الأفقي (كاللغة العربية والإنكليزية).
under
عرض علامة التوكيد تحت النص في نمط الكتابة الأفقي (كاللغة العربية والإنكليزية).
right
عرض علامة التوكيد على يمين النص في نمط الكتابة الرأسي (كاللغة الصينية واليابانية).
left
عرض علامة التوكيد على يسار النص في نمط الكتابة الرأسي (كاللغة الصينية واليابانية).
البنية الرسمية
text-emphasis-position: [over|under] && [right|left]?|initial|inherit;