حسن تصميم الويب غالبًا ما يتعلق بالطباعة الجيدة. نظرًا لأن الكثير من محتوى صفحة الويب يتم تقديمه كنص ، فإن القدرة على تصميم هذا النص ليكون جذابًا وفعالًا على حد سواء هي مهارة مهمة يجب أن تمتلكها كمصمم ويب. لسوء الحظ ، ليس لدينا نفس مستوى التحكم المطبعي عبر الإنترنت الذي نتمتع به في الطباعة. هذا يعني أنه لا يمكننا دائمًا تصميم نص موثوق به على موقع ويب بنفس الطريقة التي يمكننا بها القيام بذلك في قطعة مطبوعة.
أحد أنماط الفقرة الشائعة التي تراها غالبًا في الطباعة (والتي يمكننا إعادة إنشائها عبر الإنترنت) هو المكان الذي يتم فيه وضع مسافة بادئة للسطر الأول من تلك الفقرة. مسافة الجدولة. يتيح ذلك للقراء معرفة أين تبدأ فقرة واحدة وتنتهي فقرة أخرى.
لا ترى هذا النمط المرئي كثيرًا في صفحات الويب لأن المستعرضات ، افتراضيًا ، تعرض فقرات بمسافة تحتها كطريقة لإظهار أين ينتهي أحدهما ويبدأ الآخر ، ولكن إذا كنت تريد تصميم صفحة بحيث يكون ذلك مستوحى من الطباعة أسلوب المسافة البادئة في الفقرات ، يمكنك فعل ذلك بامتداد المسافة البادئة النص الملكية على غرار.
صيغة هذه الخاصية بسيطة. إليك كيفية إضافة مسافة بادئة نصية لجميع الفقرات في المستند.
ص {
مسافة بادئة نصية: 2em ؛
}
تخصيص المسافات البادئة
إحدى الطرق التي يمكنك من خلالها تحديد الفقرات التي تريد وضع مسافة بادئة لها بالضبط ، يمكنك إضافة فئة إلى الفقرات التي تريد وضع مسافة بادئة لها ، لكن هذا يتطلب تحرير كل فقرة لإضافة فئة إليها. هذا غير فعال ولا يتبع ترميز HTML أفضل الممارسات.
بدلاً من ذلك ، يجب أن تضع في اعتبارك عند مسافة بادئة للفقرات. تقوم بعمل مسافة بادئة للفقرات التي تلي فقرة أخرى مباشرة. للقيام بذلك ، يمكنك استخدام محدد الأخوة المجاور. باستخدام هذا المحدد ، تقوم بتحديد كل فقرة تسبقها فقرة أخرى مباشرة.
ع + ص {
مسافة بادئة نصية: 2em ؛
}
نظرًا لأنك تقوم بوضع مسافة بادئة للسطر الأول ، يجب عليك أيضًا التأكد من عدم وجود مسافة إضافية بين الفقرات (وهو المتصفح الافتراضي للمتصفح). من الناحية الأسلوبية ، يجب أن يكون لديك مسافة بين الفقرات أو مسافة بادئة للسطر الأول ، ولكن ليس كليهما.
ص {
الهامش السفلي: 0 ؛
الحشوة السفلية: 0 ؛
}
ع + ص {
أعلى الهامش: 0 ؛
حشوة أعلى: 0 ؛
}
المسافات البادئة السلبية
يمكنك أيضًا استخدام ملف المسافة البادئة النص الخاصية ، جنبًا إلى جنب مع القيمة السالبة ، للتسبب في انتقال بداية السطر إلى اليسار بدلاً من اليمين مثل المسافة البادئة العادية. يمكنك القيام بذلك إذا كان السطر يبدأ بعلامة اقتباس بحيث يظهر حرف الاقتباس في هامش طفيف على يسار الفقرة ولا تزال الحروف نفسها تشكل يسارًا لطيفًا انتقام.
لنفترض ، على سبيل المثال ، أن لديك فقرة منحدرة من blockquote وتريد وضع مسافة بادئة سالبة لها. يمكنك كتابة CSS هذا:
blockquote ص {
مسافة بادئة نصية: -.5em ؛
}
سيعطي هذا بداية الفقرة ، والتي من المفترض أن تتضمن حرف الاقتباس الافتتاحي ، ليتم نقلها قليلاً إلى اليسار لإنشاء علامات ترقيم معلقة.
بخصوص الهوامش والحشو
في كثير من الأحيان في تصميم الويب ، أنت تستخدم قيم الهامش أو المساحة المتروكة لتحريك العناصر وإنشاء مساحة بيضاء. ومع ذلك ، لن تعمل هذه الخصائص لتحقيق تأثير الفقرة ذي المسافة البادئة. إذا قمت بتطبيق أي من هذه القيم على الفقرة ، فسيتم تباعد نص تلك الفقرة بالكامل ، بما في ذلك كل سطر ، بدلاً من السطر الأول فقط.