מעברי עמוד בהדפסה

לפעמים, במקרים מסויימים, יש לגולשים צורך להדפיס דפים מהאתר שלנו, תכונות ההדפסה בcss מאפשרות להגדיר מעברי עמוד מוגדרים, במקומות הרצויים.
ישנם בוני אתרים שרוצים שהדפדפן ידפיס אוטומטית את הדף הנוכחי אצל הגולש, אבל זה לא אפשרי בגלל כמה סיבות:
האם הגולש בכלל מסכים להדפיס את הדף? האם המדפסת של הגולש דלוקה? וכ'ו..

את השיטה print של אובייקט window אנחנו מכירים:

1	<span onClick="print()" style="cursor:hand">הדפס</span>

(אפשר להשתמש בשיטה זו גם בלי window)
תוצאה: הדפס

בשנת 98 פותחה שיטת הדפסה חדשה באמצעות css.
השיטה נתמכת ע"י IE (אינטרנט אקספלורר) בגרסאות 4 ומעלה, ולא נתמכת בנטסקייפ.

תחביר

תחביר השיטה הוא כזה:

1 2 3

<style type="text/css"> Element { page–break–type:value } </style>

* Element – אלמנט הhtml עליו מגדירים את תכונת ההדפסה.
* אחת משתי תכונות ההדפסה שמפורטות למטה.
* הערך שנותנים לתכונה מתוך ארבעה ערכים, שמפורטים למטה.

תכונות

קיימות שתי תכונות בלבד לשיטת ההדפסה.

תיאור	תכונה
מגדיר את מעבר העמוד לפני האלמנט שמשתמש בתכונה זו.	page-break-before
מגדיר את מעבר העמוד אחרי האלמנט שמשתמש בתכונה זו.	page-break-after

כל אחת מהתכונות הנ"ל יכולה לקבל כל אחד מהמאפיינים של השיטה.

1 2 3

<style type="text/css"> Element { page–break–before:value } </style>

1 2 3

<style type="text/css"> Element { page–break–after:value } </style>

מאפיינים (ערכים לתכונות)

תיאור	מאפיין
מגדיר את מעבר העמוד באופן קבוע אחרי אלמנט ההדפסה.	always
העמוד הנוכחי יעבור לעמוד הבא בדיוק איפה שהסתיים בהדפסה (ברירת המחדל).	auto
מגדיר הדפסה בצד שמאל של הדף.	left
מגדיר הדפסה בצד ימין של הדף.	right

המאפיינים left וright עדיין לא נתמכים בשום דפדפן.

דוגמה

פה אני אתן דוגמה קצרה לשימוש בשיטה.

1 2 3

<style type="text/css"> big, h4 { page–break–before:always } </style>

הדוגמה הזאת בעצם עושה מעבר עמוד לפני כל כותרת h5 או טקסט עם תג big.
זה בעצם גורם לכך שלפני כל כותרת נקבל עמוד חדש (ז"א כותרת אחת בעמוד).
אם תדפיסו מאמר זה, תקבלו בכל עמוד כותרת ותוכן שכתבו לה, שימושי, נכון?

מעבר עמוד מותאם אישית (שימוש בclass)

לעיתים, אנחנו רוצים לקבוע מעבר עמוד איפה שאנחנו רוצים ולא לפי אלמנטי html.
במקרים כאלה הפתרון הוא פשוט – שימוש בclass.

1 2 3

<style type="text/css"> div.page_brake_here { page–break–before:always } </style>

1 2 3

<div class="page_brake_here"> תוכן.. </div>

ככה, לפני כל div בעמוד שיש לו class שהוא page_brake_here, יהיה מעבר עמוד.

ניתן להשתמש בשיטה גם כאשר מריצים לולאות בשפות סקריפט ושפות צד שרת.


בהצלחה!