الفرق بين المراجعتين لصفحة: «CSS/word-spacing»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>word-spacing</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>word-spacing</code>}}</noinclude> | ||
الخاصية <code>word-spacing</code> في CSS تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم. | الخاصية <code>word-spacing</code> في CSS تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 34: | سطر 20: | ||
|طول مطلق أو الكلمة المحجوزة <code>normal</code>. | |طول مطلق أو الكلمة المحجوزة <code>normal</code>. | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* كلمة محجوزة */ | |||
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; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام قيم موجبة وسالبة مع الخاصية <code>word-spacing</code> لزيادة (أو إنقاص) التباعد بين الكلمات:<syntaxhighlight lang="html"> | مثال عن استخدام قيم موجبة وسالبة مع الخاصية <code>word-spacing</code> لزيادة (أو إنقاص) التباعد بين الكلمات:<syntaxhighlight lang="html"> | ||
<p class="word-spacing-px"> | <p class="word-spacing-px">محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب</p> | ||
<p class="word-spacing-minus"> | <p class="word-spacing-minus">محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب</p> | ||
<p class="word-spacing-percent"> | <p class="word-spacing-percent">محتوى موسوعة حسوب هو محتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة. إذا كنت تبحث عن دروس تطبيقية، فننصحك بزيارة أكاديمية حسوب</p> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
.word-spacing-px { word-spacing: 1em; } | .word-spacing-px { word-spacing: 1em; } | ||
| سطر 71: | سطر 75: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>word-spacing</code> إحدى القيم التالية. | تقبل الخاصية <code>word-spacing</code> إحدى القيم التالية. | ||
=== | === <code>normal</code> === | ||
التباعد الطبيعي بين الكلمات كما هو مُعرَّف في الخط الحالي أو في المتصفح. | التباعد الطبيعي بين الكلمات كما هو مُعرَّف في الخط الحالي أو في المتصفح. | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد الزيادة (أو النقصان) بين تباعد الكلمات بالأطوال المطلقة. يُسمَح باستخدام القيم السالبة. | تحديد الزيادة (أو النقصان) بين تباعد الكلمات بالأطوال المطلقة. يُسمَح باستخدام القيم السالبة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد الزيادة (أو النقصان) بين تباعد الكلمات على شكل نسبة مئوية من عرض الحرف المتقدم (أي advance width). يُسمَح باستخدام القيم السالبة. | تحديد الزيادة (أو النقصان) بين تباعد الكلمات على شكل نسبة مئوية من عرض الحرف المتقدم (أي advance width). يُسمَح باستخدام القيم السالبة. | ||
| سطر 85: | سطر 89: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/white-space|white-space]]</code> التي تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة. | |||
* صفحة الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. | |||
* صفحة الخاصية <code>[[CSS/word-break|word-break]]</code> التي تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-text-3/#propdef-word-spacing CSS Text Module Level 3]. | * مسودة [https://drafts.csswg.org/css-text-3/#propdef-word-spacing CSS Text Module Level 3]. | ||
| سطر 90: | سطر 99: | ||
* مواصفة [http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing CSS Level 2 (Revision 1)]. | ||
* مواصفة [http://www.w3.org/TR/CSS1/#word-spacing CSS Level 1]. | * مواصفة [http://www.w3.org/TR/CSS1/#word-spacing CSS Level 1]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text]] | [[تصنيف:CSS Text|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text Decoration]] | [[تصنيف:CSS Text Decoration|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 07:33، 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التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. - صفحة الخاصية
word-breakالتي تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.
مصادر ومواصفات
- مسودة CSS Text Module Level 3.
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.