פריסה דמוית-כתבי עת לאינטרנט, עם אזורים והחרגות של CSS

Christian Cantrell
Christian Cantrell
X דף הבית

מבוא

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

דוגמה להחרגות CSS בפעולה
דוגמה להחרגות CSS בפעולה

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

דוגמה לשימוש באזורי CSS
דוגמה לשימוש באזורי CSS

אזורים ב-CSS

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

הפעלת אזורי CSS ב-Google Chrome

החל מגרסה 20 של Chrome (גרסה 20.0.1132.57, ליתר דיוק), אזורי CSS מופעלים דרך הממשק chrome://flags. כדי להפעיל אזורי CSS:

  1. פותחים כרטיסייה חדשה או חלון חדש ב-Chrome.
  2. מקלידים chrome://flags בסרגל המיקום.
  3. משתמשים באפשרות חיפוש בדף (control/command + f) ומחפשים את הקטע 'תכונות ניסיוניות של פלטפורמת האינטרנט'.
  4. לוחצים על הקישור Enable.
  5. לוחצים על הלחצן Relaunch Now (הפעלה מחדש) בתחתית המסך.

מידע נוסף על הדגלים של Chrome זמין בפוסט שלי בבלוג בנושא הכול על הדגלים של Chrome.

אחרי שתפעילו מחדש את הדפדפן, תוכלו להתחיל להתנסות ב-CSS Regions.

סקירה כללית על אזורים ב-CSS

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

העברת תוכן לאזורים מוגדרים
העברת תוכן לאזורים מוגדרים

נבחן עכשיו תרחיש לדוגמה של שימוש ב-CSS Regions. בנוסף לעבודתי כמפתחת ב-Adobe, אני גם כותבת מדע בדיוני. אני מפרסם את העבודות שלי באינטרנט לעיתים קרובות ברישיון Creative Commons, וכדי לאפשר להן לפעול במספר המרבי של מכשירים ודפדפנים, אני משתמש לעיתים קרובות בפורמט פשוט מאוד שדומה לזה:

דוגמה לפרויקט קוד מדור קודם ללא עיצוב
דוגמה לפרויקט 'משאבי אנוש' מדור קודם ללא עיצוב

בעזרת אזורי CSS הצלחתי ליצור חוויה מעניינת יותר מבחינה חזותית ופונקציונלית יותר, כי קל יותר לנווט בה וקל יותר לקרוא אותה:

פרויקט Human Legacy שמוצג בו האזור
פרויקט מורשת אנושית עם אזורים.

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

פרויקט Human Legacy שמוצגים בו אזורים
Human Legacy Project showing Regions

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

יצירת תהליך עבודה בעל שם

הקוד הנדרש ב-CSS כדי לגרום לבלוק טקסט לזרום בין אזורים הוא פשוט מאוד. קטע הקוד הבא מקצה תהליך בעל שם שנקרא 'article' ל-div עם המזהה 'content', ומקצה את אותו תהליך בעל השם 'article' לכל אלמנט עם הכיתה 'region'. התוצאה היא שהטקסט שמכיל הרכיב 'content' יעבור באופן אוטומטי דרך כל רכיב עם הכיתה 'region'.

<!DOCTYPE html>
<html>
<head>
    <style>
    #content {
        { % mixin flow-into: article; % }
    }

    .region {
        { % mixin flow-from: article; % }
        box-sizing: border-box;
        position: absolute;
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    #box-a {
        border: 1px solid red;
        top: 10px;
        left: 10px;
    }

    #box-b {
        border: 1px solid green;
        top: 210px;
        left: 210px;
    }

    #box-c {
        border: 1px solid blue;
        top: 410px;
        left: 410px;
    }
    </style>
</head>
<body>
    <div id="box-a" class="region"></div>
    <div id="box-b" class="region"></div>
    <div id="box-c" class="region"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
    </div>
</body>
</html>

התוצאה נראית כך:

התוצאה של הקוד שלמעלה
התוצאה של הקוד שלמעלה

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

מודל האובייקטים של CSS

מודל האובייקטים של CSS (CSSOM) מגדיר ממשקי API של JavaScript לעבודה עם CSS. בהמשך מופיעה רשימה של ממשקי ה-API החדשים שקשורים לאזורי CSS:

  • document.webkitGetNamedFlows(): פונקציה שמחזירה את האוסף של תהליכים עם שמות שזמינים במסמך.
  • document.webkitGetNamedFlows().namedItem("article"): פונקציה שמחזירה הפניה לתהליך ספציפי בעל שם. הארגומנט תואם לשם שצוין כערך של מאפייני ה-CSS flow-into ו-from-from. כדי לקבל הפניה לתהליך בעל השם שצוין בקטע הקוד שלמעלה, מעבירים את המחרוזת article.‎
  • WebKitNamedFlow: ייצוג אובייקט של פלוא בשם עם המאפיינים והפונקציות הבאים:
    • firstEmptyRegionIndex: ערך שלם שמפנה לאינדקס של האזור הריק הראשון שמשויך לתהליך המכונה. בקטע getRegions() בהמשך מוסבר איך לקבל את האוסף של האזורים.
    • name: ערך מחרוזת עם שם התהליך.
    • overset: מאפיין בוליאני:
      • false כשהתוכן של תהליך העבודה בעל השם מתאים לאזורים המשויכים
      • true כשהתוכן לא נכנס ונדרש יותר מקום כדי להכיל את כל התוכן.
    • getContent(): פונקציה שמחזירה אוסף עם הפניות לצמתים שמגיעים לתהליך המסומן בשם.
    • getRegions(): פונקציה שמחזירה אוסף עם הפניות לאזורים שמכילים את התוכן של התהליך בעל השם.
    • getRegionsByContentNode(node): פונקציה שמחזירה הפניה לאזור שמכיל את הצומת שצוין. האפשרות הזו שימושית במיוחד לאיתור אזורים שמכילים דברים כמו עוגנים עם שם.
  • אירוע webkitregionoversetchange. האירוע הזה מופעל ב-WebkitNamedFlow בכל פעם שהפריסה של התוכן המשויך משתנה מכל סיבה שהיא (תוכן נוסף או הוסר, גודל הגופן השתנה, צורת האזור השתנתה וכו') ו גורמת לשינוי של המאפיין webkitRegionOverset של האזור. האירוע הזה שימושי למעקב אחרי שינויים גסים בפריסה. זהו אינדיקטור לכך שמשהו חשוב קרה ויכול להיות שצריך לשנות את הפריסה, למשל: צריך להוסיף אזורים, חלק מהאזורים ריקים וכו'.
  • אירוע webkitregionfragmentchange. לא מוטמע בזמן העריכה הזו. האירוע הזה מופעל ב-WebkitNamedFlow בכל פעם שפריסת התוכן המשויך משתנה מסיבה כלשהי, בדומה ל-webkitregionoversetchange, אבל ללא קשר לשינוי בנכסי webkitRegionOverset. האירוע הזה שימושי כדי להאזין לשינויים פרטניים בפריסה שלא משפיעים בהכרח על כל הפריסה של התהליך המתוזמן. לדוגמה: תוכן נע מאזור אחד לאזור אחר, אבל התוכן הכולל עדיין נכנס לכל האזורים.
  • Element.webkitRegionOverset: רכיבים הופכים לאזורים כשמקצים להם את מאפיין ה-CSS flow-from. לרכיבים האלה יש מאפיין webkitRegionOverset, שאם הם חלק מזרימה בעלת שם, מציין אם התוכן מהזרימה חורג מהאזור או לא. הערכים האפשריים של webkitRegionOverset הם:
    • 'overflow' אם יש יותר תוכן ממה שהאזור יכול להכיל
    • 'fit' אם התוכן נעצר לפני סוף האזור
    • 'ריק' אם התוכן לא הגיע לאזור

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

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

var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);

function onLayoutUpdate(event) {
    var flow = event.target;
    
    // The content does not fit
    if (flow.overset === true) {
    addRegion();
    } else {
    regionLayoutComplete();
    }
}

function addRegion() {
    var region = document.createElement("div");
    region.style = "flow-from: article";
    document.body.appendChild(region);
}

function regionLayoutComplete() {
    // Finish up your layout.
}

הדגמות נוספות זמינות בדף הדוגמאות של אזורי CSS.

תבניות דפים של CSS

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

נבחן תרחיש לדוגמה נפוץ לשימוש בתבניות דפי CSS. קטע הקוד הבא מראה שימוש ב-CSS כדי ליצור שני תהליכים עם שמות: 'article-flow' ו-'timeline-flow'. בנוסף, הוא מגדיר סלקטור שלישי שנקרא 'combined-articles', שבתוכו יהיו שני הזרמים. ההכללה הפשוטה של נכס overflow-style בבורר 'combined-articles' מציינת שהתוכן צריך להיות מחולק לדפים באופן אוטומטי לאורך ציר x, או אופקית:

<style>
    #article {
    { % mixin flow-into: article-flow; % }
    }

    #timeline {
    { % mixin flow-into: timeline-flow; % }
    }

    #combined-articles {
    overflow-style: paged-x;
    }
</style>

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

@template {
    @slot left {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }

    @slot time {
    width: 25%;
    float: left;
    { % mixin flow-from: timeline-flow; % }
    }

    @slot right {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }
}

תבניות דפים מוגדרות באמצעות התחביר החדש 'at'. בקטע הקוד שלמעלה, אנחנו מגדירים שלושה משבצות, כל אחת מהן תואמת לעמודה. הטקסט מהעמודה 'article-flow' יופיע בעמודות שמימין ומשמאל, והטקסט מהעמודה 'timeline-flow' יאכלס את העמודה שבאמצע. התוצאה עשויה להיראות כך:

דוגמה לתבניות של דפים
דוגמה לתבניות דפים

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

תבניות דפי CSS עדיין נמצאות בשלב ההצעה, אבל יש לנו אב טיפוס שמשתמש ב-JavaScript "shim" (נקרא גם polyfill) כדי לאפשר לכם להתנסות בהן כבר עכשיו.

מידע נוסף על אזורי CSS באופן כללי זמין בדף CSS Regions בכתובת html.adobe.com.

החרגות CSS

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

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

דוגמה להחרגות CSS בפעולה
דוגמה להחרגות CSS בפעולה

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

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

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

מידע נוסף על החרגות CSS זמין בדף החרגות CSS בכתובת html.adobe.com. לסקירה מפורטת יותר על העבודה של Adobe בטכנולוגיה הבסיסית של החרגות CSS, אפשר לעיין בפוסט בבלוג של Hans Muller שכותרתו Horizontal Box: Polygon Intersection for CSS Exclusions.

המצב הנוכחי של אזורי CSS והחרגות CSS

הפעם הראשונה שדיברתי בפומבי על אזורים ב-CSS והחרגות ב-CSS הייתה ב-Adobe Developer Pod ב-Google I/O 2011. באותו זמן, הראיתי הדגמות בדפדפן אב טיפוס בהתאמה אישית שלנו. התגובות היו נלהבות מאוד, אבל הייתה תחושה מוחשית של אכזבה כשהצופים גילו שעדיין אף אחת מהפונקציות שהראיתי לא זמינה באף אחד מהדפדפנים העיקריים.

השתתפתי ב-Google I/O שוב השנה (2012), הפעם כמנחה יחד עם חברי לעבודה וינסנט הארדי ועם אלכס דנילו מ-Google (אפשר לצפות במצגת כאן). שנה לאחר מכן, כ-80% מהמפרט של אזורי CSS יושמו ב-WebKit, והם כבר נמצאים בגרסה האחרונה של Google Chrome (שימו לב שכרגע צריך להפעיל את אזורי ה-CSS דרך chrome://flags). תמיכה ראשונית באזורי CSS הגיעה גם ל-Chrome ל-Android:

אזורים ב-Chrome ל-Android
אזורים ב-Chrome ל-Android

בנוסף, גם אזורים ב-CSS וגם החרגות ב-CSS מוטמעים בתצוגה המקדימה של Internet Explorer 10, והם נכללים כרגע בתוכנית העבודה של Mozilla לשנת 2012 ל-Firefox. הגרסה הראשית הבאה של Safari אמורה לתמוך ברוב המפרט של אזורי CSS, והעדכונים הבאים אמורים לכלול את שאר המפרט.

בהמשך מופיע ציר זמן מפורט של ההתקדמות שלנו בנושא אזורי CSS והחרגות CSS מאז ההצעה הראשונית שלנו ל-W3C באפריל 2011:

התקדמות ההחרגות והאזורים
ההתקדמות בהוספה של אזורים והחרגות

סיכום

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