خصائص CSS لعرض الكود والاقتباسات

Articles

توضح هذه المقالة خصائص 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 مفيد خصوصًا في الحالات التالية:۔

عرض عناوين URL: يمنع مشاكل التخطيط عند عرض عناوين URL الطويلة۔
المصطلحات التقنية: يتعامل مع الحالات التي تتجاوز فيها الكلمات الإنجليزية المتصلة أو المصطلحات التقنية عرض الحاوية۔
التصميم التفاعلي: يضمن أن النص الطويل لا يعطل التخطيط حتى على الشاشات الصغيرة۔

خاصية `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 عادةً مع الخطوط الأحادية العرض۔ عند استخدامها مع الخطوط النسبية، قد يصبح عرض التبويب غير متساوٍ۔
عند تحديد عدد الأحرف، يجب الانتباه إلى التوافق مع القياس على أجهزة مختلفة۔

الملخص

استخدام خاصية 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.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بتباعد النصوص خصائص CSS المتعلقة بنموذج الصندوق

خصائص CSS لعرض الكود والاقتباسات

YouTube Video

HTML للمعاينة

خصائص CSS لعرض الكود والاقتباسات

خاصية white-space

القيم الرئيسية لخاصية white-space

خاصية overflow-wrap

قيم الخاصية

الاختلافات بين overflow-wrap والخصائص الأخرى

الفرق عن word-break

الفرق عن white-space

حالات الاستخدام العملية

خاصية quotes

الصياغة

النقاط الرئيسية لخاصية quotes

خاصية user-select

الصياغة

المتصفحات المدعومة

الاستخدامات الرئيسية

الملخص

خاصية tab-size

الصياغة

ملاحظات

الملخص

خاصية text-indent

الصياغة

ملاحظات

الملخص

YouTube Video

خاصية `white-space`

القيم الرئيسية لخاصية `white-space`

خاصية `overflow-wrap`

الاختلافات بين `overflow-wrap` والخصائص الأخرى

الفرق عن `word-break`

الفرق عن `white-space`

خاصية `quotes`

النقاط الرئيسية لخاصية `quotes`

خاصية `user-select`

خاصية `tab-size`

خاصية `text-indent`