CSS يتيح التحكم في مظهر الصفحة عند الطباعة عبر `@media print`.
**استخدامات شائعة:** - إخفاء عناصر غير ضرورية (navigation, ads, sidebars) - تغيير الألوان لتوفير الحبر - ضمان عدم انقسام المحتوى المهم عبر صفحتين
**خصائص تفريق الصفحات:**
**page-break-before / page-break-after:** - `always` — دائماً اكسر هنا - `avoid` — تجنّب الكسر - `left` / `right` — اكسر لتكون على صفحة يسار/يمين
**break-inside: avoid:** يمنع تقسيم عنصر عبر صفحتين (مهم للجداول والبطاقات).
**الخصائص الحديثة (CSS Fragmentation):** `break-before / break-after / break-inside` تعمل أيضاً في Multi-column.
**orphans / widows:** يتحكمان في الحد الأدنى من الأسطر التي يجب أن تبقى في بداية/نهاية الصفحة.
| 1 | @media print { |
| 2 | /* إخفاء عناصر لا تُطبع */ |
| 3 | nav, .sidebar, .ads, .btn { display: none !important; } |
| 4 | |
| 5 | /* ضمان قراءة الروابط */ |
| 6 | a::after { content: " (" attr(href) ")"; } |
| 7 | |
| 8 | /* منع كسر البطاقات */ |
| 9 | .card { break-inside: avoid; } |
| 10 | |
| 11 | /* كل قسم في صفحة جديدة */ |
| 12 | .chapter { break-before: page; } |
| 13 | } |
مثال 1: ورقة CSS للطباعة
| 1 | @media print { |
| 2 | /* إعادة ضبط عامة */ |
| 3 | * { color: black !important; background: white !important; } |
| 4 | |
| 5 | /* إخفاء ما لا يُطبع */ |
| 6 | header, footer, nav, aside, |
| 7 | .no-print, [data-no-print] { display: none !important; } |
| 8 | |
| 9 | /* تخطيط للطباعة */ |
| 10 | body { font-size: 12pt; line-height: 1.5; } |
| 11 | h1 { font-size: 18pt; } |
| 12 | h2 { font-size: 15pt; } |
| 13 | p { font-size: 11pt; orphans: 3; widows: 3; } |
| 14 | |
| 15 | /* روابط مرئية */ |
| 16 | a[href]::after { content: " [" attr(href) "]"; font-size: 9pt; } |
| 17 | a[href^="#"]::after { content: ""; } /* روابط داخلية */ |
| 18 | |
| 19 | /* منع كسر الجداول والبطاقات */ |
| 20 | table { break-inside: avoid; } |
| 21 | thead { display: table-header-group; } /* تكرار رأس الجدول */ |
| 22 | tr { break-inside: avoid; } |
| 23 | |
| 24 | /* فواصل صفحات */ |
| 25 | .section { break-before: page; } |
| 26 | } |