دليل لحالة أوراق أنماط الطباعة في عام 2018

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

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

الأماكن الرئيسية لدعم الطباعة

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

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

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

لماذا ستتم طباعة هذه الصفحة؟

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

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

سير العمل

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

إضافة أنماط طباعة إلى صفحة

لتمكين "ورقة أنماط الطباعة" ، فإن ما نقوم به هو إخبار المتصفح بقواعد CSS هذه عند طباعة المستند. تتمثل إحدى طرق القيام بذلك في ربط ورقة أنماط إضافية باستخدام عنصر <link> .

 <link rel="stylesheet" media="print" href="print.css">

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

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

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

 @media print { }

الكتابة فوق CSS للشاشة أو إنشاء قواعد منفصلة

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

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

 @media screen { }

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

 @media screen and (min-width: 500px) { }

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

أضف أنماط الطباعة الخاصة بك إلى مكتبات الأنماط وأدلة الأنماط الخاصة بك

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

أساسيات CSS للطباعة

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

إخفاء المحتوى

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

 .box { display: none; }

باستخدام display: none سيؤدي إلى انهيار العنصر وجميع عناصره الفرعية. لذلك ، إذا كان لديك معرض صور تم ترميزه كقائمة ، فكل ما عليك فعله لإخفاء ذلك عند الطباعة هو ضبط display: none في ul .

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

إدخال المحتوى

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

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

يمكنك إدراج سلسلة نصية بسيطة في المستند الخاص بك. يستهدف المثال التالي العنصر بفئة wrapper وإدراج السلسلة قبلها ، "الرجاء مراجعة www.mysite.com للحصول على أحدث إصدار من هذه المعلومات."

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

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

 a[href]:after { content: " (" attr(href) ")"; }

يمكنك استخدام CSS الأحدث :not selector لاستبعاد الروابط الداخلية إذا كنت ترغب في ذلك.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

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

تصميم طباعة متقدم

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

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

الوسائط المرقمة

يتم فتح مواصفات CSS Paged Media Specification بالوصف التالي لدورها.

"تحدد وحدة CSS النمطية هذه كيفية إنشاء الصفحات وتخطيطها للاحتفاظ بالمحتوى المجزأ في عرض تقديمي مقسم إلى صفحات. يضيف وظائف للتحكم في هوامش الصفحة ، وحجم الصفحة والاتجاه ، والرؤوس والتذييلات ، ويوسع المحتوى الذي تم إنشاؤه لتمكين ترقيم الصفحات وتشغيل الرؤوس / التذييلات. "

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

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

 @page { margin: 20px; }

يمكنك استهداف صفحات معينة باستخدام :left و :right . يمكن استهداف الصفحة الأولى بـ :first محدد الفئة الزائفة الأولى والصفحات الفارغة الناتجة عن فواصل الصفحات يمكن تحديدها بـ :blank . على سبيل المثال ، لتعيين الهامش العلوي في الصفحة الأولى فقط:

 @page :first { margin-top: 250pt; }

لتعيين هامش أكبر على الجانب الأيمن من الصفحة اليسرى والجانب الأيسر من الصفحة اليمنى:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

تحدد المواصفات القدرة على إدراج المحتوى في الهوامش التي تم إنشاؤها ، ومع ذلك ، لا يظهر أي متصفح يدعم هذه الميزة. أصف هذا في مقالتي حول إنشاء أوراق أنماط للاستخدام مع وكلاء مستخدم خاص بالطباعة ، Designing For Print With CSS.

تجزئة CSS

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

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

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

أقدم الخصائص من CSS2

بالإضافة إلى خصائص break-* من CSS Fragmentation Level 3 ، لدينا خصائص page-break-* التي جاءت من CSS2. من حيث المواصفات ، تم استبدالها بخصائص break-* الأحدث ، لأنها أكثر عمومية ويمكن استخدامها في السياقات المختلفة. لا يوجد فرق كبير بين الصفحة والفاصل متعدد المقاطع. ومع ذلك ، فيما يتعلق بدعم المتصفح ، هناك دعم أفضل للمتصفح للخصائص القديمة. هذا يعني أنك قد تحتاج إلى استخدام هؤلاء في الوقت الحالي للتحكم في الانكسار. المتصفحات التي تنفذ الخصائص الأحدث تستخدم الاسم المستعار للأقدم بدلاً من إسقاطها.

في الأمثلة التالية ، سأعرض كلا من الملكية الجديدة والقديمة حيثما وجدت.

break-before & break-after

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

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

تقبل الخصائص القديمة لفاصل page-break-before page-break-after نطاق أصغر من القيم.

• auto
• always
• avoid
• left
• right
• inherit

للتسبب دائمًا في فاصل صفحة قبل عنصر h2 ، يمكنك استخدام ما يلي:

 h2 { break-before: page; }

لتجنب فصل فقرة عن العنوان الذي يسبقها مباشرة:

 h2, h3 { break-after: avoid-page; }

تتسبب خاصية فاصل الصفحة page-break-* الأقدم دائمًا في حدوث فاصل صفحة قبل h2 :

 h2 { page-break-before: always; }

لتجنب فصل فقرة عن العنوان الذي يسبقها مباشرة:

 h2, h3{ page-break-after: avoid; }

على MDN ، ابحث عن معلومات وأمثلة على الاستخدام للخصائص:

• كسر من قبل
• كسر بعد
• فاصل صفحة من قبل
• فاصل صفحة بعد

break-inside

تتحكم هذه الخاصية في الفواصل داخل المربعات وتقبل القيم:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

كما هو الحال مع الخاصيتين السابقتين ، هناك page-break-inside من CSS2 ، والذي يقبل القيم:

• auto
• avoid
• inherit

على سبيل المثال ، ربما يكون لديك figure أو table ولا تريد أن ينتهي المطاف بنصفه على صفحة واحدة والنصف الآخر على صفحة أخرى.

 figure { break-inside: avoid; }

وعند استخدام العقار الأقدم:

 figure { page-break-inside: avoid; }

على MDN:

• اقتحام الداخل
• فاصل صفحة من الداخل

الأيتام والأرامل

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

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

 p { orphans: 2; widows: 2; }

خصائص widows orphans مدعومة جيدًا (تطبيق المتصفح المفقود هو Firefox).

على MDN:

• الأرامل
• أيتام

box-decoration-break

الخاصية النهائية المحددة في الوحدة النمطية Fragmentation هي box-decoration-break . تتعامل هذه الخاصية مع ما إذا كانت الحدود والهوامش والحشو تقطع المحتوى أو تلتف. القيم التي يقبلها هي:

• slice
• clone

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

إذا قمت باستخدام box-decoration-break: clone ، فسيتم استكمال الحد وأي حشوة وهامش في كل صفحة ، مما يمنح كل صفحة حدًا رماديًا.

حاليًا ، يعمل هذا فقط مع Paged Media في Firefox ، ويمكنك معرفة المزيد عن box-decoration-break على MDN.

دعم المتصفح

كما ذكرنا سابقًا ، دعم المستعرض غير مكتمل للوسائط المُقسمة إلى صفحات والتجزئة. عندما يتعلق الأمر بالتجزؤ ، هناك مشكلة إضافية وهي أنه يجب تحديد وتنفيذ كل طريقة تخطيط. إذا كنت تأمل في استخدام Flexbox أو CSS Grid في أوراق أنماط الطباعة ، فمن المحتمل أن تشعر بخيبة أمل. يمكنك التحقق من أخطاء Chrome لـ Flexbox و Grid.

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

اختبار أوراق أنماط الطباعة

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

ثعلب النار

افتح شريط أدوات المطور ثم اكتب media emulate print في الموجه.

كروم

افتح DevTools ، وانقر على أيقونة النقاط الثلاث ثم حدد "المزيد من الأدوات" و "العرض". يمكنك بعد ذلك تحديد طباعة ضمن Emulate CSS Media.

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

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

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

إذا كنت بحاجة إلى مستوى عالٍ من دعم الطباعة وترغب في استخدام CSS ، فستحتاج حاليًا إلى استخدام وكيل مستخدم خاص بالطباعة ، مثل Prince. أفصّل كيف يمكنك استخدام CSS لتنسيق الكتب عند الإخراج إلى Prince في مقالي "Designing For Print With CSS."

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

هناك مولدات HTML- و CSS-to-PDF مفتوحة المصدر مثل wkhtmltopdf ، ولكن معظمها يستخدم محركات عرض المتصفح لإنشاء إخراج الطباعة ، وبالتالي فإن لها نفس قيود المتصفحات عندما يتعلق الأمر بتنفيذ مواصفات الوسائط المُقسمة إلى صفحات والتجزئة. الاستثناء هو WeasyPrint الذي يبدو أن له تطبيقه الخاص ويدعم ميزات مختلفة قليلاً ، على الرغم من أنه ليس بأي حال من الأحوال كامل الميزات مثل شيء مثل Prince.

ستجد المزيد من المعلومات حول وكلاء المستخدم للطباعة على موقع print-css.rocks.

مصادر أخرى

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

• "لقد نسيت تمامًا أوراق أنماط الطباعة" ، مانويل ماتوزوفيتش ، UX Collective
• "نهج ورقة أنماط الطباعة: القائمة السوداء مقابل القائمة البيضاء" ، كريس كويير ، CSS-Tricks
• "ورقة أنماط الطباعة المثالية" ، أندرياس هيشت ، نوب
• "كيفية إعداد ورقة أنماط طباعة" ، كريستيان كرامر ، مجلة Smashing
• "5 نصائح وحيل قوية لطباعة الأوراق" ، مجلة دودلي ستوري ، سماشينج