תאריך פרסום: 30 באוקטובר 2024
מגרסה Chrome 131 אפשר להשתמש ב-CSS כדי להוסיף תוכן לשוליים של דפים כשמדפיסים אותם. במאמר הזה מוסבר על מודל הדפים של מדיה עם מספור דפים, ואיך אפשר להשתמש בתכונה הזו כדי לשפר את הפלט של הדפסה מדפי האינטרנט.
שפת ה-CSS כוללת מפרטים שמתייחסים למדיה עם דפים, למודול המדיה עם הדפים של CSS ולתוכן שנוצר על ידי CSS למדיה עם דפים. הם מגדירים תכונות שמשמשות רק כשמדפיסים דף (כולל לקובץ PDF). יש סוכני משתמש שתומכים ב-CSS הזה, ומאפשרים לכם ליצור ספרים וחומרים מודפסים אחרים מ-HTML ומ-CSS. עם זאת, התמיכה בפונקציונליות הזו בדפדפני אינטרנט לא הייתה טובה אף פעם, למרות העובדה שדי הרבה פעמים אנחנו צריכים להדפיס או ליצור קובצי PDF מאפליקציות.
הדפדפנים Chrome ו-Firefox תומכים בכלל @page. הכלל הזה מאפשר להגדיר את גודל הדף שמדפיסים ואת גודל השוליים מסביב לתוכן. מגרסה Chrome 131 ואילך, אפשר גם להשתמש בתוכן שנוצר כדי להוסיף תוכן לשוליים, על ידי טירגוט השוליים הרלוונטיים באמצעות כלל @.
מודל הדף
מודל הדף שמשמש במדיה עם מספור דפים מגדיר תיבת דף, שזהו הדף שלכם. בתוך התיבה של הדף יש שוליים של הדף, גבול של הדף, ריווח פנימי של הדף, ובסופו של דבר אזור הדף שבו מוצג התוכן. כשמדפיסים תוכן, הוא מפולח למספר הדפים שנדרש כדי להכיל אותו.
השוליים של הדף מחולקים ל-16 תיבות, וכל אחת מהן תואמת לכלל at.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
הגדרת גודל של תיבת שוליים
הגובה של התיבות העליונה והתחתונה והרוחב של התיבות בצד ימין ובצד שמאל מוגדרים לפי גודל השוליים שמוגדר באמצעות @page. לכן, התיבות בפינות הן בגודל קבוע שנוצר מהחיתוך של השוליים האלה. עם זאת, שלושת הריבועים בין כל פינה הם גמישים. הם מתנהגים באופן דומה לתיבות בפריסת flex באמצעות flex: auto, כך שהם מתרחבים כדי למלא את המקום, אבל אם מכניסים מחרוזת ארוכה של טקסט לאחת מהן ולא מכניסים כלום לאחרות, התיבה עם הטקסט תגדל במקום שהטקסט יגלוש.
הוספת תוכן לתיבות שוליים
כדי להוסיף תוכן לתיבות שוליים, משתמשים בתוכן שנוצר על ידי CSS, בדיוק כמו שמשתמשים בפסאודו-אלמנטים ::before ו-::after. במקרה כזה, משתמשים בכלל at שקשור לתיבה שאליה רוצים לטרגט. קוד ה-CSS הבא מוסיף את הטקסט My book (הספר שלי)
לתיבת השוליים השמאלית התחתונה או לדפים בצד ימין. הוא גם מעצב את הטקסט.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
בנוסף למחרוזות טקסט, אפשר להוסיף לשוליים מוני דפים. המונה page המוגדר מראש מכיל את הדף הנוכחי. קוד ה-CSS הבא מוסיף את התמונה לפינה השמאלית התחתונה של דפים שמוצגים בצד ימין ולפינה הימנית התחתונה של דפים שמוצגים בצד שמאל.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
יש גם מונה pages שמכיל תמיד את המספר הכולל של הדפים.
דברים שחשוב לדעת כשמשתמשים בשוליים של דף
אם מדפיסים מדפדפן, הדפדפן יוסיף באופן אוטומטי תוכן לשולי הדף אם יש מקום להצגה שלו. הוא יעשה את זה גם אם הוספתם תוכן. אפשר להשבית את הכותרות העליונות והתחתונות האלה שנוצרות באופן אוטומטי בתיבת הדו-שיח של ההדפסה.
אם מגדירים את השוליים בדף ל-0, או לערך קטן מדי שלא משאיר מקום לכותרות ולכותרות התחתונות של הדפדפן, הן לא יוצגו.
בגלל הקונספט של פריסת דף ברירת מחדל ב-Chromium, אם אין מקום לתוכן האוטומטי בדף הראשון של המסמך המודפס, התוכן של הדפדפן לא יוצג בדפים הבאים, גם אם יש בהם מקום.
אפשרויות עתידיות למדיה עם דפים
מפרט המדיה עם העמודים כולל כמה תכונות נוספות, שמתוארות במאמר עיצוב להדפסה באמצעות CSS. אם יש לכם מקרה שימוש לאחת מהתכונות הבאות, תוכלו להוסיף אותו לבאגים המקושרים.
הגדרת מחרוזות
בספרים, בדרך כלל מודפס בשוליים שם הפרק הנוכחי. אי אפשר להגדיר את הכותרת הזו כקוד קשיח בשירות ה-CSS, כי היא משתנה כשמתקדמים בספר. המאפיין
string-set מאפשר להגדיר ערך מ-HTML ואז להשתמש בו בתוכן שנוצר. ה-CSS הבא מניח ששמות הפרקים מסומנים בתג <h1>. הוא לוקח את התוכן של כל <h1> ומשתמש בו בשוליים הימניים העליונים בדפים בצד ימין. כשהמערכת מגיעה ל-<h1> הבא, הערך מתעדכן בשוליים אחרי הנקודה הזו.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
באג ב-Chromium בגרסאות string-set ו-string().
הפניות
אחרי שמדפיסים מסמך, בדרך כלל מציינים הפניות לדפים אחרים באמצעות מספר הדף שבו אפשר למצוא את ההפניה. אפשר ליצור הפניות צולבות כאלה באמצעות target-counter. כשמחילים את התכונה על קישור, הקישור פועל כך שאפשר לקפוץ להפניה באינטרנט, וכשהדף מודפס מוצג מספר הדף.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
באג ב-Chromium שקשור להפניות צולבות.
הערות שוליים
הערות שוליים הן גם תכונה של מפרטי מדיה עם דפים. ב-HTML, משתמשים במחלקה כדי לזהות טקסט שצריך להיות הערת שוליים, למשל:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
לאחר מכן משתמשים בערך footnote של float כדי להפוך את הטקסט הזה להערות שוליים. הוא יוסר מהפסקה כשהמסמך יודפס ויוצג כהערת שוליים.
.fn {
float: footnote;
}