cascading style sheets reference
הדפסה ו-CSS
CSS2 הציג בפנינו מנגנון לשליטה הדוקה יותר על הדפסת דפי אינטרנט שעוצבו בעזרת CSSים. בחלק זה, אנו נבדוק כיצד זה עובד.
קיימים שני אספקטים שיש לקחת בחשבון בהדפסה. העמוד והתוכן של העמוד.
עבור העמוד, אנו צריכים לקחת בחשבון באיזה גודל הוא, האם האוריינטציה שלו היא לאורך או לרוחב, אילו סימני הדפסה יידרשו לנו, ואילו שוליים יש לו. עבור התוכן אנו צריכים לדאוג היכן הדפים נחתכים, ומה נעשה עם שורות "אלמנות" ו"יתומות" (נסביר מונחים אלה בהמשך).
ב-CSS2 המאפיינים של העמוד מוגדרים ע"י ה- @page rule, כאשר מספר מאפיינים חדשים עוזרים לשלוט בחיתוך של הדפים..
ה- @page rule
בבמרכז ההדפסה ב-CSS2 קיים ה- @page rule. זה דומה ל- @media rule, שאותו ניתן ללמוד בחלק על המדיה Media.
ה-@page rule מגדיר תוכן להדפסה. באופן הכרחי, הוא מתאר את גליון הנייר שעליו נדפיס את דף האתר.
. @page rules עובד באופן מאוד דומה להצהרות הסטנדרטיות של CSSים, למרות שהם לוקחים מאפיינים ספציפיים לעמודים שאף הצהרה אחרת לא יכולה להשתמש בהם, וגם יכולים להיות להם שוליים המוגדרים בעזרת מאפייני השוליים המוכרים.
ניתן ליישם את המאפיינים של העמוד לכל עמוד, או באופן שונה לעמודים בצד שמאל וימין.כאשר מדפיסים עבור פרסומים כרוכים (בעלי כריכה), השוליים בצד שמאל וימין הם בדרך-כלל שונים, כדי לקחת בחשבון את מרכז הכריכה.
כדי להגדיר מאפיינים עבור כל עמוד, ל- @page rule יש את הצורה הבאה:
@page {/* properties declared here */}
כדי להגדיר את המאפיינים עבור דפים שמאליים, ל- @page rule יש את הצורה הבאה: @page:left {/* properties declared here */}
כדי להגדיר את המאפיינים עבור דפים ימניים, ל- @page rule יש את הצורה הבאה: @page:right {/* properties declared here */}
שמות הדפים
ניתן לתת שם ל- @page rule, כאשר יחד עם מאפיין העמוד שאנו נראה מתחת, מאפשר לאלמנטים ספציפיים להיות מודפסים על סוגים מסויימים של דפים (זאת אומרת, דפים המסודרים בצורה מסויימת). למשל, זה קל לסדר @page rule עבור הדפסת מספרים. בוא נניח שאנו רוצים להדפיס מספרים כלשהם בפורמט רוחב, אנו יכולים לסדר דף בעל שם בצורה הבאה:
@page figures {
size: landscape
}
השם של הדף הוא בפשטות ממוקם אחרי המילת מפתח של ה- @page ולפני המאפיינים של הכלל. בהמשך אנו נראה כיצד מאפיין הדף אומר לדפדפן באיזה @page rule להשתמש כדי להדפיס אלמנט כלשהוא.
מאפיינים ספציפיים לדף
יש שתי קבוצות מאפיינים הקשורים להדפסה:
- יש שתי קבוצות מאפיינים הקשורים להדפסה. אלה שמתייחסים ספציפית לדף המודפס עצמו, זאת אומרת, גודל, שוליים ומאפייני הסימנים. את אלה ניתן ליישם רק ל- @page rule.
- והמאפיינים שמתייחסים לכיצד מוצג התוכן בתוך דפים אלה. מאפיינים אלה הם page-break-before (חיתוך העמוד לפני ), page-break-after (חיתוך העמוד אחרי), ומאפייני "יתומים" ו"אלמנות". ניתן ליישם את אלה עבור כל האלמנטים.
מאפייני הדף
גודל
מה הם עושים?
מאפיין הגודל של @page rule מאפשר לתוכן ההדפסה של דף האתר להיות מיוסד. הגודל של הדף יכול להיות או מוחלט, שאת זה ניתן להגדיר ע"י רוחב ואורך (תבדקו בהמשך עבור יותר פרטים), או יחסי (מוגדר ע"י אחת ממילות המפתח auto, landscape ו-portrait).
ערכים אפשריים
ניתן להגדיר גודל או ע"י ערך מוחלט או ע"י ערך יחסי בשימוש במילות מפתח. כאשר מקצים ערך יחסי, הדפדפן יכול להתאים את הגודל של התוכן כדי להתאים לגודל הדף. כאשר מקצים ערך מוחלט, הדפדפן חייב להחליט כיצד למקם את התוכן שהוא קטן יותר מגודל הדף.
ערכים מוחלטים
כאשר באים להגדיר ערך מוחלט, מקצים את הגודל ע"י שימוש בערכים של אורך. הערכים של רוחב וגובה, בהתאמה, מופרדים פשוט ע"י מרווח. לדוגמא:
@page {size: 21.0cm 29.7cm} /* A4 page dimensions in cm */
מכיוון שלדף אין מושג לגבי פונטים, יחידות האורך אינן יכולות להיות יחידות em ו- ex.
מילות מפתח
מילות המפתח הבאות מוגדרות ע"י מפרט ה- CSS2
- auto קופסת הדף (page box) תכוון לגודל ולאוריינטציה של דף המטרה (זאת אומרת, כפי שהדף סודר).
- landscape מבטל את האוריינטציה של דף המטרה. קופסת העמוד היא באותו הגודל כשל המטרה, והכיוון הרגיל של הפריסה הולך במקביל לצד המטרה הארוך יותר.
- portrait מבטל את האוריינטציה של דף המטרה. קופסת הדף היא באותו הגודל כשל המטרה, והכיוון הרגיל של הפריסה הולך במקביל לצד הקצר יותר של המטרה.
ערכים של ברירת מחדל
ע"י ברירת מחדל, גודל העמוד הוא auto.
סימנים
מה הם עושים?
עבור הדפסה ברמה מקצועית, סימני חיתוך מראים היכן יש לחתוך את הדף. CSS2 מאפשר לסדר סימני חיתוך עבור הדף. סימני החיתוך מופיעים רק כאשר משתמשים בערכים מוחלטים עבור גודל. כאשר משתמשים בערך יחסי, סימני החיתוך מופיעים מחוץ לתוכן, ומכיוון שהגודל מסודר להתאים לדף המטרה, לא מופיעים סימני חיתוך על הדף המודפס.
ערכים אפשריים
סימנים מוגדרים ע"י אחת מתוך מספר מילות מפתח.
- crop סימני חיתוך מראים היכן יש לחתוך את הדף.
- cross סימני (x cross) ידועים גם כסימני הרשמה (registration) משמשים כדי ליישר דפים.
- none לא מבצעים שום סימנים מיוחדים.
ערכים של ברירת מחדל
סימני ברירת המחדל של הדף הם none.
שוליים, שוליים-שמאליים, שוליים-ימניים, שוליים-עליונים, שוליים-תחתונים.
מה זה עושה?
שוליים הם המאפיין הכללי היחידי מה-css שניתן ליישם אותו עבור הדפים.
מאפייני השוליים מגדירים את כל השוליים מהעליונים, תחתונים, ימיניים ושמאליים, בהתאמה.
ערכים אפשריים
אפשר להגדיר שוליים או כאחוז, כאורך או בשימוש במילת המפתח auto.
לשוליים יכולים להיות ערכים שליליים.
אחוזים
ערך שוליים באחוזים מסדר את השוליים המושפעים עפ"י האחוז של הרוחב או הגובה של העמוד. למשל: Margin-right: 20% מגדיר את הרוחב של השוליים הימניים ל-20% מרוחב העמוד. Margin-top: 20% מגדיר את גובה השוליים העליונים ל-20% מגובה העמוד.
ערכי אורך
אנחנו מכסיםערכי אורך בפירוט בחלק שלנו על ערכים. בעזרת ערכיי האורך אתם יכולים לקבוע את השוליים לערך מוחלט, או לערך יחסי לגודל של האלמנט עצמו. שימו לב שכיוון שלדף אין מושג לגבי הפונטים, לא ניתן להשתמש ביחידות em ו- ex כדי לקבוע את שוליי הדף.
ערכים של ברירת מחדל
אם לא מגדירים ערך עבור השוליים, השוליים בדף הם 0.
מאפייני חיתוך הדף
כאשר יש להדפיס תוכן עלינו לדאוג למה שיקרה עם חיתוך הדף. באופן רגיל, חלקים חדשים מתחילים בדפים חדשים. המחבר עלול לרצות חיתוך עמוד שיוכנס לפני טבלה או איור.
CSS2 מספק שני מאפיינים חדשים שמאפשרים שליטה על היכן נחתך העמוד כאשר הוא מודפס. מאפיינים אלה, page-break-before ו- page-break-after ניתן ליישם לכל אלמנט. ניתן להשתמש בהם כדי ליצור חיתוך דף לפני כותרות של רמה 1 או רק כותרות של קבוצה מסויימת (למשל: class="section").
בעיה נוספת, כאשר מדפיסים מסמכים עולה כאשר רק מספר שורות יכולות להיכנס בתחתית הדף (אל אלה מתייחסים כ"יתומים") או רק מספר שורות הנותרות להדפסה בראש הדף (אל אלה מתייחסים כ"אלמנות").CSS2 מספק שני מאפיינים להגדיר מה קורה עם שורות "אלמנות" ו"יתומות".
Page-break-before
מה זה עושה?
חיתוך-עמוד-לפני שולט בכיצד והאם בכלל הדף נחתך לפני אלמנט מסויים. ניתן להגדיר שהעמוד לא צריך להיחתך לפני אלמנט מסויים, או שהוא אכן צריך, ושהדף הבא צריך להיות דף שמאלי או ימני.
ערכים אפשריים
חיתוך-עמוד-לפני יכול לקחת ערך של מילת מפתח אחת מתוך מספר ערכים של מילות מפתח.
- auto לא כופה ולא אוסר על חיתוך העמוד לפני האלמנט.
- avoid מונע מחיתוך העמוד לפני האלמנט.
- left (להביא למצב של דפים שמאליים או ימניים) כופה חיתוך אחד או שניים של הדף לפני האלמנט כך שהדף הבא, מפורמט כדף שמאלי.
- right (להביא למצב של דפים שמאליים או ימניים) כופה חיתוך אחד או שניים של הדף לפני האלמנט כך שהדף הבא מפורמט כדף ימני.
ערכים של ברירת מחדל
אם לא מגדירים ערך, חיתוך הדף לפני מסודר כ-auto.
האם זה עובר בירושה?
אלמנט כלשהוא אינו יורש את המאפיין חיתוך-דף-לפני של האלמנט שמכיל אותו.
Page-break-after
מה זה עושה?
חיתוך-דף-אחרי שולט בכיצד או אם בכלל דף נחתך אחרי אלמנט מסויים. ניתן להגדיר שאסור לדף להיחתך אחרי אלמנט מסויים, או שהוא צריך, ושהדף הבא צריך להיות דף שמאלי או ימני.
ערכים אפשריים
חיתוך-דף-אחרי יכול לקחת ערך אחד ממספר ערכים של מילות מפתח.
- auto לא כופה ולא אוסר על חיתוך של הדף אחרי האלמנט.
- always תמיד כופה את חיתוך הדף אחרי האלמנט.
- avoid מונע את חיתוך הדף אחרי האלמנט.
- left (להביא למצב של דפים שמאליים או ימניים) כופה חיתוך דף אחד או שניים אחרי האלמנט כך שהדף הבא מפורמט כדף שמאלי.
- right (להביא למצב של דפים שמאליים או ימניים) כופה חיתוך אחד או שניים אחרי האלמנט כך שהדף הבא מפורמט כדף ימני.
ערכים של ברירת מחדל
אם לא מגדירים ערך כלשהוא, חיתוך-הדף-אחרי מסודר כ-auto.
האם זה עובר בירושה?
אלמנט מסויים לא יורש את המאפיין חיתוך-דף-אחרי של האלמנט שמכיל אותו.
page-break-inside
מה זה עושה?
חיתוך-דף-בפנים שולט על האם הדף נחתך בתוך אלמנט מסויים. ניתן להגדיר שאסור לדף מסויים להיחתך בתוך אלמנט מסויים.
ערכים אפשריים
חיתוך-דף-בפנים יכול לקחת אחד משני ערכים.
- auto לא כופה ולא אוסר חיתוך דף בתוך האלמנט.
- avoid מונע חיתוך דף בתוך האלמנט.
ערכים של ברירת מחדל
אם לא הגדרנו ערך, חיתוך-דף-בפנים מוגדר כ-auto. האם זה עובר בירושה?
האם זה עובר בירושה?
אלמנט מסויים לא יורש את המאפיין חיתוך-דף-בפנים של האלמנט שמכיל אותו.
יתומים
מה זה עושה?
"יתומים" מגדיר את המספר המינימלי של שורות האלמנט שיש להשאיר בתחתית הדף כאשר הדף נחתך. אם ניתן להכניס פחות ממספר זה של שורות בתחתית הדף, הדך ייחתך לפני האלמנט וכל האלמנט מודפס על הדף הבא.
ערכים אפשריים
ה"יתומים" משתמשים בערכים של מספרים שלמים. ערך זה מגדיר את מספר השורות ה"יתומות" המותר.
ערכים של ברירת מחדל
אם לא מגדירים ערך מסויים, ה"יתומים" נקבעים ל-2.
האם זה עובר בירושה?
אלמנט כלשהוא לא יורש את המאפיין ה"יתום" של האלמנט שמכיל אותו.
חלונות
מה זה עושה?
"חלונות" מגדירות את המספר המינימלי של שורות האלמנט שיש להשאיר בראש הדף כאשר הדף הקודם נחתך. אם ניתן למקם פחות שורות ממספר זה בראש הדף, הדך נחתך לפני האלמנט וכל האלמנט מודפס על הדף הבא.
ערכים אפשריים
"חלונות" משתמשים בערכים של מספרים שלמים. ערך זה מגדיר את מספר השורות "החלונות" המותר.
ערכים של ברירת מחדל
אם לא מגדירים ערך מסויים, ה"יתומים" נקבעים ל-2.
האם זה עובר בירושה?
אלמנט כלשהוא לא יורש את המאפיין ה"יתום" של האלמנט שמכיל אותו.
דף
מה זה עושה?
דף מזהה את ה- @page rule שיש ליישם עבור האלמנט הנבחר. דף מספק את השם של ה- @page rule שנשתמש בו. ניתן לתת שם ל- @page rule ע"י פשוט להוסיף את השם של הדף אחרי ה- @page keyword. למעלה, ראינו את הדוגמא של דף הנקרא figures, כדי שישמש להבטיח שמספרים מודפסים לרוחב. ה- @page rule הזה היה:
@page figures
{
size: landscape
}
כעת אנו רוצים שאחד מתוך "המספרים" ישתמש בכלל זה כאשר הוא מודפס. כדי לעשות זאת אנו נשתמש במאפיין הדף:
img.figures
{
page: figures
}
זה אומר שדמויות מקבוצת "מספר" (זאת אומרת, אלמנטים מסומנים כ- <img class="figures">) צריכות להיות מודפסות בעזרת ה- @page rule שנקרא "מספרים".
ערכים אפשריים
דף משתמש בערך auto או בערך מזהה.
Auto מגדיר שהדפדפן יכול להדפיס את האלמנט על הדף הנוכחי.
מזהה (identifier) הוא השם של ה- @page rule שיש להשתמש בו להדפסה של סוג זה של אלמנט. המזהה מורכב רק מתווים של אותיות גדולות וקטנות, מקפים והתווים 9-0. מזהה כלשהוא חייב להתחיל עם תו גדול או קטן (לא מספר או מקף).אסור לכלול במזהים רווחים או תווים שהם מודגשים.
ערכים בברירת מחדל
אם לא מגדירים ערך כלשהוא, הדף נקבע ל- auto.
האם זה עובר בירושה?
אלמנט מסויים לא יורש את מאפיין הדף של האלמנט שמכיל אותו.
שלב הבא
בהמשך נראה כיצד CSS2 מספק דרך להפוך את סוגי המדיה השונים למטרה עם אותם דפי סגנון. סוגי מדיה
|
