ما هي القيم التي يمكن أن تأخذها خاصية محاذاة النص؟ خصائص CSS لتصميم نص HTML (محاذاة رأسية، محاذاة النص، مسافة بادئة للنص وغيرها). علامات HTML التي تحدد محاذاة النص والمسافة البادئة

и

В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

HTML теги, определяющие выравнивание текста, отступ

Выровненный по ширине текст используется в типографии

В примере ниже показано, как выровнить текст по ширине страницы:

align="left"	align="right"
	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
align="justify"	align="center"
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.

Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.

Выравнивание текста в HTML по центру и по ширине

Выравнивание текста в HTML по центру, текст справа :

Результат:

Атрибуты и значения

• align="left" - определяет выравнивание текста слева (по умолчанию).
• align="center" - выравнивает текст по центру .
• align="right" - выравнивает текст справа .

Выравнивание | HTML отступ текста

HTML текст и его отступ слева страницы

Произведем отступ текста слева двумя способами:

Результат:

Посмотреть в новом окне.

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. محاذاة النص في متصفح Safari

يفسر Internet Explorer حتى الإصدار 7.0 هذا المثال بشكل مختلف إلى حد ما عن المتصفحات الأخرى، حيث لا يقوم بمحاذاة النص فحسب، بل يقوم أيضًا بمحاذاة الكتل (الشكل 2).

أرز. 2. قم بمحاذاة النص متصفح الانترنتاكسبلورر 7

نموذج الكائن

document.getElementById("elementID").style.textAlign

المتصفحات

لا يقوم برنامج IE حتى الإصدار 7.0 بمحاذاة محتويات عنصر مستوى الكتلة فحسب، بل يقوم أيضًا بمحاذاة العنصر نفسه.

خاصية محاذاة النص-الأخير ( لا ينبغي الخلط بينه وبين محاذاة HTML) يحدد كيفية محاذاة السطر الأخير من الكتلة أو السطر قبل الفاصل القسري. وهذا مهم لأنه في الخط الأخيرعادةً لا تحتوي الفقرة على نص كافٍ لملء كل المساحة.

في هذه المقالة، سنغطي جميع جوانب خاصية text-align-last، بما في ذلك القيم التي تقبلها ودعم المتصفح.

الاستخدام والقيم المقبولة

يعد استخدام خاصية text-align-last أمرًا بسيطًا. فيما يلي مقتطف التعليمات البرمجية لمحاذاة السطر الأخير من النص إلى اليمين:

رسم بياني للمقدمة (محاذاة النص: ضبط؛ // مطلوب لـ IE وEdge text-align-last: right;)

الخاصية يمكن أن تأخذ سبع قيم. من المحتمل أنك على دراية بقيم نص HTML القياسية لـ align:left و right و center . يقومون بمحاذاة النص الموجود في السطر الأخير إلى يمين ويسار ووسط الحاوية.

يوضح المثال أدناه الاختلافات بين هذه القيم الثلاث:

عرض المثال

القيمة الرابعة، justify ، تقوم بضبط السطر الأخير بحيث يتم توزيع النص بالتساوي عبر عرض الحاوية بالكامل. ويتم تحقيق ذلك عن طريق إضافة عدد مناسب من المسافات بين الكلمات. اعتمادًا على حجم النص، يمكن استخدام هذه الخاصية لملء المساحة بالكامل في السطر الأخير دون أن ينتهي الأمر بوجود فجوات كبيرة جدًا بين الكلمات.

يتم أيضًا نشر النص الموجود في الفقرة الثانية عبر العرض، ولكن نظرًا لأن السطر الأخير يحتوي على كلمة واحدة فقط، فسيتم وضعه على اليسار.

عرض المثال

تعتبر محاذاة السطر الأخير من النص إلى اليسار مناسبة للغات التي يتم قراءتها من اليسار إلى اليمين ( لتر)، ولكن هذا سيكون غير صحيح للغات RTL. في مثل هذه الحالات، قد يؤدي استخدام القيم اليسرى أو اليمنى إلى حدوث مشكلات.

لحسن الحظ، يمكنك استخدام قيمة البداية لمحاذاة النص إلى الحافة حيث تبدأ الكتابة والقراءة. هذا يعني أنه من خلال تعيين خاصية text-align-last للبدء، ستقوم بمحاذاة النص إلى اليسار للغات LTR ومحاذاة إلى اليمين للغات RTL.

يمكنك أيضًا استخدام قيمة النهاية لمحاذاة النص على الحافة المقابلة من حيث تبدأ الكتابة والقراءة. سيتوافق هذا مع القيمة اليمنى للغات LTR واليسار للغات RTL.

عرض المثال

القيمة الافتراضية لهذه الخاصية هي تلقائية. عند الاستخدام، تتم محاذاة النص الموجود في السطر الأخير وفقًا للقيمة خصائص HTMLمحاذاة النص ما لم يتم ضبطها على تبرير . بخلاف ذلك، سيتم توزيع النص عبر عرض الحاوية فقط إذا تم تعيين خاصية ضبط النص على التوزيع . وبخلاف ذلك، تتم محاذاة النص إلى الحافة حيث تبدأ الكتابة والقراءة.

ملاحظات هامة

لكي يعمل text-align-last، يجب ضبط خاصية text-align على ضبط . ولكن يتم تنفيذ هذه القاعدة فقط في IE وEdge. في Firefox وChrome، تعمل الخاصية دون ضبط محاذاة النص لضبط . في المثال أدناه، يجب أن يكون النص محاذيًا لليمين في Edge وIE. في المتصفحات الأخرى، ستتم محاذاة الأسطر الأخيرة من الفقرات وفقًا لقيمة خاصية text-align-last، وستكون الأسطر المتبقية محاذاة إلى اليمين.

عرض العرض التوضيحي

إذا لم نقم بتعيين محاذاة النص لمحاذاة ضبط HTML، فلن تبدو النتيجة جميلة. لذلك، من المرجح أن تقوم بتعيين توزيع النص على العرض.

تعمل الخاصية حتى إذا كانت الفقرة تحتوي على فاصل أسطر إجباري محدد باستخدام العلامة
أو شيء من هذا القبيل. ضع في اعتبارك أن هذه الخاصية ستؤثر على كافة الأسطر الأخيرة من النص داخل العنصر المحدد، وليس فقط الأسطر الخارجية. على سبيل المثال، إذا كان النص الموجود داخل مقالة أو عنصر div يحتوي على ثلاث فقرات، فستتم محاذاة السطر الأخير في كل فقرة وفقًا لخاصية text-align-last المعينة للعنصر الأصلي بأكمله.

إذا كنت تحتاج فقط إلى محاذاة السطر الأخير من المحتوى، فيمكنك استخدام محددات :last-child أو :last-of-type. خذ الكود من العرض التوضيحي أدناه كمثال:

مقالة (محاذاة النص: ضبط؛) مقالة p:آخر نوع (محاذاة النص الأخيرة: يمين؛)

إنه يقوم بمحاذاة السطر الأخير من الفقرة الأخيرة من مقالتنا إلى اليمين. تتم محاذاة الأسطر المتبقية بناءً على قيمة خاصية محاذاة نص HTML.

عرض العرض التوضيحي

يمكنك أيضًا استخدام محددات أخرى::even و:odd لتغيير المحاذاة.

في بعض الأحيان قد تتكون الفقرة من سطر واحد فقط. في هذه الحالة، إذا قمت بتحديد قيم لكل من خاصية محاذاة النص وخاصية محاذاة النص الأخيرة، فستكون الأولوية للخاصية الأخيرة.

خذ بعين الاعتبار مقتطف التعليمات البرمجية التالي:

ص ( محاذاة النص: ضبط؛ ) ص: النوع من النوع (2) ( محاذاة النص الأخير: يسار؛ )

إذا كانت الفقرة الثانية تحتوي على سطر واحد فقط، فستتم محاذاة النص إلى اليسار لأن محاذاة النص الأخير ستكون لها الأولوية. يوضح العرض التوضيحي أدناه رمز CSS هذا أثناء العمل، بالإضافة إلى عدد قليل من التعليمات البرمجية الأخرى. أمثلة HTMLمحاذاة.

عرض العرض التوضيحي

دعم المتصفح

يمكن تمكين دعم هذه الخاصية باستخدام الخيار " تمكين ميزات منصة الويب التجريبية" الخامس جوجل كروموOpera، بدءًا من الإصدارين 35 و22 على التوالي. وهو مدعوم بالكامل في Chrome 47+ وOpera 34+.

لاستخدام هذه الخاصية في Firefox، سيتعين عليك أن تسبقها بـ -moz- . قيم البداية والنهاية غير مدعومة من قبل IE. وفي الوقت نفسه، تدعم Edge هذه الخاصية بشكل كامل. المتصفح الشائع الوحيد الذي لا يدعم محاذاة النص بشكل كامل هو Safari.

يضبط محاذاة السطر الأخير من كتلة النص.

معلومات مختصرة

التسميات

	وصف	مثال
<тип>	يشير إلى نوع القيمة.	<размер>
أ & ب	يجب أن يتم إخراج القيم بالترتيب المحدد.	<размер> && <цвет>
أ | ب	يشير إلى أنك تحتاج إلى تحديد قيمة واحدة فقط من القيم المقترحة (A أو B).	عادي | قبعات صغيرة
أ || ب	يمكن استخدام كل قيمة بشكل مستقل أو مع الآخرين بأي ترتيب.	العرض || عدد
	قيم المجموعات.	[ اقتصاص || يعبر ]
*	كرر صفر مرات أو أكثر.	[,<время>]*
+	كرر مرة واحدة أو أكثر.	<число>+
?	النوع أو الكلمة أو المجموعة المحددة اختيارية.	أقحم؟
(أ، ب)	كرر على الأقل A، ولكن ليس أكثر من B مرات.	<радиус>{1,4}
#	كرر مرة واحدة أو أكثر مفصولة بفواصل.	<время>#

×

قيم

تلقائي يطابق المحاذاة المحددة بواسطة خاصية محاذاة النص، باستثناء قيمة الضبط. لذلك، سوف تكون المحاذاة مثل البداية . start تتم محاذاة السطر مع حافة بداية الكتلة، والتي يمكن أن تتغير اعتمادًا على اتجاه النص (من اليسار إلى اليمين أو من اليمين إلى اليسار). end تتم محاذاة السطر مع حافة نهاية الكتلة، والتي يتم تحديدها حسب اتجاه النص. left يتم محاذاة الخط إلى اليسار. يمين يتم محاذاة الخط إلى اليمين. مركز يتم توسيط الخط. تبرير الخط له ما يبرره. إذا كانت هناك كلمة واحدة فقط في السطر الأخير، فسيتم محاذاتها إلى اليسار.

تأثير معان مختلفةموضع النص موضح في الجدول. 1.

طاولة 1. تأثير قيم محاذاة النص الأخيرة

معنى	تنسيق	إدخال النص
غادر	غادر
يمين	يمين
مركز	توسيط
يبرر	عرض

رمل

لم يكن ويني ذا بوه دائمًا ينفر من تناول القليل من المرطبات، خاصة في الساعة الحادية عشرة صباحًا، لأنه في ذلك الوقت كان الإفطار قد انتهى منذ فترة طويلة، ولم يبدأ الغداء بعد. وبالطبع، كان سعيدًا للغاية عندما رأى الأرنب يخرج أكوابًا وأطباقًا.

شعبة (محاذاة النص-الأخير: البداية؛)

مثال

نموذج الكائن

شيء.style.textAlignLast

ملحوظة

لا يدعم Internet Explorer وEdge قيم البداية والنهاية.

يدعم Firefox قبل الإصدار 49 الخاصية -moz-text-align-last.

تخصيص

تمر كل مواصفات بعدة مراحل من الموافقة.

• التوصية - تمت الموافقة على المواصفات من قبل W3C ويوصى بها كمعيار.
• توصية المرشح ( توصية ممكنة) - المجموعة المسؤولة عن المعيار مقتنعة بأنه يحقق أهدافه، ولكنه يحتاج إلى مساعدة من مجتمع التطوير لتنفيذ المعيار.
• التوصية المقترحة التوصية المقترحة) - في هذه المرحلة يتم تقديم الوثيقة إلى المجلس الاستشاري W3C للموافقة النهائية.
• مسودة العمل - نسخة أكثر نضجًا من المسودة التي تمت مناقشتها وتعديلها لمراجعة المجتمع.
• مسودة المحرر ( مسودة تحريرية) - نسخة مسودة للمعيار بعد إجراء التغييرات بواسطة محرري المشروع.
• مسودة ( مواصفات المسودة) - النسخة المسودة الأولى للمعيار.

×