الفرق بين المراجعتين لصفحة: «CSS/text-indent»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 86: | سطر 86: | ||
*مواصفة [http://www.w3.org/TR/CSS2/text.html#indentation-prop CSS Level 2 (Revision 1)]. | *مواصفة [http://www.w3.org/TR/CSS2/text.html#indentation-prop CSS Level 2 (Revision 1)]. | ||
*مواصفة [http://www.w3.org/TR/CSS1/#text-indent CSS Level 1]. | *مواصفة [http://www.w3.org/TR/CSS1/#text-indent CSS Level 1]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text]] | [[تصنيف:CSS Text|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text Decoration]] | [[تصنيف:CSS Text Decoration|{{SUBPAGENAME}}]] | ||
مراجعة 15:35، 28 يناير 2018
الخاصية text-indent في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين hanging و each-line لتغيير هذا السلوك (انظر «دعم المتصفحات»).
/* <length> أطوال */
text-indent: 3mm;
text-indent: 40px;
/* <percentage> نسبة مئوية*/
text-indent: 15%;
/* قيم عامة */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى.
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | العناصر الكتلية. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | كما حُدِّدت. |
أمثلة
مثال عن استخدام طول مطلق <length> ونسبة مئوية <percentage> مع الخاصية text-indent لإضافة مسافة بادئة قبل أوّل سطر في الفقرة <p>:
<p class="length">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="percent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
شيفرة CSS:
p {
border: 1px solid #eaecf0;
background-color: #f8f9fa;
padding: 1em;
}
.length { text-indent: 2em; }
.percent { text-indent: 5%; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
| hanging و each-line | غير مدعومة | غير مدعومة | غير مدعومة | غير مدعومة | غير مدعومة |
البنية العامة
تقبل الخاصية text-indent إحدى القيم التالية.
القيمة <length>
تُحدَّد المسافة البادئة كطول مطلق <length>، ويُسمَح باستخدام القيم السالبة.
القيمة <percentage>
تُحدَّد المسافة البادئة كنسبة مئوية من عرض العنصر الكتلي الحاوي على العنصر الحالي.
البنية الرسمية
text-indent: <length> | <percentage>;
مصادر ومواصفات
- مسودة CSS Text Module Level 3، أضافت هذه المواصفة الكلمتين المحجوزتين
hangingوeach-line، لكنها ليستا مدعومتين في أيّ متصفح حتى الآن. - مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.