שימוש ב- CSS לעיצוב מסמכים להדפסה

שימוש ב- CSS לעיצוב מסמכים להדפסה

אם אי פעם הדפסת הזמנת כרטיסים או הוראות הגעה למלון מהאינטרנט, כנראה שהתרשמת פחות מהתוצאות. על כן, ייתכן שאינך מודע לכך שניתן לעצב מסמכים מודפסים באופן זהה למסך, באמצעות גיליונות סגנונות מדורגים (CSS).





הפרדת דאגות

יתרון מרכזי ב- CSS הוא הפרדת התוכן מהמצגת. במילים הפשוטות ביותר, זה אומר במקום סימון סגנוני מיושן מאוד כגון:



Heading

אנו משתמשים בסימון סמנטי:






לא רק שזה הרבה יותר נקי, זה גם אומר שהמצגת שלנו מופרדת מהתוכן שלנו. דפדפנים מעבירים h1 אלמנטים כטקסט גדול ונועז כברירת מחדל, אך אנו יכולים לשנות סגנון זה בכל עת באמצעות גיליון סגנונות:

h1 { font-weight: normal; }

על ידי איסוף הצהרות סגנון אלה בקובץ נפרד, והפניה של קובץ זה ממסמך ה- HTML שלנו, אנו יכולים לנצל את ההפרדה אפילו טוב יותר. ניתן לעשות שימוש חוזר בדף הסגנון, ואנו יכולים לשנות את הקובץ הבודד הזה בכל עת כדי לעדכן את העיצוב בכל מסמך שמשתמש בו.



כולל גיליון בסגנון הדפסה

באופן דומה לכלול גיליון סגנון מסך, אנו יכולים לציין גיליון סגנון להדפסה. גיליון בסגנון מסך נכלל בדרך כלל כך:


עם זאת, תכונה נוספת, חֲצִי , מאפשר מיקוד בהתבסס על ההקשר שבו המסמך מופק. כברירת מחדל, האלמנט הקודם שווה ל:




המשמעות היא שגיליון הסגנונות יוחל על כל אמצעי שבו המסמך מוצג. עם זאת, תכונת המדיה יכולה גם לקחת ערכים של הדפסה ומסך:


בדוגמה זו, print.css גיליון סגנונות ישמש רק כאשר המסמך מודפס. זהו מנגנון שימושי מאוד. אנו יכולים לאסוף את כל הסגנון הנפוץ (אולי משפחת גופנים או מרווחי שורות) בגיליון סגנונות החלים על כל אמצעי המדיה ועיצוב ספציפי למדיה בגיליונות סגנונות בודדים. שוב, זהו שימוש נוסף בהפרדת חששות.



כמה הצהרות סגנון לדוגמא

רקע נקי

כמעט בטוח שאתה לא רוצה לבזבז דיו על רקע צבעוני או תמונת רקע. התחל באיפוס כל ברירת המחדל של ערכים אלה שאולי הוגדרו במסמך שלך:

body {
background: white;
color: black;
}

ייתכן שתרצה גם למנוע הדפסה של תמונות רקע - אלה צריכות להיות דקורטיביות ולכן לא חלק נדרש מהתוכן שלך:

* {
background-image: none !important;
}

קָשׁוּר: כיצד להגדיר תמונת רקע ב- CSS

מה לחפש באספקת חשמל

שליטה בשוליים

נקודה ברורה נוספת שיש לקחת בחשבון בנוגע להדפסה היא שולי הדפים. בעוד ש- CSS מספק אמצעי לקביעת גודל שוליים, עליך לזכור כי הדפדפן והמדפסת שלך עשויים להשפיע גם על הגדרות השוליים עצמן.

לדוגמה, בתיבת הדו -שיח להדפסה של Chrome, יש הגדרת שוליים הכוללת ערכים כולל אף אחד ו המותאם אישית שיגרום לכל דבר שצוין באמצעות CSS:

מסיבה זו, מומלץ להשאיר לקורא החלטות שוליים בדפי אינטרנט ציבוריים. עם זאת, לשימוש אישי או ליצירת פריסת ברירת מחדל, הגדרת שולי הדפסה באמצעות CSS עשויה להיות מתאימה. ה @עמוד כלל מאפשר להגדיר שוליים, ויש להשתמש בהם כדלקמן:

@page {
margin: 2cm;
}

ל- CSS יש גם אפשרות לפריסות הדפסה מתוחכמות יותר, כגון שינוי השוליים לפי אם הדף הוא מספר אי-זוגי (מימין), שווה מספר (משמאל) או עמוד השער.

היכן אוכל לרכוש גור בקרבי

למרבה הצער, זה נתמך בצורה גרועה - במיוחד באפשרות עמוד השער - אך ניתן להשתמש בה במידה מינימלית. הסגנונות הבאים מייצרים דפים עם שוליים תחתונים מעט גדולים יותר מלמעלה ושוליים מעט גדולים יותר בקצה העמוד החיצוני מאשר עמוד השדרה:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

הסתרת תוכן לא רלוונטי

לא כל התוכן יתאים לגרסה מודפסת של המסמך שלך. אם הדף שלך כולל ניווט באנרים, פרסומות או סרגל צד, ייתכן שתרצה למנוע מהפרטים האלה להופיע בגרסת ההדפסה, לדוגמה:

#contents, div.ad { display: none; }

היפר -קישורים כמובן אינם רלוונטיים בחומר מודפס, כך שכנראה תרצה להסיר סגנונות המבדילים אותם מהטקסט שמסביב:

a { text-decoration: none; color: inherit; }

עם זאת, עדיין ייתכן שתרצה שלקוראים תהיה גישה לכתובות האתרים המקוריות, ופתרון פשוט הוא להכניס אותן אוטומטית לאחר הטקסט המקושר:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

CSS זה נותן תוצאות כגון:

a [href]: אחרי ממקד במיוחד את העמדה לאחר ( :לאחר ) כל רכיב קישור ( ל ) שיש לו למעשה כתובת אתר ( [href] ). ה תוֹכֶן ההצהרה כאן מוסיפה את הערך של href תכונה בין סוגריים. שים לב שניתן להחיל כללי סגנון אחרים כדי לשלוט על הצגת התוכן שנוצר.

טיפול בשבירות דפים

כדי להימנע מהעברות דפים מהשארת תוכן מבודד או לשבירתו בצורה מביכה באמצע, השתמש במאפייני מעבר הדפים: מעבר-דף-לפני , מעבר אחרי דף ו פריצת דף פנימה . לדוגמה:

table { page-break-inside: avoid; }

זה אמור לעזור למנוע מהטבלאות להתפרש על פני מספר דפים, בתנאי שאף אחד מהם אינו גבוה מדף אחד. באופן דומה:

h1, h2 { page-break-before: always; }

המשמעות היא שכותרות כאלה תמיד מתחילות דף חדש. עם זאת, זה עלול לגרום לבעיות אם תעקוב מיד אחר h1 של הדף שלך עם h2 מכיוון שה- h1 יגיע לדף לבד. כדי להימנע מכך, פשוט בטל את מעבר הדפים באמצעות בורר המכוון לאותו מופע ספציפי, למשל:

אפס את סיסמת פייסבוק עם שאלת אבטחה
h1 + h2 { page-break-before: avoid; }

צפייה בסגנונות הדפסה

בכל המקרים, הדפדפן ומערכת ההפעלה שלך צריכים לספק תכונת תצוגה מקדימה של הדפסה, לעתים כחלק מדיאלוג ההדפסה הסטנדרטי.

דפדפן כרום הופך אותו נוח יותר לבדוק ואף לאתר באגים בסגנונות ההדפסה שלך באמצעות כלי מפתחים, כפי שמוצג בדוגמה זו המציגה קורות חיים עם דף סגנון הדפסה. ראשית, פתח את התפריט הראשי ובחר כלים נוספים ואחריו ה כלי מפתחים אוֹפְּצִיָה:

מהחלונית החדשה שמופיעה בחר תַפרִיט , לאחר מכן עוד כלים , בא אחריו טִיוּחַ :

לאחר מכן גלול מטה אל לחקות סוג מדיה CSS הגדרה. התפריט הנפתח מאפשר לך לעבור בין תצוגות ההדפסה למסך של המסמך שלך:

בעת חיקוי גיליון סגנונות ההדפסה, התקן דפדפן סגנונות זמין לבדיקה ושינוי כללי הסגנון החי. זכור שחיקוי פלט ההדפסה על מסך עדיין אינו מדויק במאת האחוזים. הדפדפן אינו יודע דבר על גודל הנייר ועל @עמוד לא ניתן לחקות את הכלל.

הדפסה ל- PDF

תכונה שימושית של מערכות הפעלה מודרניות היא היכולת להדפיס לקובץ PDF. למעשה, כל דבר שאתה יכול להדפיס יכול להישלח לקובץ PDF - אין הפתעה של ממש מכיוון שקובץ PDF אמור לייצג מסמך מודפס.

זה הופך את HTML, בשילוב עם גיליון סגנונות הדפסה, לאמצעי מצוין ליצירת מסמך באיכות גבוהה שניתן לשלוח כקובץ מצורף, כמו גם להדפיס.

אתה יכול להשתמש בגיליון סגנונות הדפסה ליצירת מסמכים איכותיים, כולל כל דבר, החל מקורות החיים שלך ועד מתכונים או הודעות על אירוע. דפי אינטרנט בדרך כלל נראים מכוערים ומכילים פרטים לא רצויים בעת ההדפסה, אך מספר קטן של שינויי סגנון יכולים לשפר באופן דרמטי את תוצאות ההדפסה. שמירת התוצאות הסופיות כקובץ PDF היא דרך מהירה ליצירת מסמכים אטרקטיביים ומקצועיים.

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד להדפיס דפי אינטרנט ל- PDF באמצעות Microsoft Edge

האם נתקלתם פעם במאמר מעניין שרציתם לשמור מאוחר יותר? ובכן, אתה יכול לשמור כקובץ PDF עם Edge בשלושה שלבים פשוטים.

קרא הבא נושאים קשורים
  • תִכנוּת
  • הַדפָּסָה
  • CSS
על הסופר בובי ג'ק(58 מאמרים פורסמו)

בובי הוא חובב טכנולוגיה שעבד כמפתח תוכנה במשך רוב שני העשורים. הוא נלהב משחקים, עובד כעורך ביקורות במגזין Switch Player, והוא שקוע בכל ההיבטים של פרסום מקוון ופיתוח אתרים.

עוד מאת בובי ג'ק

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה