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

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

ما الذي يمكن أن يخبرك به التباعد غير المتساوي؟

يوزّع الضبط المساحة المتاحة داخل السطر لملء مربع السطر. وتختلف الأسطر في الكلمات التي تحتويها وفرص التمدد المتاحة فيها، لذلك لا يلزم أن تتطابق الفجوات بينها. كما تمنح W3C المتصفحات هامشًا في خوارزميات الضبط؛ فتعريفات CSS المتطابقة لا تفرض تباعدًا متطابقًا في كل متصفح. CSS Text Module Level 3

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

يوضح حساب بسيط سبب ضرورة الانتباه إلى الأسطر قليلة الكلمات. افترض أن العرض المتاح للسطر 480 بكسلًا من وحدات CSS وأن محتواه يشغل 420 بكسلًا قبل الضبط. في نموذج توضيحي يوزّع الـ60 بكسلًا المتبقية بالتساوي على ست مسافات قابلة للتمدد، تزداد كل واحدة بمقدار 10 بكسلات. وإذا لم توجد سوى ثلاث مسافات قابلة للتمدد مع بقاء المساحة المتبقية كما هي، تزداد كل واحدة بمقدار 20 بكسلًا. هذه أمثلة محسوبة، وليست قياسات للمتصفح أو صيغة عرض عامة.

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

ابدأ بمقارنة مضبوطة واحدة على جهاز Mac

اختر فقرة متأثرة وسجّل إصدار المتصفح وتكبير الصفحة وعرض العمود التقريبي والنص الدقيق. حافظ على ثبات هذه الظروف أثناء مقارنة التغييرات. استخدم هذه الفقرة المحايدة للاختبار: «تحتوي اللوحة الكهرمانية على بلاطات مستديرة. وتحتوي اللوحة الفضية على بلاطات مربعة. تضم كل لوحة تسمية قصيرة ووصفًا بسيطًا».

في Chrome، انقر على الفقرة مع الضغط على Control واختر Inspect. ويمكنك بدلًا من ذلك فتح أدوات المطوّرين باستخدام Command–Option–I، ثم تحديد العنصر المعني. تتيح لك أدوات المطوّرين في المتصفح فحص المستند الحالي ومعاينة تغييرات HTML وCSS محليًا. ما أدوات المطوّرين في المتصفح؟

حدّد الكتلة الحاوية للفقرة، لا كلمة داخل عنصر مضمّن فحسب. في لوحة Elements في Chrome، افحص كلًّا من Styles وComputed. تتضمن الأولى التصريحات المنطبقة، بما فيها ما جرى تجاوزه؛ وتساعد الثانية على تحديد القيم المطبّقة فعليًا. استخدم عامل تصفية الخصائص للعثور على كل إعداد. مرجع ميزات CSS

سجّل text-align وtext-align-last وword-spacing وletter-spacing وwhite-space وhyphens وfont-family وfont-size. دوّن أيضًا عرض محتوى الفقرة. ينشئ ذلك سجل مقارنة موجزًا: الحالة الأصلية، وتغيير واحد، والنتيجة الملحوظة.

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

تحقّق من التباعد الصريح والمسافات البيضاء المحفوظة

مع تفعيل المحاذاة إلى البداية، اختبر word-spacing: normal. وتعرّف MDN هذه القيمة بأنها التباعد المعتاد الذي يحدده الخط أو المتصفح؛ أما قيمة الطول فتضيف تباعدًا إلى المسافة الجوهرية بين الكلمات في الخط. لذلك قد تكون القيمة الموجبة الموروثة ذات صلة حتى قبل تطبيق الضبط. خاصية CSS المسماة word-spacing

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

بعد ذلك، افحص white-space. مع normal، تُدمج تسلسلات المسافات البيضاء العادية ويلتف النص حسب الحاجة. أما مع pre-wrap، فتُحفظ تسلسلات المسافات البيضاء والأسطر الجديدة في المصدر، مع استمرار إمكانية التفاف النص. ومع pre-line، تُدمج المسافات، لكن الأسطر الجديدة في المصدر تظل تُنشئ فواصل. قد تغيّر هذه الاختلافات ما يبدو عيبًا في التباعد. خاصية CSS المسماة white-space

بالنسبة إلى وصف عادي متدفق، اختبر مؤقتًا white-space: normal. إذا تحسنت النتيجة، فتحقّق من النص الأصلي وقاعدة المسافات البيضاء قبل اختيار تعديل دائم. حافظ على التنسيق ذي المعنى: فالعينة ذات التنسيق المسبق ووصف النثر لهما متطلبات مختلفة. يحدد الاختبار أحد مدخلات التخطيط، لكنه لا يثبت ضرورة إزالة كل المسافات البيضاء المحفوظة.

افحص الأسطر القصيرة والفواصل المفروضة وعرض العمود

هل يجري تمديد السطر الأخير؟

افحص text-align-last عندما تتضمن نهاية الفقرة سطرًا قصيرًا ذا فجوات كبيرة على نحو غير معتاد. تتحكم هذه الخاصية في كل من السطر الأخير للكتلة والسطر الذي يسبق فاصلًا مفروضًا مباشرةً. عند استخدام text-align: justify، تحاذي قيمة auto الافتراضية هذه الأسطر إلى البداية؛ أما قيمة justify الصريحة فتمدّدها. اختبر text-align-last: start لعزل هذه الحالة. خاصية CSS المسماة text-align-last

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

هل تتبع المشكلة عمودًا ضيقًا؟

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

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

هل يتيح تقسيم الكلمات فرصًا مفيدة لبدء سطر جديد؟

في النثر الإنجليزي، اختبر hyphens: auto بعد التأكد من وجود قيمة lang الصحيحة، مثل en، على الفقرة نفسها أو على عنصر أب. يعتمد تقسيم الكلمات التلقائي على تعيين اللغة وتوفر قاموس مناسب. وعدم ظهور شرطات وحده لا يثبت فشل تصريح CSS. خاصية CSS المسماة hyphens

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

افصل تغييرات الخط عن ضبط المتصفح

إذا تغيّرت نهايات الأسطر بعد ظهور الصفحة لأول مرة، فتحقّق من تحميل الخطوط قبل مقارنة لقطات الشاشة. توفر واجهة CSS Font Loading API القيمة document.fonts.ready، وهي وعد يُحلّ بعد اكتمال تحميل الخطوط والتخطيط المرتبط بها. وتوفر نقطة مزامنة مفيدة للقياسات، مع أن تغييرات الصفحة اللاحقة قد تستدعي مقارنة أخرى. واجهة CSS Font Loading API

لإجراء اختبار بصري، قارن الفقرة الأصلية بإعداد مؤقت font-family: system-ui مع تثبيت العرض وحجم الخط. اعتبر أي تحسن دليلًا على أن اختيار الخط يؤثر في هذا التخطيط، لا برهانًا على وجود عيب في الخط الأصلي. في Firefox أو Safari، يمكن أن تساعدك علامة التبويب Fonts في أداة الفحص على معرفة الخطوط المطبّقة على العنصر المحدد. ما أدوات المطوّرين في المتصفح؟

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

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

اختر التصحيح الذي تؤيده اختباراتك

استخدم هذا الجدول لتحويل الملاحظات إلى إجراء تالٍ محدد. كل صف استنتاج تشخيصي؛ أكّده بإعادة الحالة الأصلية وتكرار التغيير الناجح.

الملاحظة ما ينبغي فحصه بعد ذلك التصحيح المحتمل
تبقى الفجوات مع محاذاة البداية التباعد الصريح والمسافات البيضاء المحفوظة صحّح التصريح المعني أو تنسيق النص غير المقصود
لا تتمدد إلا الأسطر الختامية محاذاة السطر الأخير والفواصل المفروضة استخدم محاذاة البداية لهذه الأسطر؛ وراجع الفواصل المضافة لأغراض العرض فقط
تنتقل الفجوات عند إعادة التفاف الكلمات عرض العمود وفرص تقسيم الأسطر المتاحة عدّل العرض أو اختبر تقسيم الكلمات أو استخدم محاذاة البداية
يتغير التخطيط أثناء التحميل تحميل الخطوط والخط المطبّق أجرِ المقارنة بعد استقرار الخطوط وعالج الاختلاف المتعلق بالخط
لا يؤثر تغيير طريقة الضبط دعم المتصفح والتصريح المطبّق استخدم عناصر التحكم المدعومة للمحاذاة والتخطيط

لا تعتمد على text-justify: inter-word بوصفه حلًا شاملًا. تصنّف MDN حاليًا text-justify على أنه محدود التوفر. وحيثما كان مدعومًا، يختار inter-word التمدد عند حدود الكلمات، بينما يتيح auto للمتصفح اختيار الطريقة. لكن اختيار حدود الكلمات لا يضمن فجوات صغيرة في سطر قليل الكلمات. خاصية CSS المسماة text-justify

عندما لا تكون هذه الخاصية مدعومة، استخدم المسار المدعوم الذي أثبتته مقارنتك: غيّر المحاذاة، أو وسّع عرض السطر المتاح، أو صحّح المسافات البيضاء غير المقصودة، أو اختبر تقسيم الكلمات المراعي للغة. أعد التحقق من الاختيار النهائي في كل متصفح مستهدف عند عروض محتوى متقاربة. اختلاف المتصفحات وحده لا يثبت وجود عيب، لأن CSS لا تحدد خوارزمية ضبط كاملة واحدة. CSS Text Module Level 3

أنهِ العمل عندما تتمكن من تفسير المشكلة بمقارنة قابلة للتكرار: تُنتج الفقرة الأصلية الفجوة، ويحسّنها تغيير محدد، وتظل النتيجة مفيدة عبر العروض التي تحتاج إليها. إذا كنت تدير الصفحة، فأبقِ أقل تصحيح فعّال في مصدرها؛ أما إذا كنت تفحص صفحة عامة فحسب، فاجعل القيم المرصودة وخطوات إعادة إنتاج المشكلة مخرج عملك.

المصادر