الفرق بين المراجعتين ل"CSS/text-justify"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-justify</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-justify</code>}}</noinclude> | ||
| − | الخاصية <code>text-justify</code> في CSS تُعرِّف طريقة توزيع النص إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً إلى القيمة <code>justify</code>. | + | الخاصية <code>text-justify</code> في CSS تُعرِّف طريقة توزيع النص إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً إلى القيمة <code>justify</code>. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 29: | سطر 20: | ||
|كما حُدِّدت. | |كما حُدِّدت. | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* كلمات محجوزة */ | ||
| + | text-justify: none; | ||
| + | text-justify: auto; | ||
| + | text-justify: inter-word; | ||
| + | text-justify: inter-character; | ||
| + | |||
| + | /* قيم عامة */ | ||
| + | text-justify: inherit; | ||
| + | text-justify: initial; | ||
| + | text-justify: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام مختلف قيم الخاصية <code>text-justify</code>:<syntaxhighlight lang="html"> | مثال عن استخدام مختلف قيم الخاصية <code>text-justify</code>:<syntaxhighlight lang="html"> | ||
| − | <p class="none"><code>text-justify: none</code> —<br> | + | <p class="none"><code>text-justify: none</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين. |
| − | <p class="auto"><code>text-justify: auto</code> —<br> | + | </p> |
| − | <p class="word"><code>text-justify: inter-word</code> —<br> | + | <p class="auto"><code>text-justify: auto</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين. |
| − | <p class="char"><code>text-justify: inter-character</code> —<br> | + | </p> |
| + | <p class="word"><code>text-justify: inter-word</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين. | ||
| + | </p> | ||
| + | <p class="char"><code>text-justify: inter-character</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين. | ||
| + | </p> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p { | p { | ||
| سطر 71: | سطر 79: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-justify</code> إحدى الكلمات المحجوزة التالية. | تقبل الخاصية <code>text-justify</code> إحدى الكلمات المحجوزة التالية. | ||
| − | === | + | === <code>none</code> === |
تؤدي هذه الخاصية إلى عدم ملء السطر بالنص، كما لو لم تكن الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً من الأساس، وستستفيد من هذه الكلمة المحجوزة إن أردتَ تعطيل ملء السطر بالنص لأحد الأسباب. | تؤدي هذه الخاصية إلى عدم ملء السطر بالنص، كما لو لم تكن الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً من الأساس، وستستفيد من هذه الكلمة المحجوزة إن أردتَ تعطيل ملء السطر بالنص لأحد الأسباب. | ||
| − | === | + | === <code>auto</code> === |
سيختار المتصفح أفضل طريقة لملء السطر بالنص بالموازنة بين الأداء والجودة، وهذا أفضل خيار لبعض اللغات مثل الإنكليزية، وهو السلوك الافتراضي إن لم تُضبَط الخاصية <code>text-justify</code>. | سيختار المتصفح أفضل طريقة لملء السطر بالنص بالموازنة بين الأداء والجودة، وهذا أفضل خيار لبعض اللغات مثل الإنكليزية، وهو السلوك الافتراضي إن لم تُضبَط الخاصية <code>text-justify</code>. | ||
| − | === | + | === <code>inter-word</code> === |
| − | سيملأ النصُ السطرَ بإضافة فراغات بين الكلمات (وذلك بتغيير | + | سيملأ النصُ السطرَ بإضافة فراغات بين الكلمات (وذلك بتغيير الخاصية <code>[[CSS/word-spacing|word-spacing]]</code> بكفاءة)، وهذه القيمة مناسبة للغات التي يُفصل بين كلماتها بفراغات مثل الإنكليزية. |
| − | === | + | === <code>inter-character</code> === |
| − | سيملأ النصُ السطرَ بإضافة فراغات بين الأحرف (وذلك بتغيير | + | سيملأ النصُ السطرَ بإضافة فراغات بين الأحرف (وذلك بتغيير الخاصية <code>[[CSS/letter-spacing|letter-spacing]]</code> بكفاءة)، وهذه القيمة مناسبة لبعض اللغات مثل اليابانية. |
=== البنية الرسمية === | === البنية الرسمية === | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
| سطر 84: | سطر 92: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/text-emphasis|text-emphasis]]</code> التي تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي في العنصر. | ||
| + | * صفحة الخاصية <code>[[CSS/text-align|text-align]]</code> التي تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية. | ||
| + | * صفحة الخاصية <code>[[CSS/text-indent|text-indent]]</code> التي تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-text-3/#text-justify-property CSS Text Module Level 3]. | * مسودة [https://drafts.csswg.org/css-text-3/#text-justify-property CSS Text Module Level 3]. | ||
المراجعة الحالية بتاريخ 18:08، 31 يوليو 2018
الخاصية text-justify في CSS تُعرِّف طريقة توزيع النص إذا كانت الخاصية text-align مضبوطةً إلى القيمة justify.
بطاقة الخاصية
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | العناصر السطرية، وخلايا الجداول. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدت. |
/* كلمات محجوزة */
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
/* قيم عامة */
text-justify: inherit;
text-justify: initial;
text-justify: unset;
أمثلة
مثال عن استخدام مختلف قيم الخاصية text-justify:
<p class="none"><code>text-justify: none</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
<p class="auto"><code>text-justify: auto</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
<p class="word"><code>text-justify: inter-word</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
<p class="char"><code>text-justify: inter-character</code> —<br>تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
شيفرة CSS:
p {
border: 1px solid #eaecf0;
background-color: #f8f9fa;
padding: 1em;
width: 50%;
margin: 10px auto;
text-align: justify;
}
.none { text-justify: none;}
.auto { text-justify: auto; }
.word { text-justify: inter-word; }
.char { text-justify: inter-character; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | غير مدعومة | 55.0 | 11 | غير مدعومة | غير مدعومة |
البنية العامة
تقبل الخاصية text-justify إحدى الكلمات المحجوزة التالية.
none
تؤدي هذه الخاصية إلى عدم ملء السطر بالنص، كما لو لم تكن الخاصية text-align مضبوطةً من الأساس، وستستفيد من هذه الكلمة المحجوزة إن أردتَ تعطيل ملء السطر بالنص لأحد الأسباب.
auto
سيختار المتصفح أفضل طريقة لملء السطر بالنص بالموازنة بين الأداء والجودة، وهذا أفضل خيار لبعض اللغات مثل الإنكليزية، وهو السلوك الافتراضي إن لم تُضبَط الخاصية text-justify.
inter-word
سيملأ النصُ السطرَ بإضافة فراغات بين الكلمات (وذلك بتغيير الخاصية word-spacing بكفاءة)، وهذه القيمة مناسبة للغات التي يُفصل بين كلماتها بفراغات مثل الإنكليزية.
inter-character
سيملأ النصُ السطرَ بإضافة فراغات بين الأحرف (وذلك بتغيير الخاصية letter-spacing بكفاءة)، وهذه القيمة مناسبة لبعض اللغات مثل اليابانية.
البنية الرسمية
text-justify: auto | inter-character | inter-word | none;
انظر أيضًا
- صفحة الخاصية
text-emphasisالتي تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي في العنصر. - صفحة الخاصية
text-alignالتي تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية. - صفحة الخاصية
text-indentالتي تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي.
مصادر ومواصفات
- مسودة CSS Text Module Level 3.