Articles
מבוא ל-CSS
מאפייני CSS לתצוגת קוד וציטוטים

מאפייני CSS לתצוגת קוד וציטוטים

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

באפשרותך ללמוד על תכונות CSS הקשורות לתצוגת קוד וציטוטים, כמו quotes ו-user-select, כולל המקרים בהם ניתן להשתמש בהן וכיצד לכתוב אותן.

YouTube Video

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

css-code-quotation.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-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

מאפייני CSS לתצוגת קוד וציטוטים

מאפיין white-space 

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

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

ערכים מרכזיים של white-space

  • normal הוא ערך ברירת המחדל שבו מספר רווחים מאוחדים לרווח אחד בלבד, ושבירות שורה מתרחשות אוטומטית.
  • nowrap מאחד רווחים לרווח אחד אך מונע שבירות שורה. התוכן מוצג בשורה אחת בלבד.
  • pre שומר על רווחים ושבירות שורה כפי שהם. אין התרחשות של שבירת שורה.
  • pre-wrap שומר על רווחים ושבירות שורה אך מאפשר שבירת שורה.
  • pre-line מאחד רווחים אך שומר על שבירות שורה ומאפשר שבירת שורה.
  • break-spaces שומר על רווחים ושבירות שורה, תוך מתן אפשרות לשבור מילים ארוכות או רווחים ריקים.

מאפיין overflow-wrap 

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

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

בדוגמה זו, עם normal, מילים ארוכות עשויות לחרוג מהמכולה ולגרום לגלילה אופקית, אך break-word מכריח מילים ארוכות להישבר.

ערכי המאפיין

overflow-wrap כולל בעיקר שני ערכים:.

  • normal

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

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

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

ההבדלים בין overflow-wrap ותכונות אחרות

תכונות דומות ל-overflow-wrap כוללות את word-break ו-white-space.

ההבדל מ-word-break

word-break מגדיר כיצד מתמודדים עם מילים שלמות, בעוד ש-overflow-wrap מפעיל שבירה רק כאשר מילה חורגת מרוחב המיכל. לדוגמה, word-break: break-all; שובר מילים בכל מיקום, גם אם הן לא ארוכות, בעוד ש-overflow-wrap משבר מילים רק כשהן חורגות מהמיכל.

ההבדל מ-white-space

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

לדוגמה, white-space: nowrap; מבטיח שכל הטקסט יישאר בשורה אחת ללא שבירת שורות. מצד שני, overflow-wrap שולט בשבירת הטקסט.

שימושים מעשיים

overflow-wrap שימושי במיוחד במצבים הבאים:.

  1. הצגת כתובות URL: מונע בעיות פריסה בעת הצגת כתובות URL ארוכות.
  2. מונחים טכניים: מטפל במקרים שבהם מילים אנגליות רציפות או מונחים טכניים חורגים מרוחב המיכל.
  3. עיצוב רספונסיבי: מבטיח שטקסט ארוך לא יגרום לשבירת הפריסה גם במסכים קטנים.

תכונת quotes 

1q {
2    quotes: "(" ")" "[" "]";
3}

תכונת quotes משמשת להתאמה אישית של סימני ציטוט. בדרך כלל, סימני הציטוט מוכנסים אוטומטית בעת עטיפת תוכן של אלמנטים <blockquote> או <q>, אך שימוש בתכונת quotes מאפשרת להגדיר סימני ציטוט מותאמים אישית.

בדוגמה זו, סוגריים עגולים ((, )) משמשים כסימני ציטוט חיצוניים. בנוסף, סימני ציטוט מקוננים מיוצגים על ידי סוגריים מרובעים ([, ]).

תחביר 

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

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

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

נקודות עיקריות על quotes

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

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

תכונת user-select 

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

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

  • ניתן להשתמש בזה גם לבחירה מרוכזת של קוד מקור.

  • בדוגמה זו, ניתן לבחור את הטקסט של הפסקה הראשונה, אך הטקסט של הפסקה השנייה לא ניתן לבחירה. במחלקת select-all, מאפיין ה-user-select מוגדר כ-all, ומאפשר לבחור את כל האלמנט בבת אחת.

תחביר 

1element {
2    user-select: auto | none | text | all | contain;
3}

ניתן להגדיר את מאפיין ה-user-select עם הערכים הבאים:.

  • auto: משתמש בהתנהגות ברירת המחדל של הדפדפן. בחירת טקסט מותרת ברוב האלמנטים, אך עשויה להיות מוגבלת על אלמנטים אינטראקטיביים כמו כפתורים וקישורים.
  • none: בחירת טקסט מושבתת לחלוטין. משתמשים לא יוכלו לבחור טקסט בתוך האלמנט הזה.
  • text: מאפשר לבחור רק את הטקסט בתוך האלמנט.
  • all: כל האלמנט נבחר בבת אחת. במקום בחירה חלקית, כל האלמנט נבחר בשלמותו.
  • contain: נתמך רק על ידי חלק מהדפדפנים. מאפשר לבחור רק את האלמנט במקום שבו לחצו.

דפדפנים נתמכים

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

  • Chrome: נתמך
  • Firefox: נתמך
  • Safari: נתמך (דורש תחילית -webkit-)
  • Edge: נתמך
  • Internet Explorer: לא נתמך

שימושים עיקריים

מאפיין ה-user-select מציע את היתרונות הבאים.

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

סיכום

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

מאפיין tab-size 

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}
  • מאפיין tab-size משמש להתאמה אישית של הרווח עבור תווי טאב. ברירת מחדל, רוחב הטאב מוגדר בדרך כלל ל-8 רווחים, אך ניתן להתאימו לכל ערך באמצעות מאפיין tab-size.

תחביר 

1element {
2    tab-size: length | number;
3}

מאפיין tab-size יכול לקבל את סוגי הערכים הבאים.

  • number: קובע את רוחב תו הטאב במונחים של ספירת תווים. ניתן להגדיר מספר שלם או מספר עשרוני.
  • length: קובע את רוחב תו הטאב באמצעות יחידות אורך (לדוגמה, px, em).

הערות

  • מאפיין tab-size משמש בדרך כלל עם גופנים בצפיפות אחידה (monospace). כאשר משתמשים בו עם גופנים פרופורציונליים, רוחב הטאב עשוי להפוך ללא אחיד.

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

סיכום

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

מאפיין text-indent 

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}
  • מאפיין text-indent משמש להגדיר הזחה לשורה הראשונה של הטקסט בתוך רכיב בלוק במרחק מוגדר. מאפיין זה מאפשר לך לעצב אך ורק את השורה הראשונה בפסקה.

תחביר 

1element {
2    text-indent: length | percentage;
3}

מאפיין text-indent יכול לקבל את סוגי הערכים הבאים.

  • length: קובע את רמת ההזחה באמצעות יחידות אורך (לדוגמה, px, em).
  • percentage: קובע את רמת ההזחה כאחוז מתוך רוחב רכיב המכל.

הערות

  • text-indent חל רק על אלמנטים בלוקים. אין לו שום השפעה על אלמנטים בתוך שורה.

סיכום

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

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

YouTube Video

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