CSS Print Styles — ทำ @media print ให้ดูดีจริง

โครงสร้างพื้นฐาน

@media print {
  /* ซ่อนสิ่งที่ไม่จำเป็น */
  nav, footer, .sidebar, .ads, .no-print {
    display: none !important;
  }

  /* ขยาย content เต็มหน้า */
  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* ลิงก์ให้เห็น URL */
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }

  /* ซ่อน URL ของลิงก์ภายใน */
  a[href^="/"]::after,
  a[href^="#"]::after {
    content: '';
  }
}

ควบคุม Page Break

@media print {
  /* ห้ามตัดหน้ากลาง element */
  .card, article, .section {
    break-inside: avoid;
  }

  /* ขึ้นหน้าใหม่ก่อน element */
  h1, h2, .page-break-before {
    break-before: page;
  }

  /* ขึ้นหน้าใหม่หลัง element */
  .chapter { break-after: page; }
}

ตั้งค่ากระดาษ

@page {
  size: A4;
  margin: 2cm 1.5cm;
}

/* หน้าแรก margin ต่างกัน */
@page :first {
  margin-top: 3cm;
}

Typography สำหรับ Print

@media print {
  body {
    font-size: 11pt;       /* pt ดีกว่า px สำหรับ print */
    line-height: 1.5;
    color: #000;           /* ตัวหนังสือดำเสมอ */
  }

  h1 { font-size: 18pt; }
  h2 { font-size: 14pt; }

  /* ตัดสีพื้นหลัง ให้กระดาษขาว */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

ทดสอบ Print Styles

• Chrome DevTools → More tools → Rendering → Emulate CSS media → Print
• หรือ Ctrl+Shift+P → “Show print preview”

CSS สำหรับ /cv

/* class สำหรับซ่อนขณะ print */
.no-print { display: none !important; } /* เฉพาะ @media print */

/* ปุ่ม print */
.print-btn {
  display: inline-flex; gap: 0.4rem;
  cursor: pointer;
}

@media print {
  .print-btn { display: none; }
}