نص بديل عربي (لوريم إيبسوم)

Lorem Ipsum (لوريم إيبسوم) هو نصّ لاتيني وهمي يُستخدم كحشو مكان النصّ الحقيقي أثناء التصميم. الفكرة: يعطي المصمّم انطباعاً عن الشكل العام للصفحة (الكثافة، التوزيع، الإيقاع البصري) دون أن يلهيه محتوى النصّ نفسه. لو وضع المصمّم نصّاً حقيقياً، سيقرأه أصحاب القرار ويعلّقون على المحتوى بدلاً من التصميم.

النصّ يبدأ تقليدياً بـ Lorem ipsum dolor sit amet, consectetur adipiscing elit ومنذ ستينيات القرن العشرين أصبح هذا التتابع المعيار الصامت لكلّ صناعة التصميم — من المطبوعات إلى الويب إلى تطبيقات الهاتف.

خلافاً للظنّ الشائع، Lorem Ipsum ليس عشوائياً بالكامل. مصدره كتاب De Finibus Bonorum et Malorum للفيلسوف الروماني شيشرون (45 قبل الميلاد)، مقطع عن نظرية اللذّة والألم. لكنّ النصّ المتداول اليوم مُحرَّف: حذفت كلمات، أُدمجت أخرى، ونُحتت الجملة الأصلية لإزالة أيّ معنى مفهوم.

سبب الانتشار الواسع يعود إلى ستينيات القرن العشرين، حين بدأت شركة Letraset (المتخصّصة في حروف النقل اليدوي) بطباعة هذا النصّ على أوراق نموذجية للمصمّمين. ومع ظهور Aldus PageMaker في الثمانينات، أصبح Lorem Ipsum الخيار الافتراضي في برامج النشر المكتبي، ثمّ ورثته كلّ أدوات التصميم بعدها.

لاحظ أنّ النصّ مُصمَّم لمحاكاة توزيع الحروف في اللغات اللاتينية (الإنجليزية، الفرنسية، الإيطالية، الإسبانية): متوسط طول الكلمة، تكرار الحروف الصوتية، وكثافة الحروف الصامتة. هذا هو السبب الجوهري في فشله مع العربية.

العربية مختلفة بنيوياً عن اللاتينية في خمس نقاط جوهرية تجعل Lorem الإنجليزي غير صالح كحشو في تصميم RTL:

أولاً: الاتجاه. العربية تُكتب من اليمين إلى اليسار. وضع نصّ LTR داخل حاوية RTL يقلب الـ alignment، يكسّر علامات الترقيم (الفاصلة العربية «،» مقابل اللاتينية «,»)، ويحوّل التصميم إلى فوضى بصرية.

ثانياً: متوسّط طول الكلمة. الكلمة العربية الفصحى ~5.4 حرف وسطياً، مقابل ~4.7 للإنجليزية. النصّ العربي يحتلّ مساحة أكبر بنحو 12-15% لنفس عدد الكلمات، ما يؤثّر على عدد الأسطر وارتفاع البطاقات.

ثالثاً: ارتفاع السطر. العربية تحتاج line-height أكبر (1.8-2.0) بسبب التشكيل والمدّات وعلامات الإعراب، مقابل 1.4-1.6 للإنجليزية. اختبار التصميم بنصّ LTR يخفي هذه المشكلة.

رابعاً: شكل الحرف. العربية متّصلة (cursive)، فالحرف يأخذ شكلاً مختلفاً حسب موقعه في الكلمة (بداية، وسط، نهاية، منفصل). النصّ اللاتيني لا يُحاكي هذا أبداً.

خامساً: الترقيم. العربية تستخدم علامات مختلفة (؟ بدل ?، ؛ بدل ;، ، بدل ,). نصّ Lorem الإنجليزي يستخدم العلامات اللاتينية، ما يكشف زيف الحشو فوراً في أيّ مراجعة.

خذ صندوقاً من نوع card في تصميم RTL، وضع داخله Lorem الإنجليزي. ما يحدث:

1. الـ alignment المختلط. الحاوية RTL لكنّ النصّ LTR — المتصفّح يحاول التوفيق فتظهر النقطة (.) في بداية السطر بدلاً من نهايته، والأرقام تُكتب من اليسار لليمين داخل سياق يمين-يسار.

2. خداع الـ visual weight. الإنجليزية أرفع بصرياً من العربية. تصميم يبدو متوازناً بـ Lorem الإنجليزي قد ينقلب إلى ثقيل ومزدحم حين تضع فيه النصّ العربي الفعلي.

3. تكسّر العناوين والـ truncation. سياسة قطع النصّ (text-overflow: ellipsis) تتصرّف بشكل مختلف في RTL. اختبارها بنصّ LTR يعطي نتائج كاذبة، فتفاجأ عند الإطلاق بأنّ العناوين تُقطع في الجهة الخطأ.

4. خداع الـ approval.يوافق العميل على التصميم وهو يرى Lorem لاتيني، ثمّ ترسل له الإصدار العربي ويردّ بـ "هذا ليس ما اتفقنا عليه" — لأنّ التصميم البصري تغيّر فعلاً.

النصّ الوهمي العربي مفيد في خمس حالات محدّدة:

أ) Wireframes ومراحل التصميم المبكّرة. حين تعرض الفكرة العامّة قبل كتابة المحتوى الفعلي. النصّ الحقيقي في هذه المرحلة يلهي عن التصميم نفسه.

ب) Design Systems و UI Kits. مكتبة المكوّنات لا تحتوي محتوى حقيقياً — تحتوي عيّنات تُظهر كيف يتصرّف المكوّن مع نصوص مختلفة الأطوال.

ج) Storybook و Component Demos. توضيح أنّ المكوّن يدعم 3 أسطر، 5 أسطر، 10 أسطر — كلّها بنصّ عربي وهمي.

د) Mockups للعملاء. حين تعرض اقتراحاً لموقع جديد قبل أن يجهّز العميل المحتوى الفعلي.

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

هناك خمس حالات يكون فيها استخدام النصّ الوهمي خطأ فادحاً:

1. الصفحات النهائية قبل الإطلاق. أيّ صفحة تذهب للإنتاج يجب أن تحتوي نصّاً حقيقياً. النصّ الوهمي الذي يتسرّب للإنتاج كارثة سمعة (حدث لمواقع شركات كبرى — Google قد تفهرس النصّ الوهمي).

2. اختبار قابلية القراءة (readability). النصّ الوهمي بطبيعته غير قابل للفهم. اختبار سهولة قراءته بلا معنى — استخدم نصّاً حقيقياً مختصراً.

3. عرض النص في صور SEO و meta tags. أيّ شيء يصل لمحرّكات البحث يجب أن يكون حقيقياً. النصّ الوهمي في meta description = كارثة.

4. اختبار المستخدم (user testing). المستخدم يحتاج فهم ما يقرأ ليُجيب عن أسئلة الاختبار. النصّ الوهمي يجعل الاختبار بلا قيمة.

5. لقطات المتجر (App Store / Google Play). Apple وGoogle ترفضان التطبيقات التي تحتوي لقطات بنصّ Lorem. تأكّد من استبدال كلّ شيء قبل الرفع.

سؤال شائع: هل وضع نصّ وهمي مؤقّت في صفحة منشورة يضرّ السيو؟ الإجابة المختصرة: نعم، وبشدّة. والإجابة المفصّلة:

1. Duplicate content. ملايين المواقع تستخدم نفس نصّ Lorem الإنجليزي. لو وُضع في صفحة منشورة، Google قد يصنّفها كمحتوى مكرّر منخفض الجودة، وقد لا يفهرسها أصلاً.

2. Thin content. خوارزميات Google (خاصةً Helpful Content System منذ 2023) تُعاقب الصفحات الفقيرة المحتوى. نصّ وهمي = صفر قيمة للقارئ = تصنيف منخفض.

3. Indexing وقت طويل لاحقاً. حتى لو استبدلت النصّ بالحقيقي بعد يومين، Google قد يكون قد التقط النسخة الوهمية وحكم عليها سلباً، ويأخذ أسابيع ليُعيد التقييم.

4. الكلمات المفتاحية.النصّ الوهمي لا يحتوي أيّ كلمة مفتاحية ذات صلة بنشاطك. صفحة تستحقّ الترتيب على "أفضل أداة تصميم" لن تصلها هذه الكلمات أبداً من Lorem Ipsum.

القاعدة الذهبية: لا ترفع شيئاً للإنتاج يحتوي نصّاً وهمياً، أبداً. استخدم noindex meta tag لأيّ صفحة تجريبية، أو احتفظ بها في staging environment.

الأداة في أعلى الصفحة تولّد أربعة أنماط مختلفة، لأنّ النصّ المناسب يختلف بحسب طبيعة الموقع:

الفصيح الكلاسيكي. نبرة تراثية، حِكم وأمثال عربية، مفردات فصحى عالية. مناسب لمواقع: ثقافية، دينية، أكاديمية، مجلّات أدبية. مثال: «إنّ في تعاقب الليل والنهار آيةً لمن أراد أن يذّكّر».

التقني. مصطلحات هندسية وبرمجية، جمل وصفية لنظام. مناسب لـ: لوحات تحكّم، وثائق API، مواقع SaaS، صفحات developer. مثال: «يعتمد النظام على بنية موزّعة تضمن استمرارية الخدمة».

الإخباري. أسلوب الصحف، جمل تقريرية حياديّة. مناسب لـ: مواقع الأخبار، المدوّنات الإخبارية، news feeds في تطبيقات. مثال: «أعلنت الحكومة اليوم عن حزمة إصلاحات اقتصادية».

الأدبي. أسلوب وصفي شعري، جمل طويلة بصور بلاغية. مناسب لـ: مواقع الكتب، المجلّات الأدبية، صفحات About للمؤسّسات الإبداعية. مثال: «كانت الشمس تتسلّل من بين أوراق الشجر».

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

استخدام النصّ الوهمي العربي في أدوات التصميم الثلاث الكبرى:

Figma

فعّل دعم RTL في Text Settings (Figma يدعم RTL أصلاً منذ 2022). ولّد النصّ من الأداة في الأعلى، انسخه، والصقه. لتعبئة سريعة لمكوّنات متعدّدة، استخدم plugin مثل "Content Reel" وأضِف الفقرات المولّدة كـ custom dataset.

Sketch

Sketch يدعم RTL لكن مع تحفّظات. استخدم plugin "Data Populator" مع ملفّ JSON يحتوي الفقرات المولّدة. حدّد text-align: right صراحةً على كلّ Text Layer.

Adobe XD

XD يدعم RTL لكن واجهته تُقصّر في بعض التفاصيل (TabStops معكوسة). استخدم "Repeat Grid" مع ملفّ نصّي يحتوي عيّنات بأطوال متعدّدة لاختبار حدود البطاقات.

نصيحة عملية: احفظ ثلاث نسخ من النصّ المولّد (قصيرة، متوسّطة، طويلة) واستخدمها بانتظام عبر كلّ المشاريع لاختبار حالات الـ overflow.

عند بناء مكتبة مكوّنات React/Vue مع Storybook، النصّ الوهمي العربي يُظهر سلوك المكوّن في حالات حقيقية:

// stories/Card.stories.tsx
export const LongArabicTitle = {
  args: {
    title: "إنّ في تعاقب الليل والنهار آيةً لمن أراد أن يذّكّر أو يشكر",
    body: "العلم نورٌ يهدي صاحبه إلى الرشاد ويُجنّبه مزالق الجهل…",
  },
};

هذا يكشف ثلاث مشاكل شائعة قبل وصولها للإنتاج:

1. هل يلتفّ العنوان الطويل بشكل صحيح؟ هل يبقى ارتفاع البطاقة منتظماً؟

2. هل line-height مناسب للعربية (يجب 1.8+)، أم نسخت قيمة 1.4 من المكوّن الإنجليزي؟

3. هل تعمل خاصّية line-clamp بشكل صحيح في RTL؟ بعض المتصفّحات القديمة تكسرها.

النصّ الوهمي حلّ مؤقّت. هذه ثلاثة بدائل قد تكون أفضل في حالات معيّنة:

1. المحتوى الحقيقي المختصر. اطلب من العميل/فريق المحتوى عيّنة مكتوبة بعناية لأهمّ ثلاث بطاقات/أقسام. حتى لو لم يكتمل المحتوى، عيّنة حقيقية تكشف مشاكل التصميم أسرع.

2. نصّ من Wikipedia العربية. فقرات من مقالات عشوائية على Wikipedia العربية تعطي نصّاً واقعياً متنوّعاً. عيب: قد يلهي القارئ بمحتوى مثير للاهتمام.

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

نقطة يتجاهلها كثير من المصمّمين: قارئات الشاشة (Screen Readers) تنطق Lorem Ipsum كأنّه كلمات حقيقية. لو وُضع في صفحة منشورة، مستخدم VoiceOver أو NVDA يسمع "لوريم إيبسوم دولور سيت أميت" — تجربة مزعجة وفاشلة.

توصيات للوصول:

1. أيّ نصّ وهمي في صفحة قد يصل للإنتاج، ضع له aria-hidden="true".

2. اختبر بقارئ شاشة قبل الإطلاق. لو سمعت شيئاً وهمياً، احذفه أو استبدله.

3. النصّ الوهمي يجب أن يحاكي طول النصّ الحقيقي. لو وضعت 5 كلمات حشو في مكان عنوان من 12 كلمة، اختبار قارئ الشاشة (الذي يعتمد على البنية الكاملة) يكون مضلّلاً.

ما الفرق بين نصّ Lorem العربي والنصّ التقليدي اللاتيني؟

الفرق الجوهري: الاتجاه (RTL مقابل LTR)، متوسّط طول الكلمة (5.4 حرف مقابل 4.7)، علامات الترقيم العربية، وارتفاع السطر المطلوب. الإصدار العربي يجعل التصميم RTL محاكاةً صادقة للنصّ النهائي.

هل يضرّ النصّ الوهمي بالـ SEO؟

نعم بشدّة إذا تسرّب للإنتاج. Google يصنّفه كمحتوى مكرّر منخفض الجودة (millions of websites use the same Lorem text)، وخوارزميات Helpful Content تُعاقب الصفحات الفقيرة. لا ترفع أيّ صفحة فيها نصّ وهمي للنشر، استخدم noindex في staging.

كم فقرة أحتاج عادةً؟

للـ wireframe السريع 1-2 فقرة كافية. لـ Storybook اصنع 3 نسخ (قصيرة 1 جملة، متوسّطة 3 جمل، طويلة 5+ جمل) لاختبار حالات الـ overflow. لـ mockup صفحة كاملة 5-8 فقرات بأنماط متنوّعة.

هل النصّ المولّد "حقيقي"؟

لا، إنّه عيّنات أدبية وحِكم وجمل تقنية مُجمّعة بترتيب عشوائي. تشبه النصّ الحقيقي في الإيقاع والمفردات، لكنّها لا تشكّل محتوى متماسكاً يحمل معنىً منطقياً. هدفها التصميم وحده، لا القراءة الفعلية.

هل يمكن استخدامها في تطبيقات Figma و Sketch تلقائياً؟

نعم. ولّد الفقرات من الأداة، انسخها لملفّ JSON، واستخدم plugin مثل Content Reel (Figma)، Data Populator (Sketch)، أو Repeat Grid (XD). للسرعة، احتفظ بـ dataset جاهز يحتوي 30+ فقرة بأطوال متنوّعة.

هل تحفظ هذه الأداة أيّ بيانات؟

لا. كلّ التوليد يحدث محلياً في متصفّحك — لا طلبات شبكة، لا تتبّع، لا تخزين. يمكنك حتى قطع الإنترنت وستعمل الأداة. النصوص المولّدة لا تُرسل لأيّ خادم.

الأداة في أعلى الصفحة تولّد أربعة أنماط من النصّ العربي الوهمي (فصيح، تقني، إخباري، أدبي) بتحكّم بعدد الفقرات أو الجمل أو الكلمات. استخدمها في wireframes و Storybook و Figma mockups — لكن لا ترفع شيئاً للإنتاج يحتوي حشواً. النصّ الحقيقي المختصر أفضل دائماً من النصّ الوهمي الطويل.