תאריך פרסום: 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;
}