Print style design

Basic Concepts of Print Style Design

Print style design refers to providing specialized style rules for web content when printed. While modern web pages are primarily optimized for screen display, printing scenarios still widely exist, such as printing orders, reports, articles, etc. CSS3 provides specialized @media print rules to control style presentation during printing.

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    background: none;
  }
  
  .no-print {
    display: none;
  }
}

Special Considerations for Print Styles

Print media differs significantly from screen display: fixed paper sizes, no support for animations, limited color representation, and unavoidable pagination. Special attention is required when designing print styles:

1. Unit usage: Recommended to use absolute units like pt (points) or cm (centimeters)
2. Color handling: Prioritize black-and-white or high-contrast color schemes
3. Background handling: Typically remove background colors and images
4. Link handling: Suggest displaying the actual URL of links

@media print {
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  
  .banner {
    display: none;
  }
}

Pagination Control Techniques

CSS3 provides specialized properties for controlling pagination to prevent inappropriate content splitting:

@media print {
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  table {
    page-break-inside: avoid;
  }
  
  .page-break {
    page-break-before: always;
  }
}

Common pagination properties:

• page-break-before: Page break before an element
• page-break-after: Page break after an element
• page-break-inside: Avoid internal page breaks within an element
• orphans: Minimum number of lines for a paragraph to remain at the bottom of a page
• widows: Minimum number of lines for a paragraph to move to the next page

Print-Specific Layout Adjustments

Print layouts typically require simplifying navigation, ads, and other non-essential content, focusing on core material:

@media print {
  nav, .ad-container, .sidebar {
    display: none;
  }
  
  main {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
}

For multi-column layouts, usually switch to single-column when printing:

@media print {
  .multi-column {
    column-count: 1 !important;
  }
}

Practical Tips for Print Optimization

1. Add print-specific headers and footers:

@page {
  margin: 2cm;
  
  @top-center {
    content: "Company Name";
    font-size: 10pt;
  }
  
  @bottom-right {
    content: "Page " counter(page);
    font-size: 9pt;
  }
}

2. Handle table presentation when printing:

@media print {
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
}

3. Control image and background printing:

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .watermark {
    opacity: 0.2;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }
}

Advanced Print Function Implementation

1. Generate table of contents and page numbers:

@media print {
  h1 {
    counter-reset: h2counter;
  }
  
  h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ". ";
  }
  
  .toc a::after {
    content: leader('.') target-counter(attr(href), page);
  }
}

2. Handle interactive elements when printing:

@media print {
  button, .dropdown, form input[type="submit"] {
    display: none;
  }
  
  input[type="text"], textarea {
    border: 1px solid #ccc;
    background: none;
  }
}

3. Print QR codes or barcodes:

<div class="print-barcode">
  <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
    <!-- Barcode SVG content -->
  </svg>
</div>

<style>
@media print {
  .print-barcode {
    display: block;
    margin: 10px 0;
  }
}
</style>

Browser Compatibility Handling

Different browsers have varying support for print styles, requiring special attention:

/* Firefox-specific print styles */
@-moz-document url-prefix() {
  @media print {
    body {
      font-size: 11pt;
    }
  }
}

/* Chrome print margin issues */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  
  @page {
    size: auto;
    margin: 20mm;
  }
}

Practical Application Case Analysis

E-commerce order print style example:

@media print {
  .order-print {
    font-family: "SimSun", serif;
    width: 210mm;
    margin: 0 auto;
  }
  
  .order-header {
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  
  .order-items {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .order-items th {
    background: #eee;
    text-align: left;
    padding: 5px;
  }
  
  .order-items td {
    padding: 5px;
    border-bottom: 1px dotted #ccc;
  }
  
  .order-total {
    text-align: right;
    font-weight: bold;
    margin-top: 20px;
  }
  
  .order-footer {
    margin-top: 50px;
    font-size: 0.9em;
  }
}

Print Style Debugging Methods

1. Use browser print preview functionality
2. Temporarily force print styles:

// Temporarily apply print styles in console
const style = document.createElement('style')
style.innerHTML = '@media print { ' + 
                   document.querySelector('[media="print"]').innerHTML + 
                   ' }'
document.head.appendChild(style)

3. Use PDF printer drivers to test actual output
4. Check print logs:

@media print {
  /* Add debugging information when printing */
  body::after {
    content: "Print time: " attr(data-print-time);
    display: block;
    font-size: 8pt;
    text-align: right;
    color: #999;
  }
}

Performance-Optimized Print Styles

1. Streamline print style sheets:

@media print {
  /* Only override necessary styles */
  * {
    float: none !important;
    text-shadow: none !important;
  }
  
  /* Avoid unnecessary repaints */
  .animated {
    animation: none !important;
    transition: none !important;
  }
}

2. Use print-specific fonts:

@font-face {
  font-family: 'PrintFont';
  src: local('Times New Roman');
}

@media print {
  body {
    font-family: 'PrintFont', serif;
  }
}

3. Optimize image print quality:

@media print {
  .high-res-image {
    -webkit-print-image-resolution: 300dpi;
    print-image-resolution: 300dpi;
  }
}