آموزش CSS - چاپ

چاپ یک جنبه مهم از هر برنامه یا صفحه وب است. چاپ محتوا می‌تواند بسیار متفاوت از نمای رابط کاربری آن باشد. زمانی که کاربر در حال چاپ محتوا است، ممکن است او بخواهد:

از تصاویر با وضوح بالاتر برای نتایج روشن‌تر و بهتر استفاده کند.
طرح بندی برنامه یا وب سایت را براساس اندازه و شکل صفحه تنظیم کند.
ظاهر کلی برنامه یا وب سایت را در چاپ بهبود بخشد.
استایل‌های اضافی که فقط برای چاپ اعمال می‌شوند فراهم کند.

چاپ CSS - استفاده از یک برگه استایل چاپ

می‌توانید یک فایل استایل برای نیازهای چاپ داشته باشید و آن را به کد خود متصل کنید. بلوک کد زیر را به html خود اضافه کنید:


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

چاپ CSS - استفاده از پرس و جوی رسانه و قانون صفحه (page@)

CSS امکان استفاده از قانون media @ را فراهم می‌کند که می‌تواند برای تنظیم نیازهای استایل مختلف برای صفحه وب شما هنگام چاپ یا نمایش در صفحه، با استفاده از گزینه‌های print و screen، به ترتیب، استفاده شود.

می‌توانید بلوک کد زیر را در انتهای فایل استایل خود اضافه کنید. این یک مثال است.


@media print {
   /* All print related styles to be added here */
   #header-part,
   #footer-part,
   #nav-part {
      display: none !important;
   }
}

در هنگام چاپ قطعه کد فوق استایل‌های header-part، #footer-part#و nav-part# را چاپ نخواهد کرد.

جنبه‌های مختلف صفحات مانند جهت، ابعاد، حاشیه و غیره با استفاده از قانون page@ قابل تنظیم و اصلاح هستند. با استفاده از این قانون، همه صفحات یا زیر مجموعه‌هایی از صفحات می‌توانند هنگام چاپ هدف قرار گیرند.

چاپ CSS - شناسایی درخواست‌های چاپ

رویدادهای beforeprint و afterprint توسط مرورگرها ارسال می‌شوند تا محتوا بتواند تشخیص دهد که چاپ ممکن است رخ داده باشد. این ویژگی می‌تواند برای تنظیم طرح چاپ و رابط کاربری در طول فرآیند چاپ استفاده شود.

چاپ CSS - استفاده از قانون صفحه (page@)

در مثال زیر، محتوای صفحه وب به بخش‌های مختلف تقسیم شده است که هنگام باز کردن به صورت چاپ، به صفحات مختلف تقسیم می‌شود و حاشیه صفحات نیز در قالب چاپ تنظیم می‌شود.


<html>
<head>
<style> 
   @page {
      size: landscape;
      margin: 15%;
   }

   section {
      page-break-after: always;
      break-after: page;
      background-color: aquamarine;
      width: 500px;
   }

   @media print {
   button {
      display: none;
   }
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

چاپ CSS - استفاده از پرس و جوی رسانه (media@)

مثال زیر نحوه استفاده از پرس و جوی رسانه (media@) را نشان می‌دهد، جایی که یک فرمت یا استایل برای نمایش صفحه تعیین می‌شود و همان محتوا برای فرمت چاپ تغییر می‌کند. با کلیک روی دکمه چاپ، طرح و استایل صفحه تغییر می‌کند.


<html>
<head>
<style>
      @media screen {
         h2 {
            font-size: large;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: blue;
            font-style: normal;
         }
      }

      @media print {
         h2 {
            font-family: cursive;
            font-style: italic;
            color: red;
         }
      
      }

      @media print {
         button {display: none;}
            }

</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

چاپ CSS - استفاده از رویداد afterprint

مثال زیر نحوه استفاده از رویداد afterprint و همچنین پس از چاپ، صفحه به طور خودکار بسته می‌شود و به آخرین صفحه باز می‌گردد.


<html>
<head>
<style>
   @media screen {
      h2 {
         font-size: large;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         color: blue;
         font-style: normal;
      }
   }

   @media print {
      h2 {
         font-family: cursive;
         font-style: italic;
         color: red;
      }
   }

   @media print {
      button {display: none;}
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });

      window.addEventListener("afterprint", () => self.close);
   </script>
</body>
</html>

چاپ CSS - پیوند به یک فایل استایل خارجی

استایل‌های چاپ می‌توانند در یک فایل اضافه شوند و همان فایل CSS می‌تواند به کد html شما به عنوان یک استایل‌شیت خارجی پیوند شود. به عنوان مثال:


<html>
<head>
   <link href="print.css" media="print"  rel="stylesheet" />
<style>
   @media screen {
         h2 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-style: normal;
            color: rebeccapurple;
         }
      
      }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });


   </script>
</body>
</html>

رسانه شنیداری - درس قبلی

درس بعدی - چیدمان و طرح بندی ها