تحسين تنسيق النص ووضوحه

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

بالنسبة إلى النصوص القصيرة مثل العناوين، استخدِم text-wrap: balance. توجّه هذه السمة المتصفّح لتوزيع النص بشكل متساوٍ قدر الإمكان على الأسطر، ما يمنح النص مظهرًا أكثر تناسقًا.

تتيح لك السمة text-wrap: pretty في CSS تحسين جودة الطباعة للنص الأساسي من خلال تفعيل خوارزمية التفاف أكثر تطورًا. تم تصميمها خصيصًا لمنع "الكلمات المعزولة" (الكلمات الفردية في السطر الأخير من الفقرة) وإنشاء "هامش غير مستوٍ" أكثر جاذبية من الناحية المرئية للنصوص الطويلة.

التنفيذ

1. تحديد عناصر النص:

بالنسبة إلى text-wrap: balance، اختَر مقاطع نصية قصيرة، مثل العناوين الرئيسية وعناوين الجداول. تجنَّب العناصر التي تحتوي على مربّعات مرئية، مثل الحدود أو الخلفيات، لأنّ ذلك قد يؤدي إلى إنشاء مساحات فارغة غير متوقّعة في التنسيق.

بالنسبة إلى text-wrap: pretty، اختَر العناصر التي يُحتمل أن تحتوي على نصوص طويلة تظهر فيها الكلمات المعزولة أو الفواصل السيئة بين الأسطر بشكل واضح. ويتضمّن ذلك العناصر التالية:

• <p>
• <blockquote>
• <li>
• أي عنصر آخر قد يحتوي على نصوص طويلة

اختيار طريقة التغليف المناسبة

2. تطبيق الالتفاف الذي اخترته:

طبِّق السمة text-wrap: balance تحديدًا على العناصر القصيرة المتعدّدة الأسطر، مثل العناوين (h1-h6) أو العناوين الفرعية أو الاقتباسات البارزة.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

استخدِم text-wrap: pretty لتفعيل خوارزمية محسّنة تقيّم الأسطر القليلة الأخيرة من الفقرة للعثور على أفضل نقاط الفواصل.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

القيود والأداء المهمّان

text-wrap: balance

• الحد الأقصى لعدد الأسطر: تفرض المتصفحات حدًا أقصى لعدد الأسطر التي ستحاول موازنتها للحفاظ على الأداء (عادةً 6 أسطر في Chromium و10 أسطر في Firefox). إذا تجاوز النص هذا الحد، يعود المتصفّح إلى سلوك wrap العادي. تجنَّب استخدام text-wrap: balance في مجموعات النصوص التي من المرجّح أن تتجاوز هذه الحدود.
• التطبيق المستهدَف: لا تطبِّق text-wrap: balance على مستوى العالم (مثل * { text-wrap: balance; }). إنّ خوارزمية "البحث الثنائي" التكرارية التي تستخدمها المتصفّحات مكلفة من الناحية الحسابية. لذا، يجب قصر استخدامه على عناصر نصية قصيرة ومحددة.
• التفاعل مع العرض: لا يغيّر text-wrap: balance عرض الحاوية (inline-size)، بل يؤثر فقط في كيفية التفاف النص ضمن هذا العرض. وقد يؤدي ذلك إلى ترك مساحة فارغة في نهاية الحاوية، ما قد يؤثر في التنسيقات التي تعتمد على مجموعات نصية بعرض كامل.

text-wrap: pretty

• الأداء مقابل الجودة: مطلوب: يتطلّب text-wrap: pretty موارد حوسبة أكثر من خوارزمية wrap (الجشعة) التلقائية لأنّه يقيّم أسطرًا متعددة (عادةً آخر أربعة أسطر) لتحسين نقاط الفواصل. تجنَّب تطبيقها بشكل عام على كل عنصر إذا كانت صفحتك تحتوي على كمية كبيرة من المحتوى النصي.
• الأفضل للنصوص المتعددة الأسطر: تظهر مزايا pretty بشكل أوضح في الفقرات التي تتألف من ثلاثة أسطر أو أكثر. وليس له تأثير يُذكر على النصوص القصيرة المكوّنة من سطر واحد.
• السلوك الخاص بالمتصفّح: يُرجى العِلم أنّ تفاصيل التنفيذ تختلف. تركّز المتصفّحات المستندة إلى Chromium عادةً على آخر أربعة أسطر، بينما قد تقيّم المحرّكات الأخرى الفقرة بأكملها.

استراتيجيات احتياطية

في المتصفحات التي لا تتيح استخدام text-wrap: balance أو text-wrap: pretty، يتم تجاهل السمة، وسيتم التفاف النص باستخدام الإعداد التلقائي wrap. هذا تحسين متدرّج يتكيّف مع الإصدارات الأقدم مع أسلوب الخط العادي. يضمن ذلك أن يظل المحتوى قابلاً للقراءة بشكل مثالي على جميع المتصفحات مع توفير تجربة فائقة للمتصفحات التي تدعمه.

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