ניהול מקפים באמצעות CSS

Joe Medley
Joe Medley

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

במודול טקסט ל-CSS ברמה 3 מוגדר מאפיין מקפים כדי לקבוע מתי המקפים יוצגו למשתמשים ואיך הם יתנהגו כשיוצגו. החל מגרסה 55, Chrome מטמיע את מאפיין המקפים. לפי המפרט, למאפיין המקפים יש שלושה ערכים: none, manual ו-auto. כדי להמחיש זאת צריך להשתמש במקף רך (­), כמו בדוגמה הבאה.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

מקף רך הוא מקף רך שמוצג רק כשהוא מתרחש בשוליים שבסיום. האופן שבו המקף מעובד ב-Chrome מגרסה 55 ואילך תלוי בערך של מאפיין hypens ב-CSS.

-webkit-hyphens: manual;
hyphens: manual;

השילוב בין השיטות האלה נותן תוצאה כזו:

צילום מסך של שורה אחת

שימו לב שלא ניתן לראות את המקף הרך. בכל המקרים, כשמילה שמכילה את המקף הרך מופיעה בשורה אחת, המקף יהיה בלתי נראה. עכשיו נראה איך מתנהגים כל שלושת הערכים של המקף.

ללא שימוש

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

Google ipsum dolor sit amet, consectetur adipiscing elit.

ידנית

בדוגמה השנייה, מאפיין המקפים מוגדר ל-manual, כלומר המקף הרך יופיע רק כשהשוליים ישריכו את המילה 'elit'. שוב, אפשר לוודא זאת על ידי שינוי גודל החלון.

Google ipsum dolor sit amet, consectetur adipiscing elit.

שימוש במצב אוטומטי

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

Google ipsum dolor sit amet, consectetur adipiscing elit.