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

مراجعة 10:38، 27 يوليو 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</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;

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

مسودة CSS Text Module Level 3.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>text-justify</code>}}</noinclude>
-الخاصية <code>text-justify</code> في CSS تُعرِّف طريقة توزيع النص إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً إلى القيمة <code>justify</code>.<nowiki/><nowiki/><syntaxhighlight lang="css">
+الخاصية <code>text-justify</code> في CSS تُعرِّف طريقة توزيع النص إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً إلى القيمة <code>justify</code>.
-/* كلمات محجوزة */
-text-justify: none;
-text-justify: auto;
-text-justify: inter-word;
-text-justify: inter-character;
-/* قيم عامة */
+== بطاقة الخاصية ==
-text-justify: inherit;
-text-justify: initial;
-text-justify: unset;
-</syntaxhighlight>
 {| 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>
 == أمثلة ==
@@ سطر 71: / سطر 75: @@
 == البنية العامة ==
 تقبل الخاصية <code>text-justify</code> إحدى الكلمات المحجوزة التالية.
-=== القيمة <code>none</code> ===
+=== <code>none</code> ===
 تؤدي هذه الخاصية إلى عدم ملء السطر بالنص، كما لو لم تكن الخاصية <code>[[CSS/text-align|text-align]]</code> مضبوطةً من الأساس، وستستفيد من هذه الكلمة المحجوزة إن أردتَ تعطيل ملء السطر بالنص لأحد الأسباب.
-=== القيمة <code>auto</code> ===
+===  <code>auto</code> ===
 سيختار المتصفح أفضل طريقة لملء السطر بالنص بالموازنة بين الأداء والجودة، وهذا أفضل خيار لبعض اللغات مثل الإنكليزية، وهو السلوك الافتراضي إن لم تُضبَط الخاصية <code>text-justify</code>.
-=== القيمة <code>inter-word</code> ===
+=== <code>inter-word</code> ===
-سيملأ النصُ السطرَ بإضافة فراغات بين الكلمات (وذلك بتغيير قيمة الخاصية <code>[[CSS/word-spacing|word-spacing]]</code> بكفاءة)، وهذه القيمة مناسبة للغات التي يُفصل بين كلماتها بفراغات مثل الإنكليزية.
+سيملأ النصُ السطرَ بإضافة فراغات بين الكلمات (وذلك بتغيير الخاصية <code>[[CSS/word-spacing|word-spacing]]</code> بكفاءة)، وهذه القيمة مناسبة للغات التي يُفصل بين كلماتها بفراغات مثل الإنكليزية.
-=== القيمة <code>inter-character</code> ===
+===  <code>inter-character</code> ===
-سيملأ النصُ السطرَ بإضافة فراغات بين الأحرف (وذلك بتغيير قيمة الخاصية <code>[[CSS/letter-spacing|letter-spacing]]</code> بكفاءة)، وهذه القيمة مناسبة لبعض اللغات مثل اليابانية.
+سيملأ النصُ السطرَ بإضافة فراغات بين الأحرف (وذلك بتغيير الخاصية <code>[[CSS/letter-spacing|letter-spacing]]</code> بكفاءة)، وهذه القيمة مناسبة لبعض اللغات مثل اليابانية.
 === البنية الرسمية ===
 <syntaxhighlight lang="css">