البرامج التعليمية
Claude Opus 5.5 لفحص تحرك التخطيط بسبب الخطوط في صفحات المنتجات
اطلب من Claude Opus 5.5 تشخيص تبديل الخط اعتمادًا على أدلة التحميل وCSS الفعلي، لا على لقطة مكتملة وحدها.
اطلب من Claude Opus 5.5 تشخيص تبديل الخط اعتمادًا على أدلة التحميل وCSS الفعلي، لا على لقطة مكتملة وحدها. قارن العنوان نفسه قبل وصول الخط المطلوب وبعده. الهدف إبقاء رسالة المنتج والزر الرئيسي مقروءين أثناء التحميل، دون إخفاء النص أو تصغيره حتى تختفي الأعراض.
سجّل الانتقال المهم
سجّل عرض الشاشة والمتصفح واللغة وعائلة الخط ووزنه، واحفظ تحميلًا بلا ذاكرة مؤقتة وآخر بها. أضف توقيت طلب الخط وعدد أسطر العنوان. يوضح سؤال مطوّر عن ظهور خط مختلف لحظيًا كيف قد تخفي الذاكرة المؤقتة التجربة المطلوبة للفحص. إنه وصف شخصي وليس اختبار أداء لهذه الطريقة.
توضح وثيقة web.dev أن اختلاف المساحة بين خط الويب والبديل قد يحرك المحتوى. هذه آلية للتحقيق، وليست إثباتًا أن كل زر متحرك سببه الخط.
| الملاحظة | ما يُفحص أولًا | اختصار يجب تجنبه |
|---|---|---|
| زيادة سطر عند وصول الخط | عرض البديل والوزن المقصود | حذف ادعاءات المنتج المعتمدة |
| تحرك الصورة قبل النص | أبعاد الصورة والمساحة المحجوزة | تغيير إعداد الخط مباشرة |
| اقتطاع لغة واحدة فقط | تغطية المحارف والتفاف تلك اللغة | تعميم نسبة خط لاتيني |
| استقرار الزيارة المتكررة فقط | اكتشاف الطلب وتسلسل التحميل | عرض النتيجة المخزنة وحدها |
حوّل الصورة إلى سؤال قابل للقياس
افترض عرضًا قدره 360 بكسل وهوامش 24 على كل جانب؛ عرض المحتوى 312. إذا شغل العنوان سطرين بارتفاع 40 لكل سطر بالخط البديل، ثم ثلاثة بالخط النهائي، يتغير ارتفاعه من 80 إلى 120 بزيادة 40. هذه حسابات توضيحية افتراضية، لا نتائج Opus مقاسة ولا درجة CLS.
تحقق هل تحرك زر الإجراء بالمقدار نفسه وهل تغير عنصر آخر. ثبّت النص والوزن والعرض والمتصفح. قد تقلل حاوية عنوان ثابتة الارتفاع الحركة في مثال وتقتطع ترجمة أطول. اختبر أطول نص معتمد، ولا تعمم لقطة الإنجليزية على الجميع.
اختر أصغر إصلاح تدعمه الأدلة
خط بديل أقرب أحد الخيارات. تشرح MDN خاصية size-adjust لتعديل مقياس المحارف ومقاييس الخط. لا تنسخ نسبة اعتباطية لكل اللغات. قِس الخطين بالوزن الفعلي ثم افحص الالتفاف ومحاذاة خط الأساس.
قد يكفي تصحيح وزن مطلوب خطأ أو اكتشاف الخط المهم مبكرًا. تحميل كل الأوزان مقدمًا ينافس صور المنتج على الموارد. تغيير `font-display` يغيّر المفاضلة ولا يضمن دائمًا ظهور الهوية فورًا دون حركة. سجّل السبب وقدّم تعديل CSS قابلًا للتراجع بدل إعادة تصميم الصفحة كلها.
مطالبة لتعديل مبني على الدليل
راجع انتقال الخط في صفحة المنتج هذه.
المدخلات: العنوان الدقيق واللغة، العرض/الهوامش، HTML/CSS، الخط والوزن المطلوبان،
البديل المتاح، لقطات بلا ذاكرة مؤقتة ومعها، توقيت الطلب، ومستطيلات العنوان والزر المقاسة.
افصل الحقائق المرصودة عن الفرضيات ولا تستنتج الزمن من صورة واحدة.
تحقق أن تبديل الخط يفسر الحركة المقاسة قبل اقتراح CSS.
حافظ على النص وتسلسل العناوين والتباين والحجم المقروء وسلوك الزر.
اقترح أصغر تعديل مع المفاضلة وطريقة التراجع.
لا تختلق نسب size-adjust ولا تفترض مقاييس موحدة لكل أنظمة الكتابة.
أعد مصفوفة اختبار قبل/بعد للزيارة الأولى والمتكررة والخط المحجوب،
والترجمة الطويلة والشاشة الضيقة والنص المكبّر.
مثال عرض 312 وارتفاع من 80 إلى 120 افتراضي؛
لا تقدمه كقياس متصفح ولا تستخرج منه درجة CLS.يمثل دليل Opus 5.5 مرجع النموذج. هذه مراجعة مقترحة وليست ادعاءً بتفوق مقاس على نموذج آخر.
اعتمد حالات التحميل
كرر التسجيل بالشروط نفسها بعد التعديل. اختبر الزيارة الأولى والمتكررة وحجب طلب الخط. يجب أن يبقى النص قابلًا للاستخدام إن لم يصل الملف إطلاقًا. اختبر كل كتابة مدعومة وعنوانًا أطول ونصًا مكبّرًا، وراقب موضع الزر لا جمال العنوان وحده.
جهّز صور الحملة في Panelly Studio بعد فهم الطباعة الفعلية، حتى لا تخفي الصورة المصقولة صفحة غير مستقرة. هذا لا يعني تكاملًا مع Opus. تتناول مراجعة الصفحة المقصودة التسلسل العام، ومراجعة أسلوب العلامة الاتساق البصري؛ ولا تستبدلان اختبار وصول الخط.
أسئلة عملية
**هل تكفي لقطة لإثبات الإصلاح؟** لا تعرض الانتقال أو الطلب الذي لا ينتهي. احتفظ بالتسلسل وشروطه.
**هل أعد بانخفاض CLS؟** فقط بعد القياس بأداة مناسبة وشروط قابلة للمقارنة. التحسن المحلي لا يساوي تلقائيًا أداء المستخدمين الفعلي.
