הפודקאסט של שירות ה-CSS – 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.
הצדדים עם תחילת הבלוק מופיעים עם גבול אדום כך שאפשר לראות אותם.
פתרון בעיות בסמל
אחרי שהסברנו על תכונות לוגיות, אפשר ליישם את הידע הזה על בעיית העיצוב שאיתה התחלנו.
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.איזה צד לוגי של מילה מודגש בקו תחתון?