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

مراجعة 10:36، 27 يوليو 2018

الخاصية text-indent في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين hanging و each-line لتغيير هذا السلوك (انظر «دعم المتصفحات»).

بطاقة الخاصية

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

/* <length> أطوال */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> نسبة مئوية*/
text-indent: 15%;

/* قيم عامة */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى.

أمثلة

مثال عن استخدام طول مطلق <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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>text-indent</code>}}</noinclude>
-الخاصية <code>text-indent</code> في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code> لتغيير هذا السلوك (انظر «<nowiki/>[[#دعم المتصفحات|دعم المتصفحات]]»).<nowiki/><syntaxhighlight lang="css">
+الخاصية <code>text-indent</code> في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code> لتغيير هذا السلوك (انظر «<nowiki/>[[#دعم المتصفحات|دعم المتصفحات]]»).
-/* <length> أطوال */
-text-indent: 3mm;
-text-indent: 40px;
-/* <percentage> نسبة مئوية*/
-text-indent: 15%;
-/* قيم عامة */
+== بطاقة الخاصية ==
-text-indent: inherit;
-text-indent: initial;
-text-indent: unset;
-</syntaxhighlight>تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى.
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 30: / سطر 20: @@
 |كما حُدِّدت.
 |}
+<syntaxhighlight lang="css">
+/* <length> أطوال */
+text-indent: 3mm;
+text-indent: 40px;
+/* <percentage> نسبة مئوية*/
+text-indent: 15%;
+/* قيم عامة */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+</syntaxhighlight>تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى.
 == أمثلة ==
@@ سطر 71: / سطر 75: @@
 == البنية العامة ==
 تقبل الخاصية <code>text-indent</code> إحدى القيم التالية.
-=== القيمة <code>[[CSS/length|<length>]]</code> ===
+===  <code>[[CSS/length|<length>]]</code> ===
 تُحدَّد المسافة البادئة كطول مطلق <code>[[CSS/length|<length>]]</code>، ويُسمَح باستخدام القيم السالبة.
-=== القيمة <code>[[CSS/percentage|<percentage>]]</code> ===
+===  <code>[[CSS/percentage|<percentage>]]</code> ===
 تُحدَّد المسافة البادئة كنسبة مئوية من عرض العنصر الكتلي الحاوي على العنصر الحالي.
 === البنية الرسمية ===