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

مراجعة 07:31، 12 أغسطس 2018

الخاصية word-spacing في CSS تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم.

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

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

/* كلمة محجوزة */
word-spacing: normal;

/* <length> أطوال */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> نسب مئوية */
word-spacing: 50%;
word-spacing: 200%;

/* قيم عامة */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

أمثلة

مثال عن استخدام قيم موجبة وسالبة مع الخاصية word-spacing لزيادة (أو إنقاص) التباعد بين الكلمات:

<p class="word-spacing-px">محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب</p>
<p class="word-spacing-minus">محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب</p>
<p class="word-spacing-percent">محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب</p>

شيفرة CSS:

.word-spacing-px      { word-spacing: 1em; }
.word-spacing-minus   { word-spacing: -3px; }
.word-spacing-percent { word-spacing: 150%; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	6.0	3.5	1.0
النسب المئوية	غير مدعومة	45.0	غير مدعومة	غير مدعومة	غير مدعومة

البنية العامة

تقبل الخاصية word-spacing إحدى القيم التالية.

`normal`

التباعد الطبيعي بين الكلمات كما هو مُعرَّف في الخط الحالي أو في المتصفح.

`<length>`

تحديد الزيادة (أو النقصان) بين تباعد الكلمات بالأطوال المطلقة. يُسمَح باستخدام القيم السالبة.

`<percentage>`

تحديد الزيادة (أو النقصان) بين تباعد الكلمات على شكل نسبة مئوية من عرض الحرف المتقدم (أي advance width). يُسمَح باستخدام القيم السالبة.

البنية الرسمية

word-spacing: normal | <length> | <percentage>;

انظر أيضًا

صفحة الخاصية white-space التي تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة.
صفحة الخاصية overflow-wrap التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

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

مسودة CSS Text Module Level 3.
مسودة CSS Transitions.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 89: / سطر 89: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/white-space|white-space]]</code> التي تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة.
+* صفحة الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-text-3/#propdef-word-spacing CSS Text Module Level 3].