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

Articles

تشرح هذه المقالة خصائص 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`

فقرات قابلة للقراءة

يُوصى عادةً بارتفاع سطر بين 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۔

الافتراضي: `normal`

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 مفيدة بشكل خاص في التصاميم التي تركز على الطباعة وسيناريوهات التصميم الاستجابي۔

في هذا المثال، تم تحديده على النحو التالي۔

normal: يطبق التباعد الافتراضي بين الكلمات۔ هذه هي القيمة المبدئية للمتصفح۔
4px: مثال على زيادة التباعد بين الكلمات۔ يضيف 4 بكسلات من الحافة بين كل كلمة۔
١ بكسل- :** مثال على تقليل التباعد بين الكلمات۔ يقلل المسافة بين كل كلمة وأخرى بمقدار بكسل واحد۔
التباعد بين الكلمات والحروف**: مثال على تقليل التباعد بين الكلمات والحروف۔ يقلل المسافة بين الكلمات بمقدار 0.1em وبين الحروف بمقدار 0.05em مقارنة بالوضع الطبيعي۔

استخدام القيم الإيجابية والسلبية

ضبط قيمة موجبة لـ word-spacing سيزيد من تباعد الكلمات۔ من جهة أخرى، استخدام القيم السلبية يضيق المسافات بين الكلمات۔ يمكن استخدام القيم السلبية لتأكيد التأثيرات البصرية أو لتضييق المسافات بين الحروف لأسباب تصميمية محددة۔

الفرق مع `letter-spacing`

word-spacing هو خاصية تعدل المسافة بين الكلمات، بينما letter-spacing تعدل المسافة بين الحروف۔ من خلال الجمع بين هذه الخصائص، يمكنك التحكم بشكل أكثر دقة في تصميم النصوص الكاملة۔

التحذيرات والممارسات المثلى

تعديل المسافة المفرطة: الاستخدام المفرط لـ word-spacing قد يؤدي إلى انخفاض في إمكانية القراءة۔ خاصةً أن المسافات الكبيرة جدًا أو الصغيرة جدًا قد تكون مرهِقة للمستخدمين، مما يجعل التعديلات المعتدلة مهمة۔
التصميم التفاعلي: تحديد القيم النسبية باستخدام 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 تتحكم في كيفية التفاف النص عندما يتجاوز عرض الحاوية.۔ تقوم المتصفحات عادةً بفصل السطور عند حدود الكلمات، لكن الإعدادات الخاصة يمكن أن تُحسن المظهر وسهولة القراءة عند وجود كلمات طويلة أو روابط URLs.۔

يمكنك تحديد القيم التالية لخاصية word-break.۔

normal

normal هي القيمة الافتراضية.۔ عندما يتجاوز طول الكلمة عرض الحاوية، سيتم الفصل عند حدود الكلمات.۔ هذا الإعداد شائع في لغات مثل الإنجليزية، ولا يحدث الفصل في منتصف الكلمات.۔
break-all

break-all هو إعداد يسمح بفصل الأسطر بعد أي حرف حسب الحاجة.۔ لا سيما عند تضمين كلمات طويلة أو روابط URLs، يحدث الفصل على مستوى الحروف للحفاظ على تخطيط الصفحة.۔
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}

على الأجهزة المحمولة، يكون عرض الشاشة محدودًا، مما قد يؤدي إلى تجاوز النص بما في ذلك روابط URLs أو الكلمات الطويلة لعرض الشاشة.۔ في مثل هذه الحالات، يؤدي تطبيق 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.۔ على سبيل المثال، يمكنك استخدام  (شرطة ناعمة).۔
auto: يقوم المتصفح بتطبيق تقسيم الكلمات تلقائيًا في المواضع المناسبة.۔ في هذه الحالة، يجب تحديد لغة المستند (lang attribute) بشكل صحيح.۔

ملاحظات

أهمية إعدادات اللغة: عند استخدام hyphens: auto;، فإن تقسيم الكلمات بشكل صحيح يتطلب تعيين خاصية lang للمستند HTML بشكل صحيح.۔
اعتماد الخطوط: قد لا تكون بعض الخطوط مناسبة لتقسيم الكلمات.۔
استخدام قواميس تقسيم الكلمات: تعتمد قواعد تقسيم الكلمات على القواميس التي يستخدمها المتصفح.۔ لذلك، قد لا تعمل كما هو متوقع في بعض اللغات.۔

الملخص

من خلال الاستخدام الصحيح لخاصية hyphens، يمكنك تحسين تخطيط النصوص بشكل كبير.۔ خاصة للمواقع متعددة اللغات والتصاميم المخصصة للأجهزة المحمولة، فإن الاستخدام المناسب لـ auto و manual يمكن أن يعزز تجربة المستخدم.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

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

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

YouTube Video

إنشاء HTML للمعاينة

علم الطباعة (مرتبط بهوامش النص)

خاصية line-height

الاستخدامات الرئيسية لخاصية line-height

أرقام بدون وحدة

النسبة المئوية

قيم ثابتة (px، em، rem، إلخ)

normal

أمثلة لاستخدام line-height

فقرات قابلة للقراءة

تصميم العناوين

الملخص

خاصية letter-spacing

كيفية استخدام letter-spacing

قيم مع وحدات

الافتراضي: normal

أمثلة على استخدام letter-spacing

الملخص

خاصية word-spacing

استخدام القيم الإيجابية والسلبية

الفرق مع letter-spacing

التحذيرات والممارسات المثلى

خاصية word-break

سيناريوهات تطبيق word-break

الأجهزة المحمولة والتصميم المتجاوب

خاصية hyphens

الصياغة

ملاحظات

الملخص

YouTube Video

خاصية `line-height`

الاستخدامات الرئيسية لخاصية `line-height`

`normal`

أمثلة لاستخدام `line-height`

خاصية `letter-spacing`

كيفية استخدام `letter-spacing`

الافتراضي: `normal`

أمثلة على استخدام `letter-spacing`

خاصية `word-spacing`

الفرق مع `letter-spacing`

خاصية `word-break`

سيناريوهات تطبيق `word-break`

خاصية `hyphens`