CSS / Print stylesheet

Print stylesheet

Вэб хуудсыг хэвлэхэд ямар харагдах нь чухал. Navigation, sidebar, banner зэрэг зүйлс хэвлэхэд хэрэгтэй биш. Зөв print stylesheet бичихэд хуудас цэвэрхэн, цаасанд тохирсон харагдана.

@media print

Print stylesheet нь @media print дотор бичигддэг. Зөвхөн хэвлэхэд хамаарна:

css
/* Ердийн дэлгэцэнд харагдах */
.navbar {
  background: #0f172a;
  color: #f1f5f9;
}

/* Хэвлэхэд эдгээр дүрэм хэрэгжинэ */
@media print {
  .navbar {
    display: none; /* хэвлэхэд navigation харагдахгүй */
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }
}

Эсвэл тусдаа CSS файлаар оруулж болно:

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

Хэвлэхэд нуух элементүүд

Navigation, sidebar, footer, button, advertise зэрэг зүйлийг нуух нь хамгийн түгээмэл хэрэгцээ:

css
@media print {
  /* Хэрэггүй хэсгүүдийг нуух */
  header,
  nav,
  footer,
  aside,
  .sidebar,
  .navbar,
  .btn,
  .ad-banner,
  .cookie-notice,
  .social-share,
  video,
  audio {
    display: none !important;
  }

  /* Зөвхөн үндсэн агуулгыг харуулах */
  main,
  .article-content,
  .print-content {
    display: block;
    width: 100%;
  }
}

Хэвлэхэд харагдуулах элемент

Зарим зүйл дэлгэцэнд нуугдаад, зөвхөн хэвлэхэд харагдах хэрэгтэй байдаг:

css
/* Дэлгэцэнд нуугдсан */
.print-only {
  display: none;
}

/* Хэвлэхэд харагдана */
@media print {
  .print-only {
    display: block;
  }

  .screen-only {
    display: none;
  }
}
html
<!-- Хэвлэх хуудасны толгой хэсэг — дэлгэцэнд харагдахгүй -->
<div class="print-only">
  <h2>Монгол Хэлний Хичээл — www.ulaanbaatar.app</h2>
  <p>Хэвлэсэн огноо: 2024.01.15</p>
</div>

Холбоосын URL харуулах

Дэлгэцэнд холбоос дарж шилжих боломжтой ч хэвлэсэн цаасан дээр URL-г харуулах хэрэгтэй:

css
@media print {
  /* Холбоосын URL-г хаалтанд харуулах */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  /* Дотоод холбоос, # холбоосуудад харуулахгүй */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

page-break — хуудас таслах

Урт агуулгыг хэвлэхэд хаана хуудас таслах нь чухал:

css
@media print {
  /* Энэ элементийн ӨМНӨ шинэ хуудас эхлэх */
  h1,
  h2,
  .chapter {
    page-break-before: always;
  }

  /* Энэ элементийн ДАРАА шинэ хуудас эхлэх */
  .section-end {
    page-break-after: always;
  }

  /* Энэ элементийн ДОТОР хуудас таслахгүй */
  .card,
  .table-row,
  blockquote,
  pre {
    page-break-inside: avoid;
  }

  /* Гарчгийг доорх агуулгаасаа тасдахгүй */
  h2,
  h3,
  h4 {
    page-break-after: avoid;
  }
}

Орчин үеийн CSS-д break-before, break-after, break-inside ашиглах нь зөв:

css
@media print {
  .chapter {
    break-before: page;
  }
  .card {
    break-inside: avoid;
  }
  h2 {
    break-after: avoid;
  }
}

Хэвлэлийн хуудасны тохиргоо

css
@media print {
  /* Хуудасны хэмжээ, чиглэл тохируулах */
  @page {
    size: A4 portrait; /* A4, letter, legal / portrait, landscape */
    margin: 2cm 1.5cm; /* дээд/доод 2cm, зүүн/баруун 1.5cm */
  }

  /* Эхний хуудасны тусгай margin */
  @page :first {
    margin-top: 4cm;
  }

  /* Зүүн хуудас (жигд дугаар) */
  @page :left {
    margin-left: 3cm;
  }

  /* Баруун хуудас (сондгой дугаар) */
  @page :right {
    margin-right: 3cm;
  }
}

Хэвлэлийн өнгө тохируулах

Браузер өнгийг хэвлэхгүй байж болно. Тусгайлан зааж өгөх хэрэгтэй:

css
@media print {
  body {
    background: white !important;
    color: black !important;
    -webkit-print-color-adjust: exact; /* Chrome/Safari */
    print-color-adjust: exact; /* стандарт */
  }

  /* Фонын өнгийг хадгалах */
  .highlight {
    background-color: #fef3c7 !important;
    print-color-adjust: exact;
  }

  /* Хар дэвсгэр дээрх цагаан текстийг хэвлэхэд буцааж өгөх */
  .dark-section {
    background: white !important;
    color: black !important;
  }
}

Бүрэн print stylesheet жишээ

css
@media print {
  /* 1. Хуудасны тохиргоо */
  @page {
    size: A4;
    margin: 2cm;
  }

  /* 2. Үндсэн тохиргоо */
  body {
    font-family: Georgia, serif;
    font-size: 12pt;
    line-height: 1.6;
    color: black;
    background: white;
  }

  /* 3. Нуух */
  nav,
  header,
  footer,
  aside,
  .sidebar,
  .btn,
  .ad,
  video {
    display: none !important;
  }

  /* 4. Агуулга */
  main {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /* 5. Гарчиг */
  h1 {
    font-size: 24pt;
    break-before: page;
  }
  h2 {
    font-size: 18pt;
    break-after: avoid;
  }
  h3 {
    font-size: 14pt;
    break-after: avoid;
  }

  /* 6. Хуудас таслахаас хамгаалах */
  img,
  table,
  pre,
  blockquote {
    break-inside: avoid;
  }

  /* 7. Холбоос */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }

  a[href^="#"]::after {
    content: "";
  }

  /* 8. Зураг */
  img {
    max-width: 100% !important;
  }

  /* 9. Хүснэгт */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1pt solid #999;
    padding: 4pt 8pt;
  }
}

Дараагийн хичээлд:

CSS шилдэг туршлагуудыг нэгтгэн үзнэ — цэвэр, удирдахад хялбар CSS бичих зарчмууд.

← Өмнөх хичээлCSS гүйцэтгэлийн оновчлолДараах хичээл →CSS шилдэг туршлага