نحن نجرب تقليل حجم النص وارتفاع السطر، وزيادة ارتفاع كتل التعليمات البرمجية، لتحسين قابلية قراءة كتل التعليمات البرمجية الكبيرة. هذا يمثل مشكلة في الغالب لكتل التعليمات البرمجية الكبيرة التي تتجاوز 20 سطرًا أو أكثر. والنتيجة هي أنه يمكن رؤية المزيد من التعليمات البرمجية في منفذ العرض العادي.
قبل
بعد
تم إجراء التغيير هنا:
يبدو أن تغيير حجم الخط لـ الكود المضمن كهذا هو على الأرجح تأثير جانبي غير مقصود؟
نعم، كان ذلك غير مقصود، يجب علينا تعديله بحيث يتم تغيير الكتل الكاملة فقط وليس التعليمات البرمجية المضمنة.
على أي حال، أنا أستخدم هذا في مثيل التطوير الخاص بي hackity hack:
pre code {
font-size: var(--font-down-1);
}
نتيجة
لقد أرسلت طلب سحب لإزالة تغييرات التنسيق على النص المكتوب بخط أحادي المسافة المضمن، وزيادة ارتفاع السطر قليلاً في كتل <pre>.
هذا يؤثر للأسف على قابلية القراءة في المقتطفات القصيرة.
مثال:
الخط أصغر، وارتفاع السطر أقصر.
هل يمكن أن يؤثر هذا فقط على الكتل البرمجية الطويلة جدًا؟ هل يجب أن يكون هذا تغييرًا أساسيًا @jordan.vidrine؟
أريد أيضًا تسليط الضوء على الاختلاف هنا بين هذه التجربة و stack overflow.
التجربة الحالية
Stack overflow
بعض الأشياء التي ألاحظها على الفور هي:
أحتاج إلى التعمق أكثر في hljs ومعرفة سبب ظهور عناويننا بخط عريض.
أحب أنك ألقيت نظرة على Stack Overflow، لأنه إذا كان أي شخص قد اكتشف كيفية عرض الكتل البرمجية، فسيكونون هم.
ملاحظة أخرى، يبدو أن حجم الخط لا يتغير على الرغم من تغييره… (15 بكسل → 13 بكسل ولكن الألوان تعوض بعض الشيء)
الإيقاع البصري وارتفاع السطر يبدوان أفضل بكثير هنا:
Stack Overflow
التجربة الحالية
ارتفاع السطر يمثل مشكلة بشكل ملحوظ، و"تقليصنا" ذهب بعيدًا جدًا لأن خطنا الأساسي أكبر وأكثر رحابة من Stack Overflow.
أنا أؤيد بشدة إزالة الخط العريض في تجربتنا الحالية وزيادة الحجم وارتفاع السطر.
هذا الـ PR أجرى التغييرات التالية: https://github.com/discourse-org/design-experiments/pull/77
يبدو هذا رائعًا يا جوردان. في هذه الحالة، أعتقد أن استخدام وزن الخط المتسق يساعد في سهولة القراءة. أنا معجب بزيادة التباعد أيضًا.
شكرًا، أتفق معك. أعتقد أنني أود أيضًا إلقاء نظرة على الألوان وسبب استخدام hljs للألوان التي يستخدمها. لم أر هذا النمط اللوني مستخدمًا في أي مكان عبر الإنترنت.
أنا من محبي تغييرات الطباعة، لكنني أشعر أن الخلفية الداكنة مبالغ فيها. الخلفية الأفتح أسهل بكثير في القراءة.
بعد المزيد من البحث، أرى أن الألوان التي نستخدمها تستند إلى مخطط قديم استخدمه github ربما قبل 10 سنوات، أو قبل 4 سنوات على الأقل.
هل هناك مجال هنا لتغيير الألوان الافتراضية إلى شيء محدث؟
لدى Github مخطط ألوان محدث منذ ذلك الحين، بالإضافة إلى خيارات أخرى لتكون مخططًا فاتحًا افتراضيًا.
Stack overflow
Atom One Light
New Github
hljs default 
تفضيلاتي الشخصية تميل إلى شيء بألوان أكثر هدوءًا - في أمثلتك، Stack Overflow هو خياري.
بعد بضعة أيام ما زلت بحاجة إلى التحديق قليلاً مع حجم الخط الأصغر، لا أعتقد أنه يستحق توفير المساحة
هل تشعر بنفس الشيء في Stack Overflow (على سبيل المثال)؟ حسابات حجم الخط وارتفاع السطر متماثلة الآن بين Discourse و SO.
max-height في Discourse أقل قليلاً عند 500 بكسل مقابل 600 بكسل.
التباين أسوأ بكثير في حالتنا ويحدث فرقًا كبيرًا عندما تحاول قراءة نص صغير، على سبيل المثال (Stack Overflow على اليمين):
نعم، أفهم ما تقصده.
ما رأيك في هذه التغييرات في طلب السحب الذي قدمته: https://github.com/discourse-org/design-experiments/pull/79
إليك خيار حيث أضيف اللون الأسود إلى الخلفية في الوضع المظلم، بدلاً من استخدام شيء يعتمد على اللون الثانوي أو الأساسي. أفعل ذلك عبر rgba(0,0,0,0.25)
هل يمكن لأحد إجراء اختبار باستخدام مكون/سمة ترقيم أسطر كتلة التعليمات البرمجية الأخيرة المضمنة أيضًا؟ شكرًا مقدمًا.
