العمق المضيء: كيف تبني واجهات عربية تتنفّس في الظلام

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

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

لماذا تبدأ من اليمين؟

كثير من أنظمة التصميم تُبنى للّاتينية أوّلاً ثم «تُعكَس» للعربية. المشكلة أنّ العكس الآليّ لا يكفي: تباعد الحروف يكسر اتّصال الكلمة، والخطوط المصمّمة للّاتينية تبدو غريبة في سياقٍ عربيّ. حين تبدأ من اليمين، تصبح هذه القرارات جزءاً من الأساس لا ترقيعاً لاحقاً.

• استخدم الخصائص المنطقية (margin-inline) بدل الفيزيائية ليعكس التخطيط نفسه تلقائياً.
• لا تضع letter-spacing على النصّ العربيّ أبداً — فهو يقطع تواصل الحروف.
• اختر خطّاً عربيّاً أصيلاً للعناوين، وآخر واضحاً للنصوص الطويلة.

التصميم الجيّد للعربية لا يُترجَم، بل يُولَد من اليمين.

هذه الصفحة نفسها مكتوبة بخطّ «ثمانية»: العناوين بنسخة العرض، وهذه الفقرات بنسخة النصّ المصمّمة للقراءة الطويلة. لاحظ كيف يرتاح النظر مع ارتفاع السطر الواسع والمقاس المريح.

القياس قبل التحسين

قبل أن نلمس الألوان أو الحركة، نقيس. الرسوم البيانية لا تحتاج مكتباتٍ ثقيلة؛ يكفي القليل من الـ CSS لإظهار اتّجاهٍ واضح:

وحين نريد توثيق طريقة، نعرضها في كتلة شيفرةٍ مرتّبة — والشيفرة بطبيعتها تُقرأ من اليسار:

<!-- خلفية مضيئة جاهزة -->
<section class="nyx-bg-mesh">
  <h1 class="nyx-bigtype">مضاءٌ من الداخل</h1>
</section>

الخلاصة أنّ الأدوات موجودة: خلفيات، ورسوم، وخطوط، ومكوّنات تدعم RTL من جذورها. ما يتبقّى هو الذوق — أن نعرف متى نُضيء، ومتى نترك الظلام يتنفّس.