عرض مصدر CSS/@page

<noinclude>{{DISPLAYTITLE:القاعدة ‎<code>@page</code>}}</noinclude>
القاعدة ‎<code>@page</code> في CSS تُستعمَل لتعديل بعض خاصيات CSS عند طباعة المستخدم، أي لا يمكنك تغيير جميع خاصيات CSS مع هذه القاعدة، إذ تستطيع تغيير الهوامش <code>[[CSS/margin|margin]]</code> واليتامى <code>[[CSS/orphans|orphans]]</code> والأرامل <code>[[CSS/widows|widows]]</code>، وسيتم تجاهل محاولة تغيير خاصيات CSS الأخرى.<syntaxhighlight lang="css">
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
</syntaxhighlight>
== <nowiki/>دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|2.0
|19.0
|8.0
|6.0
|غير مدعومة
|}
بعض الخاصيات التي لا تُستعمَل إلا مع هذه القاعدة (مثل <code>size</code> و <code>marks</code> و <code>bleed</code>) لها دعمٌ محدودٌ في المتصفحات.

== البنية العامة ==

=== الخاصية <code>size</code> ===
تُحدِّد هذه الخاصية قياس واتجاه الصفحة المطبوعة، ويكون القياس متفقًا في أغلبية الحالات مع قياس الورقة المطبوعة إن كان ذلك ممكنًا.<syntaxhighlight lang="css">
/* كلمات محجوزة */
size: auto;
size: portrait;
size: landscape;

/* <length> */
/* 1 value: height = width */
size: 6in;

/* العرض ثم الطول */
size: 4in 6in; 

/* قياسات الأوراق */
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/* قياس الأوراق مع اتجاهها */
size: A4 portrait;
</syntaxhighlight>

==== <code>auto</code> ====
سيُحدِّد المتصفح قياس الورقة تلقائيًا، وستماثل أبعاد واتجاه الأوراق المتوافرة على الجهاز.

==== <code>landscape</code> ====
ستكون محتويات الصفحة بالعرض (landscape)، أي أنَّ البُعد الطويل للصندوق أفقي.

====  <code>portrait</code> ====
ستكون محتويات الصفحة بالطول (portrait)، أي أنَّ البُعد الطويل للصندوق رأسي.

====  <code>[[CSS/length|<length>]]</code> ====
قيمة طولية تُحدِّد عرض الصفحة وارتفاعها، أو قيمتان طوليتان تُحدِّدان عرض الصفحة وارتفاعها.

====  <code><page-size></code> ====
* <code>A5</code>: صفحة بأبعاد ISO المعيارية: 148mm × 210mm.
* <code>A4</code>: صفحة بأبعاد ISO المعيارية: 210mm × 297mm (أكثر قياس أوراق مستعمل في الطابعات الشخصية).
* <code>A3</code>: صفحة بأبعاد ISO المعيارية: 297mm × 420mm.
* <code>B5</code>: صفحة بأبعاد ISO المعيارية: 176mm × 250mm.
* <code>B2</code>: صفحة بأبعاد ISO المعيارية: 250mm × 353mm.
* <code>JIS-B5</code>: صفحة بأبعاد JIS المعيارية: 182mm × 257mm.
* <code>JIS-B4</code>: صفحة بأبعاد JIS المعيارية: 257mm × 364mm.
* <code>letter</code>: صفحة بأبعاد letter المستخدمة في أمريكا الشمالية: 8.5in × 11in.
* <code>legal</code>: صفحة بأبعاد legal المستخدمة في أمريكا الشمالية: 8.5in × 14in.
* <code>ledger</code>: صفحة بأبعاد ledger المستخدمة في أمريكا الشمالية: 11in × 17in.

=== الخاصية <code>marks</code> ===
إضافة علامات الاقتصاص (crop، التي تستخدم لمعرفة أين يجب قص الصفحة) أو التقاطع (cross، التي تُستخدَم لمحاذاة الأوراق) إلى المستند.<syntaxhighlight lang="css">
/* كلمات محجوزة */
marks: none;
marks: crop;
marks: cross;
marks: crop cross;
</syntaxhighlight>

====  <code>crop</code> ====
إظهار علامات الاقتصاص.

====  <code>cross</code> ====
إظهار علامات التقاطع.

====  <code>none</code> ====
عدم إظهار أيّ علامة.

==== البنية الرسمية ====
<syntaxhighlight lang="css">
mark: none | [ crop || cross ]
</syntaxhighlight>

=== الخاصية <code>bleed</code> ===
تُحدِّد المسافة بين علامات الاقتصاص وحافة الصفحة، وليس لها أي تأثير إذا لم نستعمل الخاصية <code>marks</code>.<syntaxhighlight lang="css">
/* كلمات محجوزة */
bleed: auto;

/* <length> */
bleed: 8pt;
bleed: 1cm;

</syntaxhighlight>

====  <code>auto</code> ====
هذه الكلمة المحجوزة ستساوي <code>6pt</code> إذا كانت  الخاصية <code>marks</code> تساوي <code>crop</code>، وإلا فستساوي الصفر.

==== <code>[[CSS/length|<length>]]</code> ====
تُحدِّد ما هو البعد بين حافة الصفحة وعلامات الاقتصاص.

==== البنية الرسمية ====
<syntaxhighlight lang="css">
bleed: auto | <length>
</syntaxhighlight>

=== البنية الرسمية ===
<syntaxhighlight lang="css">
@page <page-selector-list> {
  <page-body>
}
</syntaxhighlight>
== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/margin|margin]]</code> التي تضبط الهوامش في الأطراف الأربعة للعنصر.
* صفحة الخاصية <code>[[CSS/orphans|orphans]]</code> التي تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أسفل الصفحة أو العمود.
* صفحة الخاصية <code>[[CSS/widows|widows]]</code> التي تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أعلى الصفحة أو العمود.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-logical-props/#logical-page CSS Logical Properties Level 1].
* مسودة [https://drafts.csswg.org/css-page-3/#at-page-rule CSS Paged Media Module Level 3].
* مواصفة ‎[http://www.w3.org/TR/CSS2/page.html#page-selectors CSS Level 2 (Revision 1)]‎.
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS At-rule|{{SUBPAGENAME}}]]