מעברי עמוד בהדפסה
לפעמים, במקרים מסויימים, יש לגולשים צורך להדפיס דפים מהאתר שלנו, תכונות ההדפסה בcss מאפשרות להגדיר מעברי עמוד מוגדרים, במקומות הרצויים.
ישנם בוני אתרים שרוצים שהדפדפן ידפיס אוטומטית את הדף הנוכחי אצל הגולש, אבל זה לא אפשרי בגלל כמה סיבות:
האם הגולש בכלל מסכים להדפיס את הדף? האם המדפסת של הגולש דלוקה? וכ'ו..
את השיטה print של אובייקט window אנחנו מכירים:
1 <span onClick="print()" style="cursor:hand">הדפס</span>
תוצאה: הדפס
בשנת 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, יהיה מעבר עמוד.
ניתן להשתמש בשיטה גם כאשר מריצים לולאות בשפות סקריפט ושפות צד שרת.בהצלחה!
תגובות בפייסבוק