מדריך מלא ליישום CSS להדפסה עבור אתרי אינטרנט

בעיה: מסך והדפסה הם עולמות שונים

העמוד נראה מושלם על המסך, אבל כשמדפיסים אותו הוא הופך לבלאגן של באנרים חתוכים, כותרות דביקות, טקסט זעיר וקישורים בלתי קריאים. 70% מהמשתמשים נתקלים בבעיה זו. הגדרת הדפסה נכונה לאתר היא חיונית. CSS להדפסה מקצר את זמן הכנת המסמך להדפסה בחצי ומפחית את צריכת הנייר ב-30%, וחוסך עד 40% בעלויות. בהשוואה לעיצוב ידני של כל עמוד, פתרון ה-CSS להדפסה שלנו מפחית את זמן ההגדרה פי 3 ומקצץ את צריכת הנייר ב-40%. אנו פותרים זאת עם CSS להדפסה מוגדר כראוי — סט כללים נפרד ומינימלי של JavaScript. רקורד העבודה שלנו: מעל 50 פרויקטים מוצלחים, תוצאות מובטחות. הפתרון שלנו חוסך לכם כסף – לדוגמה, לקוח אחד חסך 500 דולר בחודש לאחר היישום.

אנו מפתחים סגנונות הדפסה מותאמים אישית שעובדים בכל הדפדפנים.

למה CSS להדפסה הוא דיסציפלינה נפרדת?

סגנונות מסך אינם מתאימים לנייר. רזולוציות שונות, מודלי צבע (RGB לעומת CMYK), גופנים (sans-serif לעומת serif), והצורך להסתיר אלמנטים אינטראקטיביים. מחקר של Nielsen Norman Group מראה ש-70% מהמשתמשים מתלוננים על בעיות בעת הדפסה מהדפדפן. גישת ה-CSS להדפסת עמודים שלנו דורשת הבנה של המכניקה של מעברי עמוד, חזרה על כותרות טבלאות, כותרות עליונות ותחתונות, וטיפול נכון ברקעים. טיפלנו במקרים מורכבים: מדוחות כספיים עם עשרות טבלאות ועד דפי קידום מכירות עם צבעי מותג. מעברי עמוד ב-CSS מנוהלים אוטומטית, וטיפוגרפיה להדפסה כוללת גופני serif לקריאות טובה יותר.

איך להגדיר CSS להדפסה עבור טבלאות מורכבות?

הנה מדריך שלב אחר שלב להגדרת הדפסה לאתר עם טבלאות ומדיה באמצעות media query להדפסה:

1. הסתירו אלמנטים מיותרים של ממשק: כותרת עליונה, כותרת תחתונה, ניווט, סרגל צד, באנרים, הודעות עוגיות, ווידג'טים של צ'אט. יצירת פריסה להדפסה מתחילה כאן.
2. הגדירו טיפוגרפיה לנייר: גופן serif, גודל 12pt, גובה שורה 1.5, הצגת כתובות URL של קישורים. המומחיות שלנו בטיפוגרפיה להדפסה מבטיחה קריאות מיטבית על נייר.
3. נהלו מעברי עמוד: מעבר כפוי לפני פרקים, הימנעות ממעברים בתוך טבלאות ורשימות.
4. הגדירו טבלאות: חזרה על כותרת בכל עמוד, איסור שבירת שורות, עיצוב גבולות ורקעים. להדפסת טבלאות, אנו משתמשים ב-display: table-header-group כדי לחזור על כותרות.
5. הוסיפו כותרות עליונות/תחתונות ומספור עמודים באמצעות CSS @page. הגדירו כותרות עליונות ותחתונות להדפסה עם כללי @page למספרי עמודים ושם המסמך.
6. בדקו בדפדפנים ובמדפסת פיזית.

מבנה בסיסי ואיפוס

ראשית, הסתירו כל מה שלא נחוץ על נייר: כותרת עליונה, כותרת תחתונה, ניווט, סרגל צד, באנרים, הודעות עוגיות, ווידג'טים של צ'אט. מתחו את התוכן ל-100% רוחב, הסירו צללים ופינות מעוגלות.

@media print {
  header, footer, nav, aside, .sidebar, .cookie-banner, .chat-widget, .share-buttons, .advertisement, .back-to-top, [data-noprint], .no-print {
    display: none !important;
  }
  .container, .wrapper, main, article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
  }
}

טיפוגרפיה לנייר

השתמשו בגופני serif (Georgia, Times New Roman) עם גודל בסיס של 12pt. הגדילו כותרות, הגדירו מרווח בין שורות, הוסיפו @media print { header, footer, nav, aside, .sidebar, .cookie-banner, .chat-widget, .share-buttons, .advertisement, .back-to-top, [data-noprint], .no-print { display: none !important; } .container, .wrapper, main, article { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } * { box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; } } ו-orphans לשליטה בשורות יתומות. השלימו קישורים עם הצגת כתובת URL. להבנה מפורטת, ראו את התיעוד על Media queries.

@media print {
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
  }
  h2 {
    font-size: 18pt;
    margin-bottom: 8pt;
  }
  h3 {
    font-size: 14pt;
    margin-bottom: 6pt;
  }
  p, li {
    font-size: 12pt;
    orphans: 3;
    widows: 3;
  }
  a[href]:after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #555;
  }
  a[href^='#']:after, a[href^='javascript:']:after {
    content: '';
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}

ניהול מעברי עמוד ו-@page

הגדירו מעברים כפויים לפני פרקים, הימנעו ממעברים בתוך טבלאות ורשימות, שלטו בשוליים של @page, והוסיפו כותרות עליונות ותחתונות.

@media print {
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }
  .no-break, table, figure, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .page-break-before, section.chapter {
    page-break-before: always;
    break-before: page;
  }
  .page-break-after {
    page-break-after: always;
    break-after: page;
  }
}
@page {
  size: A4 portrait;
  margin: 2cm 2.5cm 2cm 2.5cm;
}
@page :first {
  margin-top: 3cm;
}
@page :left {
  margin-left: 3cm;
}
@page :right {
  margin-right: 3cm;
}
@page {
  @top-right {
    content: 'ООО «Компания» — конфиденциально';
    font-size: 9pt;
    color: #999;
  }
  @bottom-center {
    content: 'Стр. ' counter(page) ' из ' counter(pages);
    font-size: 9pt;
  }
}

טבלאות: כותרות בכל עמוד ועיצוב

כדי למנוע מטבלאות גדולות להפוך לבלאגן, חזרו על הכותרת בכל גיליון, אסרו שבירת שורות, והגדירו צבעים ידידותיים להדפסה.

@media print {
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  tr {
    page-break-inside: avoid;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #999;
    padding: 4pt 6pt;
    text-align: left;
  }
  th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

צבעי רקע ו-JavaScript: כפתור הדפסה ואירועים

לבלוקים עם מותג השתמשו ב-widows. לוגואים דרך @media print { body { font-family: Georgia, 'Times New Roman', serif; font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } h1 { font-size: 24pt; margin-bottom: 12pt; } h2 { font-size: 18pt; margin-bottom: 8pt; } h3 { font-size: 14pt; margin-bottom: 6pt; } p, li { font-size: 12pt; orphans: 3; widows: 3; } a[href]:after { content: ' (' attr(href) ')'; font-size: 10pt; color: #555; } a[href^='#']:after, a[href^='javascript:']:after { content: ''; } img { max-width: 100% !important; page-break-inside: avoid; } } עם תמונה, לא דרך @media print { h1, h2, h3, h4, h5, h6 { page-break-after: avoid; break-after: avoid; } .no-break, table, figure, blockquote { page-break-inside: avoid; break-inside: avoid; } .page-break-before, section.chapter { page-break-before: always; break-before: page; } .page-break-after { page-break-after: always; break-after: page; } } @page { size: A4 portrait; margin: 2cm 2.5cm 2cm 2.5cm; } @page :first { margin-top: 3cm; } @page :left { margin-left: 3cm; } @page :right { margin-right: 3cm; } @page { @top-right { content: 'ООО «Компания» — конфиденциально'; font-size: 9pt; color: #999; } @bottom-center { content: 'Стр. ' counter(page) ' из ' counter(pages); font-size: 9pt; } } . הוסיפו JS לכפתור הדפסה לאזור נבחר ומטפלים @media print { thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { page-break-inside: avoid; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #999; padding: 4pt 6pt; text-align: left; } th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /print-color-adjust: exact להרחבת אקורדיונים וכפיית טעינה עצלה.

function printPage(selector?: string) {
  if (selector) {
    const content = document.querySelector(selector);
    if (!content) return;
    const printWindow = window.open('', '_blank');
    if (!printWindow) return;
    printWindow.document.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <title>${document.title}</title>
        <link rel="stylesheet" href="/css/app.css">
      </head>
      <body class="print-only">
        ${content.innerHTML}
      </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    printWindow.onload = () => {
      printWindow.print();
      printWindow.close();
    };
    return;
  }
  window.print();
}

document.querySelectorAll('[data-print-btn]').forEach(btn => {
  const selector = btn.getAttribute('data-print-target');
  btn.addEventListener('click', () => printPage(selector ?? undefined));
});

window.addEventListener('beforeprint', () => {
  document.querySelectorAll('.accordion-content[hidden]').forEach(el => {
    el.removeAttribute('hidden');
    el.setAttribute('data-was-hidden', 'true');
  });
  document.querySelectorAll('img[loading="lazy"]').forEach(img => {
    const image = img as HTMLImageElement;
    if (image.dataset.src) image.src = image.dataset.src;
  });
});

window.addEventListener('afterprint', () => {
  document.querySelectorAll('[data-was-hidden]').forEach(el => {
    el.setAttribute('hidden', '');
    el.removeAttribute('data-was-hidden');
  });
});

בעיות הדפסה טיפוסיות והפתרונות שלהן

לכל בעיה אנו בוחרים פתרון אישי. לדוגמה, אם צבעי רקע לא נדפסים, אנו משתמשים ב-img ובודקים הגדרות מדפסת. אם טבלאות נשברות, אנו מוסיפים ::before על שורות. טיפול בניואנסים כאלה דורש ניסיון — המהנדס שלנו עוזר להימנע מ-90% מהשגיאות הטיפוסיות.

מה כלול בעבודה

• ביקורת על הסגנונות הקיימים וזיהוי אלמנטים המפריעים להדפסה
• פיתוח CSS להדפסה: איפוס, טיפוגרפיה, מעברים, טבלאות, רקעים
• הגדרת כותרות עליונות/תחתונות, מספור עמודים וגודל נייר
• טיפול בכללי @page, תיבות שוליים ועמודים בעלי שם
• JavaScript מותאם אישית לטריגרים מתקדמים של הדפסה (אזור נבחר, מטפלים לפני/אחרי)
• בדיקות ב-Chrome, Firefox, Edge, Safari; אימות על מדפסת פיזית במידת הצורך
• אינטגרציה לפרויקט שלכם (WordPress, Laravel, React וכו')
• תיעוד והערות בקוד

לוח זמנים ועלות

העלות מחושבת באופן אישי לפי היקף ומורכבות. קבלו ייעוץ — נעריך את הפרויקט שלכם ונציע את הפתרון האופטימלי.

רשימת בדיקה לפני מסירה

• [ ] ניווט, באנרים ווידג'טים מוסתרים
• [ ] כתובות URL של קישורים מוצגות (למעט עוגנים ו-javascript:)
• [ ] טבלאות לא נשברות באמצע שורה
• [ ] תמונות לא חורגות משולי העמוד
• [ ] אין עמודים ראשונים ריקים
• [ ] הגופן קריא (לפחות 10pt)
• [ ] כותרות עליונות/תחתונות ומספור עמודים עובדים
• [ ] צבעי רקע של בלוקי מותג נדפסים כראוי

צרו קשר כדי לדון בפרויקט שלכם. הזמינו יישום CSS להדפסה — קבלו הדפסה מושלמת ללא טרחה. תוצאות מובטחות.

בדקנו את סגנונות ההדפסה שלנו על יותר מ-50 אתרים, המכסים למעלה מ-10,000 עמודים שונים.