Articles
מבוא ל-CSS
מאפייני CSS הקשורים למרווחי טקסט

מאפייני CSS הקשורים למרווחי טקסט

מאמר זה מסביר את מאפייני ה-CSS הקשורים למרווחי טקסט.

ניתן ללמוד על השימוש ואופן הכתיבה של מאפיינים כמו line-height ו word-spacing.

YouTube Video

יצירת HTML לתצוגה מקדימה

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

טיפוגרפיה (קשור למרווחי טקסט)

מאפיין line-height 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height הוא מאפיין CSS המשמש לקביעת מרווח השורות (גובה השורה). line-height מגדיר את הרווח האנכי בין השורות, ומשמש לשיפור הקריאות או להתאמת המרווח כחלק מהעיצוב.

שימושים עיקריים במאפיין line-height

מספרים ללא יחידות מידה 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • מגדיר גובה ביחס לגודל הגופן. לדוגמה, הגדרה של 1.5 תקבע שגובה השורה יהיה פי 1.5 מגודל הגופן. שיטה זו שימושית לעיצוב רספונסיבי.
אחוזים 
1p {
2    line-height: 150%;
3}
  • מגדיר את גובה השורה כאחוז מגודל הגופן. לדוגמה, הגדרה של 150% תקבע שגובה השורה יהיה 150% מגודל הגופן.
ערכים קבועים (px, em, rem וכו') 
1p {
2    line-height: 20px;
3}
  • מגדיר את גובה השורה ביחידות מוחלטות. לדוגמה, ניתן להגדיר ערך מוחשי כמו 20px, אך עשוי להיות חסר גמישות בעיצוב רספונסיבי.
normal 
1p {
2    line-height: normal;
3}
  • הגדרה של normal תשתמש בהגדרות ברירת המחדל של דפדפן למרווח השורות. לרוב, זה יהיה בערך פי 1.2 עד פי 1.4 מגודל הגופן.

דוגמאות לשימוש במאפיין line-height

פסקאות קריאות
  • מומלץ בדרך כלל להשתמש ב-line-height בסביבות 1.5 עד 1.6 לשיפור הקריאות. אם רווחי השורות צרים מדי, הטקסט יהיה צפוף וקשה לקריאה, ואם הם רחבים מדי, הטקסט ירגיש מקוטע.
עיצוב כותרות
  • בכותרות ובשמות בהם הטקסט גדול יותר, ניתן להקטין את רווחי השורות. הגדרות כמו 1.1 או 1.2 נפוצות לשימוש.

סיכום

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

שימוש נכון בתכונה זו יכול לשפר את קריאות הטקסט ולהעלות את איכות העיצוב שלו.

תכונת letter-spacing 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

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

בדוגמה זו, מוגדרת התכונה כך.

  • normal: ריווח ברירת המחדל בין האותיות. זהו ערך סטנדרטי שנקבע על ידי הדפדפן והגופן.
  • 4px: דוגמה לרווח אותיות מורחב. מוסיף 4 פיקסלים של רווח בין כל תו.
  • -1px: דוגמה לריווח אותיות צר. מפחית פיקסל אחד של רווח בין כל תו.

כיצד להשתמש ב-letter-spacing

ערכים עם יחידות 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • הגדרת ערך חיובי תגדיל את ריווח האותיות.
  • הגדרת ערך שלילי תקטין את ריווח האותיות.
  • היחידות הן בדרך כלל px (פיקסלים) או em.
ברירת מחדל: רגיל 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • השתמש במרווח האותיות המוגדר כברירת מחדל. בדרך כלל, מוחל מרווח האותיות הסטנדרטי המוגדר על ידי הגופן.

דוגמאות לשימוש ב-letter-spacing

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

סיכום

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

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

תכונת word-spacing 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

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

בדוגמה זו, מוגדרת התכונה כך.

  • רגיל: מיישם את מרווח המילים המוגדר כברירת מחדל. זוהי הערך ההתחלתי של הדפדפן.
  • 4px: דוגמה להגדלת מרווח המילים. מוסיף מרווח של 4 פיקסלים בין כל מילה.
  • -1px: דוגמה להקטנת מרווח המילים. מצמצם את המרווח בין כל מילה ב-1 פיקסל.
  • רווח בין מילים ואותיות: דוגמה להקטנת הרווחים בין מילים ואותיות. מקטין את הרווחים בין מילים ב-0.1em ובין אותיות ב-0.05em בהשוואה למצב רגיל.

שימוש בערכים חיוביים ושליליים

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

הבדל מול רווח-בין-אותיות

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

הזהרות ונהלים מומלצים

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

תכונת word-break 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

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

ניתן לציין את הערכים הבאים עבור תכונת ה-word-break:.

  • normal

    normal הוא הערך ברירת המחדל. כאשר מילה חורגת מרוחב המיכל, היא תישבר בגבולות המילים. הגדרה זו נפוצה בשפות כמו אנגלית, ושבירות אינן מתרחשות באמצע מילים.

  • break-all

    break-all הוא הגדרה שבה ניתן להוסיף שבירות שורה לאחר כל תו, לפי הצורך. במיוחד כאשר ישנן מילים ארוכות או כתובות URL, שבירות שורה מתבצעות ברמת התווים כדי למנוע הפרעות בפריסה.

  • keep-all

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

דוגמה זו מראה שלוש הגדרות שונות של word-break. עם word-break-normal, כל המילה נשמרת ושבירות מתרחשות בגבולות מילים אם היא חורגת מרוחב המיכל. עם word-break-break-all, מתרחשות שבירות גם באמצע מילים. word-break-keep-all מאפשר שבירות טבעיות לשפות אסיאתיות כמו יפנית ושבירות בגבולות מילים עבור אנגלית.

תסריטי יישום של word-break

מכשירים ניידים ועיצוב רספונסיבי 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

במכשירים ניידים, רוחב המסך מוגבל, מה שעלול לגרום לטקסט כולל כתובות URL או מילים ארוכות לחרוג מרוחב המסך. במקרים כאלו, שימוש ב-word-break: break-all; מאפשר שבירות שורה ברמת התווים להתאמה לרוחב המסך, ומשפר את הקריאות.

תכונת hyphens 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

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

  • מכיוון שכללי החלוקה עם מקפים משתנים לפי שפה, תכונה זו תלויה במיקום השפה של הטקסט.

תחביר 

1element {
2    hyphens: none | manual | auto;
3}

ניתן להגדיר את תכונת hyphens לערכים הבאים:.

  • none: לא נעשית חלוקה עם מקפים. מילים יישברו בדרך כלל רק בסוף המילה.
  • manual: חלוקת מילים עם מקפים מתבצעת ידנית. במקרה זה, יש להגדיר נקודות חלוקה עם מקפים ידנית בתוך ה-HTML. לדוגמה, ניתן להשתמש ב-&shy; (מקף רך).
  • auto: הדפדפן מחלק את המילים עם מקפים באופן אוטומטי במיקומים מתאימים. במקרה זה, יש להגדיר את שפת המסמך (lang attribute) בצורה נכונה.

הערות

  • חשיבות הגדרות השפה: כאשר משתמשים ב-hyphens: auto;, חלוקה תקינה עם מקפים דורשת שה-lang ב-HTML יוגדר כראוי.
  • תלות בפונטים: חלק מהפונטים לא מתאימים לחלוקה עם מקפים.
  • שימוש במילוני חלוקה עם מקפים: כללי החלוקה תלויים במילונים שבהם עושה שימוש הדפדפן. לכן, הדבר עשוי לא לעבוד כמצופה עבור שפות מסוימות.

סיכום

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

מאפייני CSS הקשורים לטקסטמאפייני CSS לתצוגת קוד וציטוטים