The CSS Podcast - 012: מאפיינים לוגיים
תבנית נפוצה מאוד בממשק המשתמש היא תווית טקסט עם סמל בתוך השורה.
הסמל מופיע משמאל לטקסט עם רווח קטן בין השניים, שסופק על ידי margin-right על הסמל.
עם זאת, יש בעיה,
מכיוון שהדבר פועל רק כאשר כיוון הטקסט הוא משמאל לימין.
אם כיוון הטקסט השתנה מימין לשמאל - כך תקרא ערבית - הסמל ימוקם מול הטקסט.
איך השירותים האלה מתייחסים לשירות ה-CSS? מאפיינים לוגיים מאפשרים לפתור את המצבים האלה. בין שאר היתרונות, הם מספקים תמיכה אוטומטית בחינם להתאמה לשוק הבינלאומי. הם עוזרים ליצור ממשק קצה עמיד יותר שמעודד את קבלת האחר.
טרמינולוגיה
המאפיינים הפיזיים של החלק העליון, הימני, התחתון והשמאלי מתייחסים לממדים הפיזיים של אזור התצוגה. אפשר לחשוב עליהם כעל שושנת רוח על מפה. מצד שני, מאפיינים לוגיים מתייחסים לקצוות של תיבה בהקשר של זרימת התוכן. לכן הם עשויים להשתנות אם כיוון הטקסט או מצב הכתיבה משתנים. זהו שינוי גדול מסגנונות כיווניים, והוא מאפשר לנו הרבה יותר גמישות בעיצוב הממשקים.
חסימת התהליך
תהליך החסימה הוא הכיוון שבו ממוקמים בלוקי התוכן. לדוגמה, אם יש שתי פסקאות, רצף החסימה הוא המקום שבו תתבצע הפסקה השנייה. במסמך באנגלית, זרימת החסימה היא מלמעלה למטה. חשבו על כך בהקשר של פסקאות טקסט שעוקבות זו אחר זו, מלמעלה למטה.
זרימה בתוך שורה
הזרימה המוטבעת היא האופן שבו הטקסט עובר במשפט.
במסמך באנגלית, הזרימה המוטבעת משמאל לימין.
אם משנים את שפת המסמך לערבית (<html lang="ar">),
הזרימה בתוך המסמך תהיה מימין לשמאל.
הטקסט מועבר בכיוון שנקבע בהתאם למצב הכתיבה של המסמך.
באפשרותך לשנות את כיוון הפריסה של הטקסט בעזרת המאפיין writing-mode.
אפשר להחיל את ההגדרה הזו על כל המסמך או על רכיבים ספציפיים.
זרימה יחסית
בעבר, ב-CSS, הצלחנו להחיל רק מאפיינים כמו שוליים ביחס לכיווניות שלהם.
לדוגמה, הפקודה margin-top מוחלת על החלק העליון הפיזי של הרכיב.
עם מאפיינים לוגיים, margin-top הופך ל-margin-block-start.
כלומר, ללא קשר לשפה ולכיוון הטקסט, לתהליך החסימה יש כללים מתאימים של שוליים.
התאמת גודל
כדי שרכיב לא יחרוג מרוחב או מגובה מסוימים, צריך לכתוב כלל כזה:
.my-element {
max-width: 150px;
max-height: 100px;
}
המקבילים היחסיים לזרימה הם max-inline-size ו-max-block-size.
אפשר גם להשתמש ב-min-block-size וב-min-inline-size במקום ב-min-height וב-min-width.
בעזרת מאפיינים לוגיים, הכלל המקסימלי של רוחב וגובה ייראה כך:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
התחלה וסיום
במקום להשתמש במסלול כמו החלק העליון, החלק הימני, התחתון והשמאלי, השתמשו בהתחלה ובסוף. כך ניתן לחסום התחלה, סיום מוטבע, סיום כולל והתחלה מוטבעת. הם מאפשרים להחיל מאפייני CSS שמגיבים לשינויים במצב הכתיבה.
לדוגמה, כדי ליישר טקסט לימין, אפשר להשתמש ב-CSS הבא:
p {
text-align: right;
}
אם המטרה שלכם היא לא ליישר קו לימין הפיזי, אלא בתחילת כיוון הקריאה, לא תוכלו להיעזר בזה.
עם ערכים לוגיים אפשר למצוא ערכים מועילים יותר של start ו-end שממופים לכיוון הטקסט.
כלל יישור הטקסט נראה עכשיו כך:
p {
text-align: end;
}
ריווח ומיקום
המאפיינים הלוגיים של margin, padding ו-inset מאפשרים לרכיבי מיקום וקובעים את האינטראקציה בין הרכיבים האלה במצבי כתיבה לקלים ויעילים יותר.
המאפיינים שקשורים לשוליים ולמרווח הפנימי עדיין נחשבים למיפויים ישירים לכיוונים, אבל ההבדל העיקרי הוא שכאשר מצב הכתיבה משתנה, הם משתנים יחד איתו.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
הפעולה הזו מוסיפה אנכי בתוך החלל באמצעות padding ודוחפת אותו החוצה משמאל באמצעות margin.
המאפיין top גם מזיז אותו למטה.
עם שווי ערך של מאפיינים לוגיים, הטקסט ייראה כך:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
הפעולה הזו מוסיפה קטע שקושר בתוך החלל באמצעות padding, ודוחפת אותו החוצה מ-margin מההתחלה.
הנכס inset-block מעביר אותו פנימה מבלוק ההתחלה.
הנכס inset-block הוא לא אפשרות הקיצור היחידה עם מאפיינים לוגיים.
אפשר לדחוס את הכלל הזה עוד יותר, באמצעות גרסאות מקוצרות של מאפייני השוליים והמרווח הפנימי.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
גבולות
אפשר להוסיף את border ו-border-radius גם באמצעות מאפיינים לוגיים.
כדי להוסיף גבול בצד ימין ולמטה, עם רדיוס מימין, ניתן לכתוב כלל כך:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
לחלופין, אפשר להשתמש במאפיינים לוגיים כמו:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
ה-end-end ב-border-end-end-radius הוא סוף הבלוק וגם הסיום המוטבע.
יחידות
מאפיינים לוגיים מביאים שתי יחידות חדשות: vi ו-vb.
יחידת vi מהווה 1% מגודל אזור התצוגה בכיוון השורה.
הפונקציה המקבילה למאפיין שאינו לוגי היא vw.
היחידה vb מהווה 1% מאזור התצוגה בכיוון הבלוק.
הפונקציה המקבילה למאפיין שאינו לוגי היא vh.
היחידות האלה תמיד ימופו לכיוון הקריאה.
לדוגמה, אם רוצים שרכיב יתפוס 80% מהשטח הזמין ברצף של אזור תצוגה,
שימוש ביחידה vi יגרום לכך שהגודל הזה ישתנה באופן אוטומטי מלמעלה למטה כאשר מצב הכתיבה אנכי.
שימוש במאפיינים לוגיים באופן פרגמטי
התכונות הלוגיות ומצבי הכתיבה לא מיועדים רק לבינלאומיות. תוכלו להשתמש בהם כדי ליצור ממשק משתמש מגוון יותר.
אם יש לך תרשים עם תוויות על ציר ה-X וציר ה-Y, ייתכן שתרצה שהטקסט בתווית Y יהיה אנכי.
מכיוון שלתווית של ציר Y בהדגמה יש writing-mode של vertical-rl, תוכלו להשתמש באותם ערכי margin בשתי התוויות.
הערך margin-block-start חל על שתי התוויות כי התחלת החסימה נמצאת בצד ימין של ציר ה-Y ובחלק העליון של ציר ה-X.
בצידי הבלוק-start יש גבול אדום, כך שתוכל לראות אותם.
פתרון הבעיה לגבי הסמל
אחרי שהסברנו מאפיינים לוגיים, אפשר ליישם את הידע הזה בבעיית העיצוב שאיתה התחלנו.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
השוליים הוחלו מימין לרכיב הסמל.
כדי שהמרווח בין הסמל לטקסט יתמוך בכל כיוון הקריאה, צריך להשתמש במקום זאת במאפיין margin-inline-end.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
עכשיו, ללא קשר לכיוון ההקראה, הסמל ימקם את עצמו וירווח את עצמו בהתאם.
בדיקת ההבנה
בחינת הידע שלכם במאפיינים לוגיים
כשכותבים ביד, פרק כף היד נע לאורך ציר לוגי?
inlineblockבודקים את כל הביצועים שמניבים מאפיינים לוגיים
flex-start, block-end וגם inline-startblock-start ו-inline.inline-size ו-max-block-size.border-end-end-radiusאיזה צד לוגי של מילה מסומן בקו תחתון?