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

المراجعة الحالية بتاريخ 18:08، 31 يوليو 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">تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
<p class="percent">تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</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>;

انظر أيضًا

صفحة الخاصية text-emphasis التي تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
صفحة الخاصية text-justify التي تُعرِّف طريقة توزيع النص إذا كانت الخاصية text-align مضبوطةً إلى القيمة justify.

مصادر ومواصفات

مسودة CSS Text Module Level 3، أضافت هذه المواصفة الكلمتين المحجوزتين hanging و each-line، لكنها ليستا مدعومتين في أيّ متصفح حتى الآن.
مسودة CSS Transitions.

مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 37: / سطر 37: @@
 == أمثلة ==
 مثال عن استخدام طول مطلق <code>[[CSS/length|<length>]]</code> ونسبة مئوية <code>[[CSS/percentage|<percentage>]]</code> مع الخاصية <code>text-indent</code> لإضافة مسافة بادئة قبل أوّل سطر في الفقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
-<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="length">تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
-<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>
+</p>
+<p class="percent">تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
+</p>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 p {
@@ سطر 84: / سطر 86: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/text-emphasis|text-emphasis]]</code> التي تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي في العنصر.
+* صفحة الخاصية <code>[[CSS/text-justify|text-justify]]</code> التي تُعرِّف طريقة توزيع النص إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً إلى القيمة <code>justify</code>.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-text-3/#text-indent CSS Text Module Level 3]، أضافت هذه المواصفة الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code>، لكنها ليستا مدعومتين في أيّ متصفح حتى الآن.