תאריך פרסום: 30 באוקטובר 2024
בגרסה 131 של Chrome אפשר להשתמש ב-CSS כדי להוסיף תוכן לשוליים של דפים כשהם מודפסים. בפוסט הזה נסביר על מודל הדפים של מדיה מחולקת לדפים, ואיך משתמשים בתכונה הזו כדי לשפר את הפלט של הדפסה מדפי האינטרנט.
CSS כולל מפרטים שקשורים למדיה מחולקת לדפים, מודול המדיה המחולקת לדפים ב-CSS ותוכן שנוצר ב-CSS למדיה מחולקת לדפים. הם מגדירים תכונות שמשמשות רק כשמדפיסים דף (כולל להמרה לקובץ PDF). יש סוכנויות משתמשים שתומכות ב-CSS הזה ומאפשרות ליצור ספרים וחומרים מודפסים אחרים מ-HTML ו-CSS. עם זאת, הפונקציונליות הזו אף פעם לא הייתה נתמכת היטב בדפדפני אינטרנט, למרות שלעיתים קרובות אנחנו צריכים להדפיס או ליצור קובצי PDF מאפליקציות.
ב-Chrome וב-Firefox יש תמיכה בכלל at-rule @page. הכלל הזה מאפשר לכם להגדיר את גודל הדף שאליו אתם מדפיסים ואת גודל השוליים מסביב לתוכן. החל מגרסה 131 של Chrome, אפשר גם להשתמש בתוכן שנוצר כדי להוסיף תוכן לשוליים, על ידי טירגוט של כלל margin at-rule הרלוונטי.
מודל הדף
מודל הדף שמשמש במדיה מחולקת לדפים מגדיר תיבת דף, שהיא גיליון הנייר. בתוך תיבת הדף יש שולי דף, גבול דף, רווח דף ולבסוף אזור הדף שבו מוצג התוכן. כשהתוכן מודפס, הוא מפוצל לכמה דפים שצריך כדי להכיל אותו.
לאחר מכן, שוליים הדף מחולקים ל-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: auto, כך שהן נמתחות כדי למלא את המרחב, אבל אם תוסיפו מחרוזת טקסט ארוכה לאחת מהן ולא תוסיפו כלום לשאר, התיבה עם הטקסט תגדל במקום שהטקסט יתגובה.
הוספת תוכן לקופסאות שוליים
כדי להוסיף תוכן לקופסאות שוליים, משתמשים בתוכן שנוצר באמצעות CSS, בדיוק כמו שמשתמשים בפסאודו-אלמנטים ::before ו-::after. במקרה כזה, משתמשים בכלל at-rule שקשור לתיבת הדו-שיח שרוצים לטרגט. קוד ה-CSS הבא מוסיף את הטקסט 'הספר שלי' לתיבה של השוליים השמאלי התחתון או לדפים הימניים. הוא גם מעצב את הטקסט הזה.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
בנוסף למחרוזות טקסט, אפשר להוסיף למרווחים ספירת דפים. המונה page שהוגדר מראש מכיל את הדף הנוכחי. הקוד הבא מוסיף את התג הזה בפינה הימנית התחתונה של דפים בצד ימין, ובפינה השמאלית התחתונה של דפים בצד שמאל.
@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;
}