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

فصل المخاوف

تتمثل إحدى الفوائد الرئيسية لـ CSS في فصل المحتوى عن العرض. بعبارات أبسط ، هذا يعني بدلاً من العلامات الأسلوبية القديمة جدًا مثل:

عنوان

نستخدم الترميز الدلالي:

عنوان

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

h1 {font-weight: normal؛ }

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

بما في ذلك ورقة أنماط الطباعة

بطريقة مماثلة لتضمين ورقة أنماط الشاشة ، يمكننا تحديد ورقة أنماط للطباعة. عادةً ما يتم تضمين ورقة أنماط الشاشة على النحو التالي:

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

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

في هذا المثال ، فإن ملف print.css سيتم استخدام ورقة الأنماط فقط عند طباعة المستند. هذه آلية مفيدة للغاية. يمكننا جمع كل الأنماط الشائعة (ربما عائلة الخطوط أو تباعد الأسطر) في ورقة أنماط تنطبق على جميع الوسائط ، وتنسيقات خاصة بالوسائط في أوراق أنماط فردية. مرة أخرى ، هذا استخدام آخر لفصل الاهتمامات.

بعض الأمثلة على نمط التصريحات

خلفية نظيفة

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

جسم {
الخلفية: أبيض ؛
لون أسود؛
}

قد ترغب أيضًا في منع طباعة أي صور خلفية - يجب أن تكون هذه الصور زخرفية ، وبالتالي ليست جزءًا مطلوبًا من المحتوى الخاص بك:

* {
صورة الخلفية: لا شيء! مهم ؛
}

متعلق ب: كيفية تعيين صورة الخلفية في CSS

كيفية تعيين صورة الخلفية في CSS

CSS هي أداة قوية لتصميم صفحات الويب. تعلم كيفية وضع صورة الخلفية يعلمك الكثير من أساسيات CSS.

السيطرة على الهوامش

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

على سبيل المثال ، في مربع حوار الطباعة في Chrome ، يوجد إعداد هامش يتضمن قيمًا لا أحد و العادة والذي سيتجاوز أي شيء محدد عبر CSS:

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

@صفحة {
الهامش: 2 سم ؛
}

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

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

@صفحة {
هامش اليسار: 20 مم ؛
الهامش الأيمن: 20 مم ؛
الهامش العلوي: 40 مم ؛
الهامش السفلي: 50 مم ؛
}
@ الصفحة: اليسار {
هامش اليسار: 30 مم ؛
}
@ الصفحة: صحيح {
الهامش الأيمن: 30 مم ؛
}

إخفاء المحتوى غير ذي الصلة

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

#contents، div.ad {display: none؛ }

من الواضح أن الارتباطات التشعبية ليست ذات صلة بالمواد المطبوعة ، لذلك قد ترغب في إزالة أي أنماط تميزها عن النص المحيط:

a {زخرفة النص: لا شيء ؛ اللون: يرث ؛ }

ومع ذلك ، قد لا تزال ترغب في أن يتمكن القراء من الوصول إلى عناوين URL الأصلية ، والحل المباشر هو إدراجها تلقائيًا بعد النص المرتبط:

أ [href]: بعد {
المحتوى: "(" attr (href) ")" ؛
حجم الخط: 90٪؛
اللون: # 333 ؛
}

يعطي CSS نتائج مثل ما يلي:

a [href]: بعد يستهدف على وجه التحديد المنصب بعد (:بعد، بعدما) كل عنصر ارتباط (أ) يحتوي بالفعل على عنوان URL ([href]). ال المحتوى الإعلان هنا يدرج قيمة href السمة بين قوسين. لاحظ أنه يمكن تطبيق قواعد النمط الأخرى للتحكم في عرض المحتوى الذي تم إنشاؤه.

معالجة فواصل الصفحات

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

الجدول {فاصل الصفحات من الداخل: تجنب ؛ }

من المفترض أن يساعد ذلك في منع الجداول من أن تمتد عبر صفحات متعددة ، بشرط ألا يكون أي منها أطول من صفحة واحدة. بصورة مماثلة:

h1، h2 {page-break-before: always؛ }

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

h1 + h2 {page-break-before: تجنب ؛ }

عرض أنماط الطباعة

في جميع الحالات ، يجب أن يوفر المتصفح ونظام التشغيل ميزة معاينة الطباعة ، غالبًا كجزء من مربع حوار الطباعة القياسي.

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

من اللوحة الجديدة التي تظهر ، حدد قائمة، من ثم أدوات أكثر، تليها استدعاء:

ثم قم بالتمرير لأسفل إلى ملف محاكاة نوع وسائط CSS ضبط. تتيح لك القائمة المنسدلة التبديل بين عرض الشاشة وطباعة المستند:

عند محاكاة ورقة أنماط الطباعة ، يكون المعيار متصفح الأنماط متاح لفحص قواعد النمط المباشر وتعديلها. ضع في اعتبارك أن محاكاة إخراج الطباعة على الشاشة لا تزال غير دقيقة بنسبة 100٪. لا يعرف المتصفح شيئًا عن حجم الورق و @صفحة لا يمكن محاكاة القاعدة.

الطباعة إلى ملف PDF

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

هذا يجعل HTML ، إلى جانب ورقة أنماط الطباعة ، وسيلة ممتازة لإنشاء مستند عالي الجودة يمكن إرساله كمرفق ، وكذلك طباعته.

اطبع مجموعة متنوعة من المستندات

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

كيفية طباعة صفحات الويب إلى PDF باستخدام Microsoft Edge

هل سبق لك أن صادفت مقالًا مثيرًا للاهتمام أردت حفظه لوقت لاحق؟ حسنًا ، يمكنك الحفظ بتنسيق PDF باستخدام Edge في ثلاث خطوات سهلة.

عن المؤلف