الصفحة الرئيسية
إضافات
افكار

تصميم نص وهمي (DummyText) لصفحات المعاينة

dummyText يُعين تنسيقًا لنص داخل عناصر HTML، حيث يجعل النص ككتلة عرض بالعرض الكامل، يضيف له لون خلفية للتمييز، ويحدد هامشًا سفليًا وارتفاعًا...
جمال الحزازي
Split Post - Split Article Into Several Pages تصميم نص وهمي (DummyText) لصفحات المعاينة

السلام عليكم ورحمة الله وبركاته

مقدمة:

بلا شك قد تكون رأيت بعض النصوص الوهمية في صفحات المعاينة و مواقع Unplug للمعاينة و اثار انتباهك العديد من التصاميم لأشكال و خطوط وهمية تطفي نوع احترافي لواجهة المستخدم ui/ux قديما كنا نرى نصوص زائفة بصيغة لوريم ايبسوم الان و مع تطور الويب و احترافية في التصاميم صار كل مصمم يحاول التفرد و الإبداع في شكل المعاينة للمحتوى الذي يوفره هذا ما جعلني افكر فموضوع النص الوهمي و احاول ابتكار تصميم شكل احترافي لهذه العملية نظراً لانني اقدم محتوى يحتاج الى صفحات Unplug للمعاينة فبلا شك سافكر في مشاركة النتيجة معك و تعم الفائدة.

فكرة تصميم النص الوهمي تعتمد على استخدام نص "بديل" بدلاً من استخدام نص لوريم إيبسوم (Lorem Ipsum). يتم استخدام النص الوهمي أحيانًا في عمليات التصميم لتمثيل مظهر النص النهائي دون الحاجة إلى النص الفعلي. يمكن أن يكون النص الوهمي بسيطًا مثل "نص عربي" أو "نص باللغة الإنجليزية"، أو يمكن أن يحتوي على عناصر نصية بديلة مثل "عنوان"، "فقرة"، "عنصر قائمة"، وغيرها. يساعد استخدام النص الوهمي في تقديم نظرة عامة على كيفية يتأثر التصميم بالنص الفعلي دون الحاجة إلى انتظار الحصول على النص الفعلي.

تهدف هذه المقالة إلى شرح الشيفرة المقدمة ولماذا يمكن استخدامها. الشيفرة تتضمن كود CSS لعرض نص وهمي على صفحة الويب. سيتم تناول كل جزء من الشيفرة وتفسيره بالتفصيل.

سؤال: ما هو الهدف من استخدام هذا النوع من النص الوهمي في التصميم؟

إجابة: الهدف هو تمثيل مظهر النص النهائي بشكل أفضل دون الحاجة إلى النص الفعلي، وتقديم تجربة مرئية واقعية للمستخدمين والمصممين.

سؤال: هل يمكن استخدام هذا النص الوهمي كبديل لنص Lorem Ipsum؟

إجابة: نعم، يمكن استخدامه كبديل مثير للاهتمام لـ Lorem Ipsum في بعض الحالات لتحسين تجربة المستخدم وتوفير رؤية واضحة للمظهر النهائي.

سؤال: هل يوفر هذا النوع من النص الوهمي تجربة مستخدم أفضل وأكثر دقة خلال مرحلة تصميم الواجهة؟

إجابة: نعم، يساعد استخدام النص الوهمي في تحقيق تجربة مستخدم أكثر دقة ويمكن أن يسهم في تحسين فهم المظهر النهائي للتصميم وتجنب الاعتماد على نصوص فعلية قد لا تكون متاحة خلال مرحلة التطوير.

معاينة في صِوان unPlug

رمز الشيفرة css

الشيفرة CSS تحتوي على تعليمات لتنسيق النص الوهمي على صفحة الويب. يتم تقسيم الكود إلى عدة أجزاء مهمة:

/* تصميم النص الوهمي */
    .dummyText i {
    display: block;
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
    height: 1em;
    border-radius: 10px;
}
/* نص وهمي مع تصميم الصور */
    .dummyText i.img {
    height: auto;
    min-height: 200px;
    margin: 2rem 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* نص وهمي مع تصميم صورة وعليه أيقونة (SVG) */
    .dummyText i.img::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='line' viewBox='0 0 24 24'%3E%3Cpath d='M21.6799 16.9599L18.5499 9.64988C17.4899 7.16988 15.5399 7.06988 14.2299 9.42988L12.3399 12.8399C11.3799 14.5699 9.58993 14.7199 8.34993 13.1699L8.12993 12.8899C6.83993 11.2699 5.01993 11.4699 4.08993 13.3199L2.36993 16.7699C1.15993 19.1699 2.90993 21.9999 5.58993 21.9999H18.3499C20.9499 21.9999 22.6999 19.3499 21.6799 16.9599Z' fill='url(%23grad)'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='grad' gradientTransform='rotate(100)'%3E%3Cstop offset='0%25' stop-color='white' /%3E%3Cstop offset='100%25' stop-color='%23299e94' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6.96997 8C8.62682 8 9.96997 6.65685 9.96997 5C9.96997 3.34315 8.62682 2 6.96997 2C5.31312 2 3.96997 3.34315 3.96997 5C3.96997 6.65685 5.31312 8 6.96997 8Z' fill='%23ecb621'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3em;
    height: 3em;
    font-size: 3em;
    filter: blur(1.5px);
}
/* تصميم الوضع الداكن للنص الوهمي */
    .drkM .dummyText i, .header, .footer {
    background-color: rgba(255, 255, 255, 0.05);
}

تفسير كامل للعناصر و القواعد

الكود الذي قدمته لك يتضمن عدة تعريفات لكلاسات CSS وأنماط مختلفة لتنسيق النصوص والصور. سأشرح العناصر الرئيسية لكل كلاس مع القواعد المرتبطة بها.
بمعنى ان هذه الشيفرة تستخدم لتنسيق عناصر HTML باستخدام CSS. سأقوم بشرح الكود الذي قدمته لك:

سأقسم الاجزاء في كود css حتى يتسنى لنا التطرق لكل قسم من الكود.

الشيفرة الأولى:

/* Dummy Text Styling */ .dummyText i { display: block; background-color: rgba(0, 0, 0, 0.05); margin-bottom: 10px; height: 1em; border-radius: 10px; }

هنا، يتم تحديد تنسيق نص مزيف عن طريق تحديد "i" داخل العناصر التي لها فئة "dummyText". النص مفصول عن النص الآخر بواسطة خلفية باستخدام اللون مع قيمة شفافية معينة (rgba(0, 0, 0, 0.05))، ويتم تطبيق تنسيقات أخرى مثل المسافة السفلية وانحناء الحواف.

  1. كلاس .dummyText i:
    - يتم استخدام هذا الكلاس لتنسيق نوع معين من النصوص أو العناصر في الصفحة.
    - display: block; يحدد أن العنصر يجب عرضه بشكل بلوك (في سطر منفصل).
    - background-color: rgba(0, 0, 0, 0.05); يحدد لون خلفية العنصر.
    - margin-bottom: 10px; يحدد هامشاً في الأسفل من العنصر.
    - height: 1em; يحدد ارتفاع العنصر.
    - border-radius: 10px; يضبط زاوية الحواف ليكون لديها شكل مدور.

الشيفرة الثانية:

/* Dummy Text with Image Styling */ .dummyText i.img { height: auto; min-height: 200px; margin: 2rem 10%; display: flex; align-items: center; justify-content: center; position: relative; }

هنا، يتم تحديد تنسيق لنص مزيف يحتوي على صورة باستخدام الفئة "img". يحصل النص على ارتفاع تلقائي، لكن الحد الأدنى للارتفاع يتم تحديده يدويًا بقيمة 200 بكسل. كما يتم تحديد تنسيقات أخرى مثل المسافة من الجوانب، العرض باستخدام "flex" وتوسيط العناصر.

  1. كلاس .dummyText i.img:
    - يتم استخدام هذا الكلاس لتنسيق عناصر الصور داخل النصوص المزيفة.
    - height: auto; يعني ان الارتفاع هو تلقائي.
    - min-height: 200px; يحدد الحد الأدنى لارتفاع العنصر.
    - margin: 2rem 10%; يحدد الهوامش من الأعلى والأسفل واليمين واليسار.
    - display: flex; يحدد كيفية عرض العنصر بناءً على Flexbox.
    - align-items: center; يحدد محاذاة العناصر بشكل مركزي عمودياً.
    - justify-content: center; يحدد محاذاة العناصر بشكل مركزي أفقياً.
    - position: relative; يجعل العناصر تبقى ضمن تدفق الصفحة الحالي.

الشيفرة الثالثة:

.dummyText i.img::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='line' viewBox='0 0 24 24'%3E%3Cpath d='M21.6799 16.9599L18.5499 9.64988C17.4899 7.16988 15.5399 7.06988 14.2299 9.42988L12.3399 12.8399C11.3799 14.5699 9.58993 14.7199 8.34993 13.1699L8.12993 12.8899C6.83993 11.2699 5.01993 11.4699 4.08993 13.3199L2.36993 16.7699C1.15993 19.1699 2.90993 21.9999 5.58993 21.9999H18.3499C20.9499 21.9999 22.6999 19.3499 21.6799 16.9599Z'%3E%3C/path%3E%3Cpath d='M6.96997 8C8.62682 8 9.96997 6.65685 9.96997 5C9.96997 3.34315 8.62682 2 6.96997 2C5.31312 2 3.96997 3.34315 3.96997 5C3.96997 6.65685 5.31312 8 6.96997 8Z'%3E%3C/path%3E%3C/svg%3E"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3em; height: 3em; font-size: 2em; filter: blur(2px); }

هنا، يتم إضافة صورة كخلفية للنص المزيف باستخدام خاصية "::before". يتم تحديد تنسيقات للصورة المضافة كخلفية، مثل الموقع المطلوب والأبعاد ومرشح المحاذاة مع تطبيق تأثير الـ "blur" بوحدة بكسلين من أجل تحقيق تأثير التشويش.

  1. كلاس .dummyText i.img::before:
    - يستخدم لتنسيق صورة معينة أمام النصوص المزيفة التي تحتوي على عنصر i باستخدام الكلاس .img.
    - content: url(...); يضيف محتوى مرئيا من نوع صورة أو رابط محدد.
    - `"data:image/svg+xml,%3Csvg ... %3E%3C/svg%3E"` يُحدد المحتوى كصورة SVG مبنية على بيانات URL مُضغوطة.
    - svg xmlns='http://www.w3.org/2000/svg' class='line' viewBox='0 0 24 24': يفتح عنصر SVG مع تحديد الفئة ونطاق العرض والارتفاع.
    - path d='M21.6799 16.9599 ... %23ecb621'%3E%3C/path%3E: يُحدد مسار الرسم (path) داخل SVG، مع تحديد القيم لخاصية `d` التي تحدد نقاط المسار.
    - defs> و linearGradient: يُستخدمون لتعريف التدرج (gradient) المستخدم في الرسم.
    - fill='url(%23grad)': يستخدم التدرج الذي تم تعريفه (`#grad`) كلون لملء الشكل.
    - M6.96997 8 ... %23ecb621'%3E%3C/path%3E: يُحدد مسار إضافي لرسم داخل الصورة SVG.
    - position: absolute; يجعل العنصر يستخدم تنسيق الموضع المطلق بناء على الإطار الأقرب له.
    - top: 50%; left: 50%; يحدد موضع العنصر عن طريق الإحداثيات.
    - transform: translate(-50%, -50%); يقوم بتحريك العنصر نحو الوسط.
    - width: 3em; height: 3em; يحدد عرض وارتفاع العنصر.
    - font-size: 2em; يحدد حجم الخط للعنصر.
    - filter: blur(2px); يطبق مؤثر التشويش على العنصر.

بشكل عام، هذا المحتوى يقوم برسم صورة SVG تحتوي على خطوط وأشكال معينة، ويستخدم تدرجًا للتلوين. تمثل هذه الصورة الرمزية المُستخدمة قبل عناصر <i> ذات الفئة `.img` لتحسين التصميم البصري.

الشيفرة الرابعة:

/* Dark Mode Styling for Dummy Text */ .drkM .dummyText i { background-color: rgba(255, 255, 255, 0.05); }

هنا، يتم تحديد تنسيق إضافي لنص المزيف في وضع الظلام (Dark Mode)، يقوم بتغيير لون الخلفية ليناسب الوضع المظلم.

  1. كلاس .drkM .dummyText i:
    - يستخدم لتنسيق النصوص المزيفة عند تفعيل الوضع الداكن للصفحة.
    - background-color: rgba(255, 255, 255, 0.05); يحدد لون خلفية العنصر عند تفعيل الوضع الداكن.

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

الايقونة المستعملة بصيغة SVG خامة بدون تعديل و معدلة بادراج الالوان و باقي التخصيصت

<svg class="line" viewBox="0 0 24 24"><path d="M21.6799 16.9599L18.5499 9.64988C17.4899 7.16988 15.5399 7.06988 14.2299 9.42988L12.3399 12.8399C11.3799 14.5699 9.58993 14.7199 8.34993 13.1699L8.12993 12.8899C6.83993 11.2699 5.01993 11.4699 4.08993 13.3199L2.36993 16.7699C1.15993 19.1699 2.90993 21.9999 5.58993 21.9999H18.3499C20.9499 21.9999 22.6999 19.3499 21.6799 16.9599Z"></path><path d="M6.96997 8C8.62682 8 9.96997 6.65685 9.96997 5C9.96997 3.34315 8.62682 2 6.96997 2C5.31312 2 3.96997 3.34315 3.96997 5C3.96997 6.65685 5.31312 8 6.96997 8Z"></path></svg>
<svg class="line" viewBox="0 0 24 24" width="3512" height="1756"><path d="M21.6799 16.9599L18.5499 9.64988C17.4899 7.16988 15.5399 7.06988 14.2299 9.42988L12.3399 12.8399C11.3799 14.5699 9.58993 14.7199 8.34993 13.1699L8.12993 12.8899C6.83993 11.2699 5.01993 11.4699 4.08993 13.3199L2.36993 16.7699C1.15993 19.1699 2.90993 21.9999 5.58993 21.9999H18.3499C20.9499 21.9999 22.6999 19.3499 21.6799 16.9599Z" fill="url(#grad)"></path><defs><linearGradient id="grad" gradientTransform="rotate(100)"><stop offset="0%" stop-color="white" /><stop offset="100%" stop-color="#299e94" /></linearGradient></defs><path d="M6.96997 8C8.62682 8 9.96997 6.65685 9.96997 5C9.96997 3.34315 8.62682 2 6.96997 2C5.31312 2 3.96997 3.34315 3.96997 5C3.96997 6.65685 5.31312 8 6.96997 8Z" fill="#ecb621"></path></svg>

الملاحظات:
- يمكنك ضبط القيم حسب الحاجة لتلبية تصميمك.
- التعليقات توفر شرحًا لكل خاصية لمساعدتك في فهم وظيفتها.
- يساعد استخدام وحدات القياس المرنة مثل `em` في تحقيق التناسب مع أحجام النصوص والعناصر.

طريقة اضافة كود CSS

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

نصيحة:
قم بتعليم الاكواد التي تظيفها داخل قالبك في عناصر html بتوثيق مناسب لك مثلا: <----[توثيق]---> اما فيما يخص توثيق css اضف /*...توثيق...*/ حتى لا يحدث اي اختلاط و تبقى لك امكانية معرفة اين وضعت الكود المعدل.

اذا كنت تستخم الهاتف انصحك بتنزيل نسخة للقالب و كرر النسخ لنسختين بعدها افتح محرر النصوص انصحك بتطبيق [Quick Editor+] واضف التعديلات اما اذا كنت تريد تطبيق التعديلات مباشرة من لوحة التحكم انصحك بتنزيل تطبيق [Hacker's Keyboard] نظرا لوجود جميع الاختصارات الموجودة في لوحة مفاتيح الحاسوب كاختصار البث و النسخ و اللصق و التحديد...

  1. إضافة كود CSS:
    - تسجيل الدخول إلى حساب بلوجر:
    قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
    - انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
    - انقر على السهم بجانب التخصيص اختر تعديل HTML
    - ابحث عن `]]</b:skin>` وضع الكود CSS فوقه.
    - بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

رمز الشيفرة HTML

الشيفرة HTML تعرض كيفية استخدام العناصر والفئات المعرفة في الشيفرة CSS:

<!-- البنية العامة للنص التمثيلي -->
<p class='dummyText'>
    <i style="margin-right: 10%;">
    </i>
    <i>
    </i>
    <i>
    </i>
    <i class="img"> 
    </i>
    <i>
    </i>
    <i>
    </i>
    <i style="width: 50%;">
    </i>
</p>

تفسير العناصر:

هذا الكود هو عبارة عن تصميم CSS لعناصر HTML تمثل نصًا بدون محتوى فعلي. إليك شرح لكل عنصر بشكل منفصل:

  1. <p class='dummyText'>: هذا هو عنصر فقرة <p> يحمل فئة (class) تسمى "dummyText".
  2. <i>: هذا العنصر يستخدم لتمثيل نص بديل أو أيقونات دون تأثير معنوي أو ملاحظات. في هذا السياق، يتم استخدام عناصر <i> كعناصر فارغة لتحقيق تصميمات معينة.
  3. <i style="margin-right: 10%;"></i>: هذا العنصر <i> يحتوي على خاصية (style) تسمى "margin-right" التي تعطيه هوامش عند اليمين بنسبة مئوية تبلغ 10%.
  4. <i class="img">: هذا العنصر <i> يحمل فئة تسمى "img" والتي يمكن استخدامها لتطبيق تصميمات خاصة مرتبطة بالصور.
  5. <i style="width: 50%;">: هذا العنصر <i> يحتوي على خاصية (style) تسمى "width" والتي تحدد عرضه بنسبة مئوية تبلغ 50%، مما يجعله يشغل نصف عرض النص التمثيلي.

تلك هي العناصر التي تم تعريفها في الكود. يبدو أن الكود يستخدم لتخطيط المحتوى وتحقيق تصميم معين للنص دون الحاجة إلى استخدام نص حقيقي.

طريقة اضافة كود HTML

  1. إضافة كود HTML:
    - في لوحة التحكم بلوجر ادخل على المشاركات او الصفحات.
    - على حسب رغبتك يمكنك اضافة الكود ضمن مشاركة او صفحة تابثة.
  2. - انقر على انشاء مشاركة/صفحة جديدة.
    - غير من وضع الانشاء الذي رمزه الى وضع تكويد HTML الذي رمزه .
  3. - الصق الكود html كما مكتوب اسفله 
    <!-- البنية العامة للنص التمثيلي -->
<p class='dummyText'>
    <i style="margin-right: 10%;"></i>
    <i></i>
    <i></i>
    <i class="img"> </i>
    <i></i>
    <i></i>    
    <i style="width: 50%;"></i>
</p>
  4. - قم بتغير الكتابة المؤشر عليها بما تريد ادارجه في القائمة التي تريد انشاءها.
  5. - انقر على نشر و قم بمعاينة الصفحة لترى النتيجة.

الملاحظات:
- يمكنك تغيير الأشكال أو إضافة نص إضافي في الفقرة وتكييف العناصر والألوان وفقًا لاحتياجاتك.

يمكننا استخدام هذا النوع من النص الوهمي خلال مرحلة تصميم الواجهة لتمثيل مظهر النص النهائي بشكل أفضل دون الحاجة إلى النص الفعلي. يساعدنا هذا في تقديم تجربة مرئية واقعية للمستخدمين والمصممين على حد سواء، ويمكن استخدامه كبديل مثير للاهتمام لنص Lorem Ipsum في بعض الحالات.

النتيجة النهائية:

بعد تطبيق الشيفرة، سيتم عرض نص وهمي بالشكل التالي:

  1. - تظهر العناصر `<i>` بلون خلفية معين مع مسافة مناسبة بينها.
  2. - توجد عنصر `<i>` ذو ارتفاع متغير ومسافة محددة.

استخدامات محتملة

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

يُلاحظ أن الكود المقدم يعتمد على CSS لتنسيق النص الوهمي، و HTML لعرضه على صفحة الويب. يجب ملاحظة أن هذا النص الوهمي يمكن استخدامه أثناء مرحلة تصميم الواجهة لتمثيل مظهر النص النهائي دون الحاجة إلى النص الفعلي. قد يحل هذا النوع من النص محل Lorem Ipsum في بعض الحالات لتوفير تجربة مرئية أفضل للمستخدمين والمصممين على حد سواء.

ختاماً

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

شكرًا لمساعدة #ChatGPT في إعداد هذا المقال

المصدر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/03/dummy-text-styling.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"