68 lines
3.2 KiB
Markdown
68 lines
3.2 KiB
Markdown
|
---
|
||
|
title: Alignment
|
||
|
localeTitle: انتقام
|
||
|
---
|
||
|
## انتقام
|
||
|
|
||
|
المحاذاة الطبوغرافية يغير تدفق النص في وثيقة. يمكن للمصممين استخدام هذه الأداة القوية لتعزيز عرض النص ببراعة من خلال منحه الشكل المرئي والسياق.
|
||
|
|
||
|
جرّب المحاذاة للعثور على مجموعات مرئية جديدة ومثيرة تجعل المحتوى الخاص بك بارزًا. تأكد من اختبار أخطاء المحاذاة على الأجهزة والمتصفحات المختلفة.
|
||
|
|
||
|
استخدم CSS لمحاذاة النص كلما أمكن ذلك. قد تصادف علامات محاذاة HTML (على سبيل المثال ، `<p align="right"></p>` أو `<center></center>` ) ، ولكن يتم إيقافها في HTML 5.
|
||
|
|
||
|
### نص مضبوط إلى اليسار
|
||
|
|
||
|
افتراضي ، `text-align: left;`
|
||
|
|
||
|
عند الشك ، يكون النوع الافتراضي من تبرير النص هو الخيار الأفضل عادة. خاصةً بالنسبة للمقالات أو الكتل الطويلة للنص ، يكون النص المُبرر يسارًا أسهل في القراءة ، حيث أن الحواف المتعرجة على اليمين توفر سياقًا مرئيًا لمساعدة القراء في الحفاظ على مكانهم مع تحول أعينهم من خط إلى آخر.
|
||
|
|
||
|
يسخدم من اجل:
|
||
|
|
||
|
* نص أساسي
|
||
|
* معظم كل شيء آخر
|
||
|
|
||
|
### نص يبرره اليمين
|
||
|
|
||
|
`text-align: right;`
|
||
|
|
||
|
يمكن أن يكون النص الذي يبرره اليمين واليسار مفيدًا كتوابل بصرية ، ولكن يصعب قراءته في فترات امتدت طويلة من النص المُبرر لليسار.
|
||
|
|
||
|
قابل للاستخدام ل:
|
||
|
|
||
|
* التسميات التوضيحية
|
||
|
* التنقل
|
||
|
* الجانبية
|
||
|
* الاقتباسات
|
||
|
|
||
|
### النص المركز
|
||
|
|
||
|
`text-align: center;`
|
||
|
|
||
|
استخدم نصًا مركزًا لسحب أعين القراء إلى نقاط التركيز (على سبيل المثال ، العناوين ، عناوين الصفحات ، التذييلات). لا تستخدم نصًا مركزًا لكتل نصية طويلة ، حيث إنه مرهق للغاية للقراءة.
|
||
|
|
||
|
قابل للاستخدام ل:
|
||
|
|
||
|
* العناوين
|
||
|
* عنوان الصفحة
|
||
|
* التنقل
|
||
|
* الجانبية
|
||
|
* التسميات التوضيحية
|
||
|
* الاقتباسات
|
||
|
* الهوامش
|
||
|
|
||
|
### نص مضبوط
|
||
|
|
||
|
`text-align: justify;`
|
||
|
|
||
|
النص الكامل المضلل أمر صعب للتوصية بالنص الأساسي ، حيث يمكن أن تظهر فجوات كبيرة بين الكلمات في بعض الخطوط. ومع ذلك ، يمكن أن desgigners المهرة جعله جميل الاستخدام.
|
||
|
|
||
|
قابل للاستخدام ل:
|
||
|
|
||
|
* التسميات التوضيحية
|
||
|
* Sidenotes
|
||
|
|
||
|
#### معلومات اكثر:
|
||
|
|
||
|
* [ويكيبيديا المادة](https://en.wikipedia.org/wiki/Typographic_alignment)
|
||
|
* [دليل نمط الويب](https://webstyleguide.com/wsg2/type/align.html)
|
||
|
* [محاذاة النص على الويب](http://www.webpagemistakes.ca/text-alignment-on-the-web/)
|