عرض خطوط Discourse

[kcahtoor]

أهلاً،

أواجه مشكلة في عرض الخطوط أثناء استخدام خط الأردو المخصص، وهو جميل نوري نستعليق (وهو أحد أشكال نوتو نستعليق أردو) في ديسكورس. إعداداتي هي:

• المتصفح: كروم الإصدار 138.0.7204.183

• الخط: جميل نوري نستعليق

• المنصة: ديسكورس (أستخدم مكون سمة يتبع هذا)

المشكلة

عند تطبيق خط جميل نوري نستعليق على ديسكورس، لا يتم عرض النص كما هو متوقع:

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

• تظهر خطوط الأردو الأخرى (غير نستعليق) بشكل صحيح في نفس البيئة.

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

ما جربته

• اختبار خطوط نستعليق متعددة: جميع خطوط نستعليق، أي جميل ومهر ونوتو، لديها هذه المشكلة.

• المقارنة مع متصفحات مختلفة: (تم الاختبار على فايرفوكس/إيدج)

• التحقق من تجاوزات CSS: يتم تطبيق الخط بشكل صحيح عبر @font-face ويتم تحميله بواسطة ديسكورس.

المتوقع مقابل الفعلي

• المتوقع: روابط نستعليق صحيحة وحجم متناسب (انظر الجانب الأيسر من الصورة).

• الفعلي: تشكيل كلمات مكسور ونص كبير جدًا (انظر الجانب الأيمن من الصورة).

هل واجه أي شخص آخر هذه المشكلة مع خط نوتو نستعليق أردو على كروم + ديسكورس؟ هل هذه مشكلة في تشكيل كروم، أم مشكلة في الخط، أم شيء في طريقة تعامل ديسكورس مع الخطوط المخصصة؟

شكراً مقدمًا لأي توجيه.

[nat (Natalie T)]

هناك احتمال أن يقوم Discourse بتعديل الخطوط فيما يتعلق بأوزان الخطوط.

هل أنت على دراية بـ CSS؟ قد تتمكن من تعديل بعض متغيرات وزن الخطوط المعرفة في Styling Discourse with variables: Show & Tell في مكون سمة.

[chapoi]

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

قرأت أن هذا قد يعمل بشكل أفضل: Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

شكراً على الرد. سأقوم بإيقاف تشغيل الخطوط العريضة. كيف تعتقد أنه سيكون من الأسهل القيام بذلك؟

[chapoi]

@kcahtoor

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

هممم، لكي تكون شاملاً للغاية، فإن إضافة هذا إلى ملف CSS المخصص الخاص بك يجب أن يعمل:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi للأسف هذا لا يعمل. ما رأيك في

overflow-wrap: break-word;
white-space: nowrap;
text-overflow: ellipsis;

هذه الثلاثة شائعة لهذه الكلمات

[chapoi]

لن يفعل أي من هذه الأشياء شيئًا لخطك.

لقد جربت حلي محليًا، ويبدو أن ذلك أدى الغرض. هل تقصد أن CSS لا يتم تطبيقه، أم أنه يتم تطبيقه ولكنه لا يحل المشكلة؟

[kcahtoor]

@chapoi شكراً لك. ما أريد قوله هو أن قاعدة CSS مطبقة ولكنها لا تنتج التأثيرات المطلوبة. فيما يلي الروابط لتتمكن من إعادة إنتاج ما أواجهه

/* Jameel Noori Nastaliq v4 */
@font-face {
  font-family: "Jameel-Noori";
  src: url("https://cdn.jsdelivr.net/npm/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2"),
  url("https://unpkg.com/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2");
}

هذا المتغير المحدد ينتج هذا النوع من الأحرف المتداخلة وهو بعيد كل البعد عن التأثير المطلوب الذي هو أدناه.

/* Mehr Nastaliq Web Font v2 */
@font-face {
  font-family: "Mehr";
  src: url("https://cdn.jsdelivr.net/npm/mehr-nastaliq/fonts/mehr.woff2") format("woff2")
}

[kcahtoor]

تحدث المشكلة بسبب إعدادات ميزة الخط الافتراضية في Discourse والتي تتداخل مع عرض النصوص المعقدة:

css

// الإعدادات الافتراضية الإشكالية
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

// الحل هو تجاوزها
font-variant-ligatures: normal;
font-feature-settings: normal;

هذا حل المشكلة مع كلا الخطين.