עימוד דפים מרובי עמודות עם CSS3 Multi-column

16 בספטמבר 2012

no comments

עימוד דפים מרובי עמודות עם CSS3 Multi-column

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

במשך שנים, עיצוב מרובה עמודות היה אחד היתרונות של עולם ה- Print לעומת ה- Web, אך עם CSS3, יש לנו תמיכה מצויינת בעימוד דפים מרובי עמודות עם CSS3 Multi-column, ללא צורך ב- JavaScript.

נכון לכתיבת הפוסט הזה, תקן ה- W3C של CSS Multi-column Layout נמצא בשלב של Candidate Recommendation ומשולב בדפדפנים רבים (והחל מאקספלורר 10).

מדריך: שימוש ב- CSS3 Multi-column ליצירת עימוד מרובה עמודות

נתחיל מאלמנט div פשוט המכיל את כל תוכן הכתבה. בדוגמא הבאה ישנן מספר פסקאות של טקסט דוגמא מתוך Lorem Ipsum ובו 2 משולבות 2 תמונות.

<div id="multicol">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis velit id nulla mattis adipiscing in vel. 
    Duis venenatis, nulla id tempus posuere, odio mauris suscipit nulla, sit amet fringilla lacus diam ac neque. 
    Praesent vel bibendum ipsum. Pellentesque ultrices elementum sapien, vel vestibulum nisi scelerisque in. 
    Maecenas porta mauris a felis posuere eleifend. Aliquam erat volutpat. Donec viverra euismod lectus quis 
    placerat. Integer aliquam velit ut augue luctus porttitor.
  </p>
  <p>
    Nullam et enim risus, eu porttitor neque. Pellentesque auctor tellus quis nibh tempor ornare. 
    Aenean lacinia molestie dignissim. Proin sapien dui, posuere at lacinia id, eleifend sed dui.
    Nullam iaculis eros at quam auctor dapibus. Aliquam consectetur libero id elit euismod fermentum. 
    Aenean at orci sit amet justo consequat volutpat vulputate eu nunc. Sed dapibus, nisi sed porttitor ornare, 
    tortor nisl consectetur nisi, nec tristique neque ipsum vel lacus.
  </p>
  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5" />
  <p>
    Integer interdum urna at urna consectetur hendrerit. Proin pulvinar lorem diam, quis rutrum velit. 
    Aliquam mattis lectus faucibus felis rhoncus sed pharetra enim dignissim. Nam eu libero quam. Fusce sem ante, 
    auctor non aliquet a, volutpat ac elit. Vestibulum aliquet, augue non fringilla fringilla, tortor sem 
    viverra dui, quis hendrerit lorem elit ac ante. Sed luctus hendrerit ante, sit amet scelerisque justo 
    aliquam id. Quisque suscipit malesuada odio ut mattis. Nam fringilla augue lobortis orci facilisis hendrerit. 
    Donec vel odio lorem. Nam et sapien velit, at auctor metus. Vestibulum pulvinar congue quam sed condimentum. 
    Donec in dolor quis sapien vestibulum suscipit. Quisque suscipit congue molestie. Maecenas vulputate 
    aliquet feugiat.
  </p>
  <p>
    In luctus posuere diam sed dictum. Morbi consectetur, nisl vitae gravida faucibus, diam sapien commodo est, 
    elementum tincidunt nunc velit vel arcu. Aliquam molestie sollicitudin massa, eget adipiscing metus 
    euismod vel. Cras et dignissim mi. Fusce in massa vel nunc bibendum pulvinar ac quis enim. Morbi consequat 
    imperdiet nunc, nec venenatis risus aliquet id. Cras varius eros id tellus eleifend vel aliquam leo . 
    Fusce ullamcorper mattis eleifend. Nam ante nibh, cursus nec feugiat ac, laoreet vel mauris. Cras vulputate 
    quam in eros fermentum vulputate. Aenean luctus neque a ligula iaculis non tincidunt tellus egestas. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu eros metus. Integer accumsan accumsan 
    a fringilla.
  </p>
  <p>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi a ligula 
  sed lacus vehicula eleifend eu a nisi. Curabitur nibh odio, vulputate eu fermentum ac, scelerisque sit 
  amet massa. Cras interdum porttitor iaculis. Donec at fringilla augue. Proin libero orci, posuere vitae 
  porttitor at, vehicula eu leo. In cursus interdum odio, nec dignissim diam posuere nec.
  </p>
  <p>
    Nam sodales, sapien ut bibendum fringilla, massa mi hendrerit erat, ut dapibus quam nisl dapibus mi. 
    Nam id nulla enim, in malesuada eros. Curabitur pellentesque dui vel nunc facilisis quis porttitor diam 
    laoreet. Morbi fermentum magna pretium sapien posuere tempus. Nulla quam est, dictum et laoreet eget, 
    vulputate vitae nunc. Integer eget nunc sem. Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos.
  </p>
  <p>
    Curabitur sagittis commodo libero at interdum. Aliquam eget risus lectus, eget euismod est. Cras fermentum 
    elit non justo tempus viverra. Mauris eu tortor ut metus gravida dignissim in fringilla ipsum. Vestibulum 
    bibendum tincidunt eros, in aliquet massa viverra a. Praesent sed egestas dolor. Morbi semper porttitor mi, 
    vitae cursus tellus sodales et. Vivamus luctus, ligula pellentesque gravida bibendum, ante tellus convallis 
    massa, eget aliquam nunc mi sed sem. Maecenas posuere odio id dolor viverra eget vehicula lectus volutpat.
  </p>
  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5" />
  <p>
    Suspendisse vitae dolor sit amet ligula imperdiet ultricies a a felis. Donec fermentum sodales ligula. 
    In hac habitasse platea dictumst. Phasellus cursus lacinia vehicula. Mauris nisi eros, tristique a faucibus 
    quis, consequat nec odio. Quisque suscipit scelerisque est sit amet facilisis. Cras nunc orci, iaculis dictum 
    varius ac, mattis vel risus. Sed commodo leo non dui ornare eget laoreet tellus imperdiet. Suspendisse 
    tristique mauris a orci venenatis ullamcorper lobortis justo egestas. Suspendisse eu magna et orci venenatis 
    euismod. Ut tortor tellus, dapibus non pharetra eu, pulvinar eu ante. Nulla quis velit ante, id aliquet ligula. 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus 
    pulvinar metus ut nunc consequat dapibus. Donec eleifend volutpat dictum. Etiam congue, ligula vel rhoncus 
    vehicula, turpis ipsum tristique erat, quis vehicula lorem sapien in ligula.
  </p>
</div>

אם נציג דף זה בדפדפן, נקבל את התוצאה הבאה:

עימוד דפים מרובי עמודות עם CSS3 Multi-column

קביעת מספר ורוחב העמודות

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

לדוגמא: נקבע את רוחב העמודות להיות 280pxבאופן הבא:

<style type="text/css">
  #multicol {
    -moz-column-width: 280px;
    -webkit-column-width: 280px;
    column-width: 280px;
  }
</style>

הערה: השימוש ב- vendor prefixes אינו נחוץ כאשר בונים אפליקציית Windows 8 ב- HTML5 ו- JavaScript כיוון שהתצוגה מבוססת על מנוע התצוגה של אינטרנט אקספלורר 10.

עימוד דפים מרובי עמודות עם CSS3 Multi-column

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

עימוד דפים מרובי עמודות עם CSS3 Multi-column

column-count

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

<style type="text/css">
  #multicol {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
</style>

מאחר וקבענו את ערך המאפיין column-count להיות 3, נקבל בהכרח 3 עמודות, לא משנה מה רוחב התצוגה שלנו:

עימוד דפים מרובי עמודות עם CSS3 Multi-column

column-gap

ניתן להוסיף הגדרת מרווח בין העמודות ע”י שימוש במאפיין column-gap. לדוגמא, נגדיר מרווח של 50px בין כל עמודה.

<style type="text/css">
  #multicol {
    text-align: justify;

    -webkit-column-width: 280px;
    -moz-column-width: 280px;
    column-width: 280px;

    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
  }
</style>

התוצאה:

עימוד דפים מרובי עמודות עם CSS3 Multi-column

column-rule

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

#multicol {
  -webkit-column-rule: 2px solid #ccc;
  -moz-column-rule: 2px solid #ccc;
  column-rule: 2px solid #ccc;
}

הפורמט בו נציין את מראה הקו המפריד בין הטורים זהה לפורמט בו אנחנו מגדירים border.

עימוד דפים מרובי עמודות עם CSS3 Multi-column

סיכום

השימוש ב- CSS3 Multi-column Layout מאפשר להביא עיצוב טיפוסי מעולם ה- print לעולם ה- Web או לאפליקציות Windows 8 בצורה נוחה וידידותית לקורא.

Add comment
facebook linkedin twitter email