الفرق بين المراجعتين ل"CSS/text-align-last"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-align-last</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-align-last</code>}}</noinclude> | ||
| − | الخاصية <code>text-align-last</code> في CSS تصف كيف تكون محاذاة آخر سطر نصي. | + | الخاصية <code>text-align-last</code> في CSS تصف كيف تكون محاذاة آخر سطر نصي. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|كما حُدِّدت. | |كما حُدِّدت. | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* كلمات محجوزة */ | ||
| + | text-align-last: auto; | ||
| + | text-align-last: start; | ||
| + | text-align-last: end; | ||
| + | text-align-last: left; | ||
| + | text-align-last: right; | ||
| + | text-align-last: center; | ||
| + | text-align-last: justify; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | text-align-last: inherit; | ||
| + | text-align-last: initial; | ||
| + | text-align-last: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 92: | سطر 96: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-align-last</code> إحدى الكلمات المحجوزة الآتية. | تقبل الخاصية <code>text-align-last</code> إحدى الكلمات المحجوزة الآتية. | ||
| − | === | + | === <code>auto</code> === |
| − | ستتم محاذاة آخر سطر وفقًا | + | ستتم محاذاة آخر سطر وفقًا ل<code>[[CSS/text-align|text-align]]</code>، إلا إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> تساوي <code>justify</code>، وفي هذه الحالة ستكون هذه الخاصية مساويةً إلى <code>start</code>. |
| − | === | + | === <code>start</code> === |
تسلك سلوك الكلمة المحجوزة <code>left</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>right</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | تسلك سلوك الكلمة المحجوزة <code>left</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>right</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | ||
| − | === | + | === <code>end</code> === |
تسلك سلوك الكلمة المحجوزة <code>right</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>left</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | تسلك سلوك الكلمة المحجوزة <code>right</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>left</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | ||
| − | === | + | === <code>left</code> === |
سيُحاذى آخر سطر إلى الحافة اليسرى من الصندوق السطري (line box). | سيُحاذى آخر سطر إلى الحافة اليسرى من الصندوق السطري (line box). | ||
| − | === | + | === <code>right</code> === |
سيُحاذى آخر سطر إلى الحافة اليمنى من الصندوق السطري (line box). | سيُحاذى آخر سطر إلى الحافة اليمنى من الصندوق السطري (line box). | ||
| − | === | + | === <code>center</code> === |
سيُحاذى آخر سطر إلى منتصف الصندوق السطري (line box). | سيُحاذى آخر سطر إلى منتصف الصندوق السطري (line box). | ||
| − | === | + | === <code>justify</code> === |
سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري. | سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 111: | سطر 115: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/text-align|text-align]]</code> التي تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية. | ||
| + | * صفحة الخاصية <code>[[CSS/right|right]]</code> التي تساهم في تحديد الموضع الأفقي الأيمن لأحد العناصر التي يمكن أن يتغير مكانها. | ||
| + | * صفحة الخاصية <code>[[CSS/left|left]]</code> التي تساهم في تحديد الموضع الأفقي الأيسر لأحد العناصر التي يمكن أن يتغير مكانها. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-text-3/#text-align-last CSS Text Module Level 3]. | * مسودة [https://drafts.csswg.org/css-text-3/#text-align-last CSS Text Module Level 3]. | ||
المراجعة الحالية بتاريخ 17:48، 30 يوليو 2018
الخاصية text-align-last في CSS تصف كيف تكون محاذاة آخر سطر نصي.
بطاقة الخاصية
| القيمة الابتدائية | auto |
|---|---|
| تُطبَّق على | الحاويات الكتلية. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدت. |
/* كلمات محجوزة */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
/* القيم العامة */
text-align-last: inherit;
text-align-last: initial;
text-align-last: unset;
أمثلة
مثال عن استخدام جميع الكلمات المحجوزة المدعومة في خاصية text-align-last، وسنكرر كل مثال مرتين، مرةً على فقرةٍ باللغة الإنكليزية (اتجاه النص من اليسار إلى اليمين)، ومرةً على فقرةٍ باللغة العربية (اتجاه النص من اليمين إلى اليسار)، لاحظ أنَّنا ضبطنا الخاصية text-align إلى start وذلك لمحاذاة جميع النص ما عدا آخر سطر:
<p class="start" dir="ltr">Testing <code>text-align-last: start</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="start" dir="rtl">تجربة <code>text-align-last: start</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>
<p class="end" dir="ltr">Testing <code>text-align-last: end</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="end" dir="rtl">تجربة <code>text-align: end</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>
<p class="left" dir="ltr">Testing <code>text-align-last: left</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="left" dir="rtl">تجربة <code>text-align-last: left</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>
<p class="right" dir="ltr">Testing <code>text-align-last: right</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="right" dir="rtl">تجربة <code>text-align-last: right</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>
<p class="center" dir="ltr">Testing <code>text-align-last: center</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align.</p>
<p class="center" dir="rtl">تجربة <code>text-align-last: center</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>
<p class="justify" dir="ltr">Testing <code>text-align-last: justify</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="justify" dir="rtl">تجربة <code>text-align-last: justify</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
شيفرة CSS:
p {
background-color: #f8f9fa;
border: 1px solid #eaecf0;
padding: 1em;
margin: 1em;
text-align: start;
}
.end { text-align-last: end; }
.left { text-align-last: left; }
.right { text-align-last: right; }
.start { text-align-last: start; }
.center { text-align-last: center; }
.justify { text-align-last: justify; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 47.0 | 49.0 | غير مدعومة | مدعومة | غير مدعومة |
البنية العامة
تقبل الخاصية text-align-last إحدى الكلمات المحجوزة الآتية.
auto
ستتم محاذاة آخر سطر وفقًا لtext-align، إلا إذا كانت الخاصية text-align تساوي justify، وفي هذه الحالة ستكون هذه الخاصية مساويةً إلى start.
start
تسلك سلوك الكلمة المحجوزة left إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك right إذا كان اتجاه العنصر من اليمين إلى اليسار.
end
تسلك سلوك الكلمة المحجوزة right إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك left إذا كان اتجاه العنصر من اليمين إلى اليسار.
left
سيُحاذى آخر سطر إلى الحافة اليسرى من الصندوق السطري (line box).
right
سيُحاذى آخر سطر إلى الحافة اليمنى من الصندوق السطري (line box).
center
سيُحاذى آخر سطر إلى منتصف الصندوق السطري (line box).
justify
سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري.
البنية الرسمية
text-align-last: auto | start | end | left | right | center | justify;
انظر أيضًا
- صفحة الخاصية
text-alignالتي تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية. - صفحة الخاصية
rightالتي تساهم في تحديد الموضع الأفقي الأيمن لأحد العناصر التي يمكن أن يتغير مكانها. - صفحة الخاصية
leftالتي تساهم في تحديد الموضع الأفقي الأيسر لأحد العناصر التي يمكن أن يتغير مكانها.
مصادر ومواصفات
- مسودة CSS Text Module Level 3.