توضيح. المسافة بين الحروف والكلمات

محاذاة حسب المسافة المحددة

النظر في المحاذاة العمودية على مسافة معينة. خاصية المحاذاة العمودية بسيطة للغاية: فهي تحرك العنصر لأعلى أو لأسفل لمسافة محددة. وهكذا، فإن التعبير عمودي محاذاة: 5px؛ سيحرك العنصر لأعلى بمقدار خمس بكسلات نسبة إلى موضعه الأصلي. تعمل قيم الطول السالبة على تحريك العنصر لأسفل. هذا الشكل البسيط من المحاذاة لم يكن موجودًا في CSS1، ولكن تمت إضافته في CSS2.

من المهم أن نفهم أن النص المحاذي عموديًا لا يصبح جزءًا من سطر آخر أو يتداخل مع النص في أسطر أخرى. نلقي نظرة على الشكل. 6.18، حيث يوجد جزء من النص المحاذي عموديًا في منتصف الفقرة.

كما ترون، أي عنصر محاذ عموديًا يمكن أن يؤثر على ارتفاع الخط. تذكر وصف حاوية الخط التي يكون ارتفاعها كافيًا لاستيعاب الجزء العلوي من أطول كتلة سطر وأسفل أقصر كتلة سطر. ينطبق هذا أيضًا على الكتل المضمنة التي تم نقلها لأعلى أو لأسفل أثناء المحاذاة الرأسية.

أرز. 6.18. قد تؤدي المحاذاة العمودية إلى زيادة ارتفاع الصف

المسافة بين الحروف والكلمات

الآن بعد أن انتهينا من المحاذاة، دعنا ننتقل إلى إدارة التباعد بين الكلمات والحروف. هذه الخصائص لها أيضًا تفاصيلها الخاصة.

المسافة بين الكلمات

تسمح خاصية تباعد الكلمات بقيم طول موجبة أو سالبة. تتم إضافة هذه القيمة إلى التباعد القياسي بين الكلمات. في الأساس، يتم استخدام تباعد الكلمات لتغيير المسافة بين الكلمات. ولذلك، فإن القيمة الافتراضية العادية هي نفس القيمة صفر (0).

إذا قمت بتحديد قيمة طول موجبة، فستزيد المسافة بين الكلمات. وإذا قمت بتعيين قيمة سالبة لتباعد الكلمات، فسوف تقترب الكلمات من بعضها البعض:

174 الفصل 6. خصائص النص

p.spread (تباعد الكلمات: 0.5em؛) p.tight (تباعد الكلمات: 0.5em؛) p.base (تباعد الكلمات: عادي؛) p.norm (تباعد الكلمات: 0؛)

سيتم زيادة المسافات بين الكلمات في هذه الفقرة بمقدار 0.5 م.

سيتم تقليل المسافات بين الكلمات في هذه الفقرة بمقدار 0.5 م.

ستكون المسافات بين الكلمات في هذه الفقرة عادية.

يظهر تأثير هذه الإعدادات في الشكل. 6.19.

أرز. 6.19. تغيير المسافة بين الكلمات

حتى الآن لم أعط تعريفًا دقيقًا لمصطلح "كلمة". في مصطلحات CSS، "الكلمة" هي أي سطر لا يحتوي على أحرف محددة ويتم تحديده بواسطة أحرف محددة على كلا الجانبين. هذا التعريف ليس دلالات؛ فهو ببساطة يفترض أن المستند يحتوي على كلمات محاطة بحرف محدد واحد أو أكثر. لا يُتوقع من وكيل المستخدم الممكّن لـ CSS أن يكون قادرًا على التمييز بين كلمة وغير كلمة في جميع الحالات في لغة معينة. هذا التعريف، مهما كان، يعني أن تباعد الكلمات من غير المرجح أن ينجح في اللغات المبنية على التصوير التصويري أو أساليب الكتابة غير الرومانية. تتيح لك هذه الخاصية إنشاء مستندات غير قابلة للقراءة تمامًا، كما هو موضح بوضوح في الشكل. 6.20. يجب استخدام المسافات بين الكلمات بحذر.

أرز. 6.20. حقا مسافات طويلة بين الكلمات

تباعد الحروف

تحدث العديد من المشكلات التي تتم مواجهتها عند العمل مع تباعد الكلمات عند استخدام تباعد الأحرف. والفرق الوحيد بين الاثنين هو أن خاصية تباعد الأحرف تغير التباعد بين الأحرف أو الحروف.

كما هو الحال مع خاصية تباعد الكلمات، فإن القيمة الصالحة لتباعد الأحرف هي أي طول. الافتراضي هو الكلمة الأساسية العادية (وهو نفس تباعد الأحرف: 0). أي قيمة طول تقوم بإدخالها ستؤدي إلى زيادة أو تقليل التباعد بين الأحرف بهذا المقدار. في التين. ويبين الشكل 6.21 نتائج تطبيق العلامات التالية:

ص (تباعد الأحرف: 0؛) /* مطابق لـ "عادي" */

واسع (تباعد الحروف: 0.25 مم؛) ضيق (تباعد الحروف: 0.25 مم؛)

الحروف في هذه الفقرة متباعدة كالمعتاد.

الحروف في هذه الفقرة منتشرة قليلاً.

الحروف في هذه الفقرة محطمة بعض الشيء معًا.

أرز. 6.21. اختلاف المسافات بين الحروف

أرز. 6.22. استخدام خاصية تباعد الأحرف لجعل النص المحدد أكثر تعبيراً

يعد استخدام المسافات بين الحروف لتعزيز التركيز أسلوبًا عريقًا. يمكن للمرء كتابة الإعلان التالي والحصول على التأثير الموضح في الشكل. 6.22:

قوي (تباعد الحروف: 0.2em؛)

تحتوي هذه الفقرة وشدد بقوة على النصالذي ينتشر لمزيد من التركيز.

تباعد الكلمات والحروف ومواءمتها

يمكن أن تتأثر قيمة تباعد الكلمات بقيمة خاصية محاذاة النص. إذا كان العنصر مضبوطًا، فسيتم ضبط المسافات بين الحروف والكلمات بحيث يمتد النص إلى السطر بأكمله. وقد يؤدي هذا بدوره إلى تغيير المعلمات التي تحدد التباعد بين الكلمات والحروف، التي أعلنها المؤلف في خصائص تباعد الكلمات. إذا تم تعيين تباعد الأحرف، فلا يمكن تغييره عن طريق محاذاة النص، ولكن إذا تم ضبط تباعد الأحرف على الوضع الطبيعي، فيمكن تغيير التباعد بين الأحرف لضمان ضبط النص. لا يحدد CSS كيفية حساب المسافة البيضاء، لذلك يقوم وكيل المستخدم بإنشائها ببساطة.

يرث العنصر الفرعي القيمة المحسوبة لوالده كالمعتاد. لا يمكنك إجراء ذلك بحيث يتم توريث عامل القياس (كما هو الحال مع ارتفاع السطر) بدلاً من القيمة المحسوبة لتباعد الكلمات أو خصائص تباعد الأحرف. ونتيجة لذلك، قد تواجه المشكلة الموضحة في الشكل. 6.23:

p (تباعد الحروف: 0.25em؛ حجم الخط: 20 بكسل؛) صغير (حجم الخط: 50%؛)

هذه الفقرة الواسعة نص صغير بنفس القدر من المساحةعلى الرغم من أن المؤلف ربما أراد أن يكون التباعد متناسبًا مع حجم النص.

أرز. 6.23. المسافة الموروثة بين الحروف

عند العمل باستخدام نمط نص، يمكنك ضبط التباعد الضروري بين الأحرف والكلمات والسطور. يتم تعيين هذه المسافات في أي وحدات CSS، سواء كانت px أو pt أو em أو غيرها. الاستثناء هو النسب المئوية - يمكن استخدامها لتعيين المسافة بين الأسطر (البادئة)، لكنها لا تعمل عند ضبط التباعد بين الأحرف أو الكلمات.

تباعد الأحرف في CSS: تباعد الأحرف

يمكنك ضبط تباعد الأحرف باستخدام خاصية تباعد الأحرف في CSS. بالإضافة إلى القيم المعتادة (الإيجابية والسلبية)، يمكنك أيضًا استخدام القيم الموروثة (لوراثة القيمة من الأصل) والعادية (إذا كنت تريد إرجاع التباعد الطبيعي بين الأحرف).

مثال على كتابة الفاصل الزمني بين الأحرف:

P (تباعد الحروف: 2em؛)

التباعد بين الكلمات: تباعد الكلمات

تختلف خاصية تباعد الكلمات في CSS عن سابقتها من حيث أنها تحدد المسافة بين الكلمات، وليس بين الأحرف. تحتوي هذه الخاصية أيضًا على قيم عادية وقيم موروثة. يمكنك تحديد القيم السلبية. فيما يلي مثال لإدخال النمط:

P (تباعد الكلمات: 6 بكسل؛)

تباعد الأسطر: ارتفاع الخط

باستخدام خاصية ارتفاع الخط في CSS، يمكنك ضبط المسافة بين أسطر النص. كما قيل في بداية الموضوع، لتعيين البادئة، بالإضافة إلى وحدات القياس الأخرى، يمكنك استخدام النسب المئوية. من الممكن أيضًا كتابة القيمة كمضاعف (أرقام أكبر من 0): لحساب المسافة، سيقوم المتصفح بضرب حجم الخط بالرقم المحدد. القيم السلبية لا تعمل. القيم المتاحة طبيعية وترث.

فيما يلي مثال لكيفية القيام بتباعد الأسطر في CSS:

P (ارتفاع الخط: 180%؛ )

في لقطة الشاشة، يمكنك رؤية كيف يبدو النص مع الخصائص الثلاث:

لقطة الشاشة: التباعد في CSS

نتائج

عند ضبط المسافات بين الكلمات أو الأحرف أو الأسطر، تأكد أولاً من سهولة قراءة النص الناتج. يجب التعامل مع هذه الخصائص بعناية واستخدامها دائما باعتدال، دون تعصب، وإلا فإن كل محتوى النص يهدد بالتحول إلى مجموعة غير مقروءة من الحروف.


كقاعدة عامة، يتم ضبط القيم مسبقًا لكل خط بحجم معين المسافات بين الكلمات, المسافة بين الحروف داخل الكلمةو ارتفاع الخط البصري. تجدر الإشارة إلى أن التباعد بين الحروف المختلفة في الخطوط أحادية المسافة مثل Courier New هو نفسه دائمًا. في أنواع الخطوط الأخرى، يعتمد التباعد بين الحروف على مجموعات الحروف - في معظم الحالات يتم إصلاحه، ولكن بين بعض أزواج الحروف يتم تقليله عمدًا من أجل جعل النص بصريًا أكثر "سلاسة" وموزعًا بالتساوي. على سبيل المثال، المسافة بين الحرفين AU أقل من المسافة بين الحرفين NP، حيث أن الحرفين N و P مستقيمان الشكل، والحرفان A و U لهما شطبتان موجهتان في اتجاه واحد. إذا كانت التباعد بين الحروف هو نفسه، فإن A وU سيظهران متباعدين أكثر من H وP. ولتخفيف هذا التأثير، يتم تقليل المسافة بينهما قليلاً، مما ينتج عنه سطر نص محاذٍ بصريًا. وتعد هذه الظاهرة من أبرز مظاهر الوهم البصري.

في CSSبالنسبة للكتل النصية، يمكنك ضبط حجم المسافات بين الكلمات في النص، أي، في الأساس، تغيير حجم المسافة. يمكنك أيضًا تغيير التباعد بين الأحرف داخل الكلمة (أي إنشاء نص كثيف أو متفرق) والتحكم في ارتفاع سطر النص. ارتفاع الخط هو المسافة بين خطي الأساس لخطين متجاورين.

لا توجد نظائرها لهذه الخصائص في HTML. لا يمكن ضبط الفواصل الزمنية إلا باستخدام CSS.

خاصية تباعد الكلمات

تتيح لك هذه الخاصية ضبط المسافة بين الكلمات. يُسمح بأي وحدة طول كقيمة، سواء كانت إيجابية أو سلبية. مع القيم السلبية، تقل المسافة بين الكلمات، ومع القيم الكبيرة جدًا، يمكن أن تقترب الكلمات أكثر من اللازم أو حتى "تتصادم" مع بعضها البعض. سيؤثر هذا سلبًا على سهولة قراءة النص، لذا كن حذرًا عند تعيين مثل هذه القيم. تحديد القيم المئوية غير مسموح به.

لنلقي نظرة على مثال:

خاصية تباعد الحروف

تحدد هذه الخاصية المسافة بين الحروف داخل الكلمة. يتم ضبطه بشكل مشابه للمسافة بين الكلمات بأي وحدة طول. من الممكن تعيين قيم سلبية، حيث قد تكون الحروف قريبة جدًا من بعضها البعض أو حتى تتداخل مع بعضها البعض. لذلك، استخدمه بعناية. غير مسموح بتعيين القيمة كنسبة مئوية.

باستخدام هذه الخاصية، يمكنك توزيع الحروف، على سبيل المثال في العناوين، والتي ستبدو أصلية تمامًا. يوصى، من ناحية، بزيادة المسافة بين الحروف بشكل كبير بحيث يبرز العنوان بصريًا على خلفية النص العادي، ومن ناحية أخرى، يجب ألا تكون المسافات كبيرة جدًا بحيث لا يتم الإدراك العام النص لا يتدهور.

كلا الخصائص تباعد الكلماتو تباعد الحروفيمكن استخدامهما معًا لأنه كلما قمت بزيادة التباعد بين الحروف، من أجل الحفاظ على سهولة القراءة وفصل الكلمات، قد تحتاج إلى زيادة التباعد بين الكلمات في نفس الوقت. فيما يلي مثال نموذجي لتصميم الرأس:

H1 (تباعد الكلمات: 2 مثال؛ تباعد الحروف: 0.3 مثال)

التعامل مع المسافات بين الحروف والكلمات

1. المسافة بين الكلمات تباعد الكلمات

يضبط المسافات بين الكلمات. يمكن استخدام القيم الإيجابية والسلبية. مع معنى سلبي، يمكن للكلمات أن تتداخل مع بعضها البعض.

تتأثر قيمة تباعد الكلمات بقيمة خاصية محاذاة النص في حالة النص المضبوط. وارث.

بناء الجملة

P (تباعد الكلمات: عادي؛) p (تباعد الكلمات: 2 بكسل؛)
أرز. 1. التباعد بين الكلمات

2. تباعد الحروف

تحدد الخاصية المسافة بين الحروف (مبلغ التتبع) والرموز. يمكن أن تأخذ القيم الإيجابية والسلبية. يُنصح باستخدامه لزيادة التعبير وسهولة قراءة العناوين والتعريفات وما إلى ذلك.

بناء الجملة

P (تباعد الأحرف: عادي؛) p (تباعد الأحرف: 2 بكسل؛)
أرز. 2. تغيير المسافة بين الحروف باستخدام خاصية تباعد الحروف

3. التعامل مع المساحات البيضاء

تعالج الخاصية المسافات بين الكلمات وفواصل الأسطر داخل العنصر. غير موروث.

مساحة بيضاء
قيم:
طبيعي القيمة الافتراضية. يتم إدراج مسافة واحدة فقط بين الكلمات ويتم تجاهل المسافات الإضافية. يتم تغليف النص فقط عند الضرورة.
com.nowrap يمنع فواصل الأسطر إلا عند استخدامها
.
قبل لا يتم تجاهل المسافات في النص، ويعرض المتصفح مسافات إضافية وفواصل أسطر.
التفاف مسبق يحافظ على المسافة البيضاء في النص عن طريق إضافة فواصل أسطر عند الضرورة.
ما قبل الخط يزيل المسافات الزائدة إلا إذا
.
أولي يضبط قيمة الخاصية على القيمة الافتراضية.
يرث يرث قيمة الخاصية من العنصر الأصل.

بناء الجملة

P (مسافة بيضاء: عادي؛) p (مسافة بيضاء: nowrap؛) p (مسافة بيضاء: ما قبل؛) p (مسافة بيضاء: التفاف مسبق؛) p (مسافة بيضاء: سطر مسبق؛)

4. تحديد حجم علامة التبويب

لتغيير مقدار المسافة البادئة التي تم الحصول عليها باستخدام المفتاح TAB، استخدم خاصية tab-size. يتم تجاهل قيم الخاصية عند ضبط خاصية المسافة البيضاء على إحدى القيم الثلاث pre-line أو Normal أو nowrap.

يعمل فقط للعناصر