سؤال

أنا أبحث عن أي اقتراح/قواعد/أدلة حول إنشاء ملف CSS للطباعة بشكل لائق عند طباعة صفحة ويب.هل لديك أي شيء لتقدمه؟

هل كانت مفيدة؟

المحلول

وهنا بعض أنماط الطباعة عامة لاستخدامها للحصول على مطبوعات أفضل:

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

ورأس واحد يمنع فواصل الصفحات داخل صف الجدول

ونمط THEAD يجعل أي الصفوف في العلامة THEAD تكرار لكل صفحة أن الجدول يمتد عبر.

وNoPrint هي فئة يمكنني استخدام لإظهار شيء على الشاشة، ولكن ليس في الطباعة.

و، أود أن إيقاف ربط الألوان.

نصائح أخرى

والشيء الوحيد الذي أتأكد من أن يضع في بلدي ورقة نمط الطباعة:

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

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

وأنا أيضا تعيين بلدي النص الأساسي ليكون قليلا أكثر قابلية للقراءة للطباعة:

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

وقراءة الأولى هذه المادة من قائمة بصرف النظر ( http://www.alistapart.com/articles/ goingtoprint / ). وهي تغطي الكثير من أساسيات كنت تبحث عن (وصلات الموسعة، التبييض، الخ).

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

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

من إيريك ماير على قائمة إربا.

والنقطة الرئيسية هي أن تبدأ من جديد، ووضع صراحة الحدود وmarging / الحشو إلى 0، خلفية بيضاء، و "عرض لا شيء" على أي عناصر غير الضرورية للطباعة (مثل القوائم معينة)

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

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

والذهاب من هناك.

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

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

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top