הפודקאסט The CSS – 036: Text & Typography
טקסט הוא אחד מאבני הבניין העיקריות של האינטרנט.
כשאתם יוצרים אתר, אין צורך לסגנן את הטקסט. ל-HTML יש למעשה סגנון ברירת מחדל די סביר.
עם זאת, סביר להניח שהטקסט יהווה את רוב האתר, לכן כדאי להוסיף לו עיצוב. שינוי של כמה מאפיינים בסיסיים יכול לשפר משמעותית את חוויית הקריאה של המשתמשים!
במודול הזה נבדוק תחילה כמה מאפייני גופנים בסיסיים של CSS כגון font-family
, font-style
, font-weight
ו-font-size
. לאחר מכן נתעמק במאפיינים שמשפיעים על פסקאות טקסט, כמו text-indent
ו-word-spacing
. המודול מסיים עם נושאים מתקדמים יותר, כגון גופנים משתנים ופסאודו-רכיבים.
שינוי הגופן
משתמשים ב-font-family
כדי לשנות את הגופן של הטקסט.
המאפיין font-family
מקבל רשימת מחרוזות שמופרדות בפסיקים, שמתייחסות למשפחות גופנים ספציפיות או גנריות. משפחות גופנים ספציפיות הן מחרוזות מצוטטות, כגון "H בשימוש" , "EB Garamond" או "Times New Roman". משפחות גופנים גנריות הן מילות מפתח כמו serif
, sans-serif
ו-monospace
(לרשימת האפשרויות המלאה ב-MDN). הדפדפן יציג את הגופן הזמין הראשון מתוך הרשימה שסופקה.
כשמשתמשים ב-font-family
, צריך לציין לפחות משפחת גופנים גנרית אחת, למקרה שבדפדפן של המשתמש אין את הגופנים המועדפים עליך. באופן כללי, משפחת הגופנים החלופית צריכה להיות דומה לגופנים המועדפים עליך: אם נעשה שימוש ב-font-family: "Helvetica"
(משפחת גופנים מסוג Sans Serif), החלופה צריכה להיות sans-serif
להתאמה.
שימוש בגופנים נטויים ואלכסוניים
באמצעות font-style
ניתן לקבוע אם הטקסט יהיה נטוי או לא. font-style
מקבל אחת ממילות המפתח הבאות: normal
, italic
ו-oblique
.
הדגשת הטקסט
משתמשים בפונקציה font-weight
כדי להגדיר את מידת ה'הדגשה' של הטקסט. בנכס הזה אפשר להזין ערכים של מילות מפתח (normal
, bold
), ערכים יחסיים של מילות מפתח (lighter
, bolder
) וערכים מספריים (100
עד 900
).
מילות המפתח normal
ו-bold
מקבילות לערכים המספריים 400
ו-700
, בהתאמה.
מילות המפתח lighter
ו-bolder
מחושבות ביחס לרכיב ההורה. ראה את משמעות המשקלים היחסיים של MDN להצגת תרשים שימושי שמראה את אופן קביעת הערך הזה.
שינוי גודל הטקסט
באמצעות font-size
ניתן לשלוט בגודל של רכיבי הטקסט. בנכס הזה אפשר להזין ערכי אורך, אחוזים ומספר ערכים של מילות מפתח.
בנוסף לערכי אורך ואחוז, font-size
מקבל כמה ערכים מוחלטים של מילות מפתח (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) וכמה ערכים יחסיים של מילות מפתח (smaller
, larger
). הערכים היחסיים יחסיים לfont-size
של רכיב ההורה.
שינוי הרווח בין השורות
משתמשים ב-line-height
כדי לציין את הגובה של כל שורה ברכיב. במאפיין הזה אפשר להזין מספר, אורך, אחוז או את מילת המפתח normal
. באופן כללי, מומלץ להשתמש במספר במקום באורך או באחוזים כדי למנוע בעיות בתורשה.
שינוי הרווח בין התווים
בעזרת letter-spacing
אפשר לשלוט ברווחים האופקיים בין התווים בטקסט. בנכס הזה אפשר להזין ערכי אורך כמו em
, px
ו-rem
.
שימו לב שהערך שצוין מגדיל את השטח הטבעי בין התווים. בהדגמה שלמטה, כדאי לנסות לבחור אות אחת כדי לראות את הגודל של תיבת המכתבים שלה ואיך היא משתנה בשילוב עם letter-spacing
.
שינוי הרווח בין המילים
שימוש ב-word-spacing
כדי להגדיל או להקטין את הרווח בין כל מילה בטקסט. בנכס הזה אפשר להזין ערכי אורך כמו em
, px
ו-rem
. שימו לב שהאורך שאתם מציינים הוא לרווח נוסף בנוסף למרווח הרגיל. כלומר, word-spacing: 0
שווה ערך ל-word-spacing: normal
.
קיצור דרך אחד (font
)
אתם יכולים להשתמש במאפיין הקיצור font
כדי להגדיר בבת אחת מאפיינים רבים שקשורים לגופנים. רשימת הנכסים האפשריים היא font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
וגם line-height
.
במאמר של MDN לגבי font
מוסבר איך לסדר את הנכסים האלה.
שינוי גודל האותיות בטקסט
באמצעות text-transform
ניתן לשנות את האותיות הרישיות בטקסט בלי לשנות את קוד ה-HTML הבסיסי. בנכס הזה אפשר להזין את הערכים הבאים של מילות מפתח: uppercase
, lowercase
ו-capitalize
.
הוספה של קו תחתון, קו עליון וקווים תחתונים לטקסט
משתמשים בtext-decoration
כדי להוסיף שורות לטקסט. קו תחתון נפוץ בשימוש, אך ניתן להוסיף שורות מעל הטקסט או ישר בתוך הטקסט.
המאפיין text-decoration
הוא קיצור לנכסים הספציפיים יותר המפורטים בהמשך.
הנכס text-decoration-line
מקבל את מילות המפתח underline
, overline
ו-line-through
. ניתן גם לציין מילות מפתח מרובות עבור שורות מרובות.
המאפיין text-decoration-color
מגדיר את הצבע של כל הקישוטים מ-text-decoration-line
.
הנכס text-decoration-style
מקבל את מילות המפתח solid
, double
, dotted
, dashed
ו-wavy
.
המאפיין text-decoration-thickness
מקבל ערכי אורך ומגדיר את רוחב הקווים של כל העיצובים החל מ-text-decoration-line
.
המאפיין text-decoration
הוא קיצור לכל הנכסים שלמעלה.
הוספת כניסת פסקה לטקסט
שימוש ב-text-indent
כדי להוסיף כניסת פסקה לקטעי הטקסט. המאפיין הזה לוקח לפי אורך (לדוגמה, 10px
או 2em
) או אחוז מרוחב הבלוק שמכיל.
טיפול בתוכן מוסתר או עמוס
משתמשים ב-text-overflow
כדי לציין את אופן הייצוג של תוכן מוסתר. יש שתי אפשרויות: clip
(ברירת המחדל), שמקצרת את הטקסט בזמן הגלישה, ו-ellipsis
שמציגה שלוש נקודות (...) בזמן הגלישה.
שליטה ברווח לבן
המאפיין white-space
משמש לציון אופן הטיפול ברווחים לבנים ברכיב. לפרטים נוספים, אפשר לקרוא את המאמר בנושא white-space
בנושא MDN.
הפונקציה white-space: pre
יכולה להיות שימושית לעיבוד גרפיקה מסוג ASCII או בלוקים של קוד עם כניסת פיסקה קפדנית.
שליטה באופן שבו המילים נשברות
באמצעות word-break
ניתן לשנות את האופן שבו מילים צריכות "לקטע" כשהן עוברות את השורה. כברירת מחדל, הדפדפן לא יפצל מילים. שימוש בערך מילת המפתח break-all
עבור word-break
מורה לדפדפן לשבור מילים בתווים בודדים, אם יש צורך.
שינוי היישור של הטקסט
משתמשים בפונקציה text-align
כדי לציין את היישור האופקי של טקסט בבלוק או ברכיב של תא בטבלה. בנכס הזה אפשר להזין את הערכים left
, right
, start
, end
, center
, justify
ו-match-parent
.
הערכים left
ו-right
מיישרים את הטקסט לצד שמאל ולצד ימין של הבלוק, בהתאמה.
יש להשתמש ב-start
וב-end
כדי לייצג את המיקום של ההתחלה והסיום של שורת טקסט במצב הכתיבה הנוכחי. לכן, start
ממופה אל left
באנגלית ואל right
בכתב ערבי שכתוב מימין לשמאל (RTL). אלו התאמות לוגיות. מידע נוסף זמין במודול נכסים לוגיים שלנו.
אפשר להשתמש בcenter
כדי ליישר את הטקסט למרכז הבלוק.
הערך של justify
מארגן את הטקסט ומשנה את המרווחים בין המילים באופן אוטומטי כך שהטקסט יהיה מיושר עם הקצה השמאלי והימני של הבלוק.
שינוי כיוון הטקסט
כדי לקבוע את כיוון הטקסט, משתמשים בdirection
כדי לקבוע את כיוון הטקסט - ltr
(ברירת המחדל, משמאל לימין) או rtl
(מימין לשמאל). שפות מסוימות, כמו ערבית, עברית או פרסית, נכתבות מימין לשמאל, לכן יש להשתמש ב-direction: rtl
. באנגלית ובכל השפות האחרות שנכתבות משמאל לימין יש להשתמש ב-direction: ltr
.
שינוי רצף הטקסט
שימוש ב-writing-mode
מאפשר לשנות את האופן שבו הטקסט זורם ומאורגן. ברירת המחדל היא horizontal-tb
, אבל אפשר גם להגדיר את writing-mode
ל-vertical-lr
או ל-vertical-rl
עבור טקסט שרוצים לזרום לרוחב.
שינוי הכיוון של טקסט
משתמשים ב-text-orientation
כדי לציין את כיוון התווים בטקסט. הערכים החוקיים לנכס הזה הם mixed
ו-upright
. המאפיין הזה רלוונטי רק אם הערך בשדה writing-mode
מוגדר לערך שאינו horizontal-tb
.
הוספת צל לטקסט
באמצעות text-shadow
ניתן להוסיף צל לטקסט. למאפיין הזה נדרשים שלושה אורכים (x-offset
, y-offset
ו-blur-radius
) וצבע.
מידע נוסף זמין בקטע text-shadow
במודול 'אזורים כהים'.
גופנים משתנים
בדרך כלל, גופנים 'רגילים' מחייבים ייבוא של קבצים שונים לגרסאות שונות של הגופן, למשל מודגש, נטוי או דחוס. גופנים משתנים הם גופנים שיכולים להכיל וריאציות רבות ושונות של גופן בקובץ אחד.
לפרטים נוספים, אפשר לעיין במאמר שלנו בנושא גופנים משתנים.
פסאודו-רכיבים
פסאודו-רכיבים ::first-letter
ו-::first-line
פסאודו-רכיבים ::first-letter
ו-::first-line
מטרגטים לאות הראשונה ולשורה הראשונה של רכיב טקסט, בהתאמה.
פסאודו-רכיב ::selection
אפשר להשתמש בפסאודו-רכיב ::selection
כדי לשנות את המראה של הטקסט שנבחר על ידי המשתמש.
כשמשתמשים בפסאודו-רכיב הזה, ניתן להשתמש רק במאפייני CSS מסוימים: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
.
font-variant
המאפיין font-variant
הוא קיצור לכמה נכסי CSS שמאפשרים לבחור וריאנטים של גופנים כמו small-caps
ו-slashed-zero
. מאפייני ה-CSS שכוללים את הקיצור הזה הם font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
ו-font-variant-numeric
. עיינו בקישורים בכל נכס לקבלת פרטים נוספים על השימוש בו.
בדיקת ההבנה
בחינת הידע שלכם על טיפוגרפיה באינטרנט
באיזו ממילות המפתח הבאות אפשר להשתמש כחלופה גנרית לfont-family
?
serif
monospace
italic
italic
היא מילת מפתח חוקית עבור font-style
ולא עבור font-family
.sci-fi
fantasy
הוא חלופה גנרית תקינה ל-font-family
.sans-serif
helvetica
"Helvetica"
אינה מילת מפתח גנרית, אלא משפחת גופנים ספציפית.באיזה הצהרה נעשה שימוש כדי להמיר את האות הראשונה של כל מילה לאותיות רישיות? לדוגמה: This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
נכון או לא נכון: יש להשתמש בפונקציה text-orientation
כדי ליישר טקסט לשמאל, לימין או למרכז.
text-orientation
משנה את הסיבוב של האותיות בשורה.text-orientation
משנה את הסיבוב של האותיות בשורה. אפשר להשתמש בפונקציה text-align
כדי ליישר טקסט לשמאל, לימין או למרכז (ועוד!).באיזה מאפיין CSS ניתן להשתמש כדי לשנות את הרווח בין שורות הטקסט?
line-spacing
leading
baseline-distance
line-height
מקורות מידע
- שיטות מומלצות לשימוש בגופנים עוסקות בייבוא גופנים, בעיבוד גופנים ובשיטות מומלצות נוספות לשימוש בגופנים באינטרנט.
- טקסט וגופנים בסיסיים של MDN.