عرض مصدر CSS/Topics/Text

{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>[[CSS/direction|direction]]</code>
|تضبط اتجاه النص، ونستخدم القيمة <code>rtl</code> معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و <code>ltr</code> للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية <code>dir</code> على عنصر <code>[[HTML/html|<html>]]</code> لكامل المستند، وليس باستخدام الخاصية <code>direction</code>.
|-
|<code>[[CSS/letter-spacing|letter-spacing]]</code>
|تُحدِّد ما هو التباعد بين الأحرف النصية.
|-
|<code>[[CSS/line-break|line-break]]</code>
|تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز.
|-
|<code>[[CSS/overflow-wrap|overflow-wrap]]</code>
|تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/word-break|word-break]]</code>، ستنتقل الخاصية<code>overflow-wrap</code> إلى سطرٍ جديد إذا لم يتمكن المتصفح من وضع الكلمة في سطرٍ بمفردها دون تجاوز حدود صندوق المحتوى.
|-
|<code>[[CSS/tab-size|tab-size]]</code>
|تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز <code>U+0009</code> في يونيكود.
|-
|<code>[[CSS/text-align|text-align]]</code>
|تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية؛ لاحظ أنَّ الخاصية <code>text-align</code> لا تتحكم بمحاذاة العناصر الكتلية، وإنما تتحكم بمحاذاة بالمحتوى السطري الموجود داخلها.
|-
|<code>[[CSS/text-align-last|text-align-last]]</code>
|تصف كيف تكون محاذاة آخر سطر نصي.
|-
|<code>[[CSS/text-decoration|text-decoration]]</code>
|تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن خطوط الزخرفة بآنٍ واحد، وهي تتضمن <code>[[CSS/text-decoration-line|text-decoration-line]]</code> و <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-decoration-style|text-decoration-style]]</code>.
|-
|<code>[[CSS/text-decoration-color|text-decoration-color]]</code>
|تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر.
|-
|<code>[[CSS/text-decoration-line|text-decoration-line]]</code>
|تُحدِّد نوع خطوط الزخرفة (decorative lines) المستخدمة على النص. إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>.
|-
|<code>[[CSS/text-decoration-style|text-decoration-style]]</code>
|تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص (المضبوطة عبر الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>). إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>.
|-
|<code>[[CSS/text-emphasis|text-emphasis]]</code>
|تُحدِّد علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن ضبط علامات التوكيد معًا، وهي تتضمن <code>[[CSS/text-emphasis-style|text-emphasis-style]]</code> و <code>[[CSS/text-emphasis-color|text-emphasis-color]]</code>.
|-
|<code>[[CSS/text-emphasis-color|text-emphasis-color]]</code>
|تُحدِّد اللون المستخدم لرسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة <code>[[CSS/text-emphasis|text-emphasis]]</code>.
|-
|<code>[[CSS/text-emphasis-position|text-emphasis-position]]</code>
|تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد.
|-
|<code>[[CSS/text-emphasis-style|text-emphasis-style]]</code>
|تُحدِّد نوع علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة <code>[[CSS/text-emphasis|text-emphasis]]</code>.
|-
|<code>[[CSS/text-indent|text-indent]]</code>
|تُحدِّد مقدار المسافة البدائة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code> لتغيير هذا السلوك (انظر «<nowiki/>[[CSS/text-indent#.D8.AF.D8.B9.D9.85 .D8.A7.D9.84.D9.85.D8.AA.D8.B5.D9.81.D8.AD.D8.A7.D8.AA|دعم المتصفحات]]»).
|-
|<code>[[CSS/text-justify|text-justify]]</code>
|تُعرِّف طريقة توزيع النص إذا كانت الخاصية<code>[[CSS/text-align|text-align]]</code> مضبوطةً إلى القيمة <code>justify</code>.
|-
|<code>[[CSS/text-shadow|text-shadow]]</code>
|تضيف تأثير الظلال على النص، وتقبل تحديد أكثر من ظل (يُفصَل بين قيمها بفاصلة)، وسيُطبَّق الظل على النص وعلى خطوط الزخرفة <code>[[CSS/text-decoration|text-decoration]]</code> التابعة للعنصر.
|-
|<code>[[CSS/text-transform|text-transform]]</code>
|تُحدِّد ما هي حالة الأحرف التي سيُعرَض فيها العنصر؛ إذ يمكن استخدام هذه الخاصية لجعل الأحرف كلها بالحالة الكبيرة، أو بالحالة الصغيرة، أو جعل أوّل حرف من كل كلمة كبيرًا.
يجدر بالذكر أنَّ هذه الخاصية ليس لها أثر على النصوص العربية.
|-
|<code>[[CSS/white-space|white-space]]</code>
|الخاصية <code>white-space</code> في لغة CSS تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة، فانظر إلى خاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> و <code>[[CSS/word-break|word-break]]</code>.
|-
|<code>[[CSS/word-break|word-break]]</code>
|تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code>، ستنتقل الخاصية<code>word-break</code> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.
|-
|<code>[[CSS/word-spacing|word-spacing]]</code>
|تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم.
|}