Media Paged در CSS به همراه مثال عملی

Media Paged یک ویژگی جالب در CSS است که به شما امکان می‌دهد تا نحوه نمایش محتوای وب در هنگام چاپ را کنترل کنید. این ویژگی می‌تواند جنبه‌های مختلفی از رسانه‌های صفحه‌بندی‌شده را مدیریت کند، مثلاً تعیین مکان قرارگیری عناصر، نحوه شکست صفحات و کنترل شیوه‌ای که صفحات جدید شروع می‌شوند. این ویژگی بیشتر زمانی کاربرد دارد که بخواهید خروجی چاپی حرفه‌ای‌تری ارائه دهید.

فرض کنید می‌خواهید یک گزارش، یک رمان یا یک مجله آنلاین را چاپ کنید و نیاز دارید تا عناصر متن و تصاویر به بهترین شکل ممکن در صفحات قرار بگیرند. در این مواقع، Media Paged می‌تواند کمک بزرگی باشد. با استفاده از این ویژگی، شما می‌توانید تعیین کنید که در امتداد هر صفحه چه مقدار فضا از بالا، پایین، چپ و راست باقی بماند و حتی تعیین کنید که عناصر خاصی چگونه در صفحات جدید آغاز شوند یا شکست بخورند.

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

استفاده از این ویژگی‌ها در پروژه‌ها زمانی ارزشمند است که بخواهید تجربه‌ی کاربری منحصربه‌فردی را ارائه دهید. فرض کنید در حال طراحی یک روزنامه آنلاین هستید و نیاز به کنترل آن دارید که چگونه مقالات در زمان چاپ در صفحات مختلف قرار بگیرند. با تنظیم صحیح Media Paged، می‌توانید این کار را به سادگی انجام دهید.

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

نمونه کد Media Paged در CSS

@page {
  size: A4;
  margin: 20mm;
}

body {
  width: 100%;
}

h1, h2, h3 {
  page-break-before: always;
}
    

توضیح خط به خط کد

@page : این دستور به شما اجازه می‌دهد تا به مجوعهٔ کلی صفحات در زمان چاپ دسترسی پیدا کنید و تنظیمات خود را اعمال کنید.
size: A4; : این خصوصیت تعیین می‌کند که اندازه صفحه باید به صورت A4 باشد.
margin: 20mm; : حاشیه‌های صفحه را به مقدار 20 میلی‌متر تنظیم می‌کند.
body { width: 100%; } : تعیین می‌کند که پهنای بدن سند باید تمام عرض صفحه را پوشش دهد.
h1, h2, h3 { page-break-before: always; } : بیان می‌کند که قبل از این عناصر همیشه باید یک شکست صفحه باشد تا محتوا در صفحه جدید شروع شود.