طباعة CSS

في هذا المنشور سأتحدث عن تنسيق النص باستخدام CSS ، باستخدام الخصائص التالية:

• text-transform
• text-decoration
• text-align
• vertical-align
• line-height
• text-indent
• text-align-last
• word-spacing
• letter-spacing
• text-shadow
• white-space
• tab-size
• writing-mode
• hyphens
• text-orientation
• direction
• line-break
• word-break
• overflow-wrap

text-transform

يمكن لهذه الخاصية تحويل حالة العنصر.

هناك 4 قيم صالحة:

• capitalizeلتكبير الحرف الأول من كل كلمة
• uppercaseلتكبير كل النص
• lowercaseلصغير كل النص
• noneلتعطيل تحويل النص ، يتم استخدامه لتجنب وراثة الخاصية

مثال:

p {
  text-transform: uppercase;
}

text-decoration

هذه الخاصية هي Sed لإضافة زخارف على النص ، بما في ذلك

• underline
• overline
• line-through
• blink
• none

مثال:

p {
  text-decoration: underline;
}

يمكنك أيضًا ضبط نمط الزخرفة واللون.

مثال:

p {
  text-decoration: underline dashed yellow;
}

قيم النمط الصالحة هيsolidوdoubleوdottedوdashedوwavy.

يمكنك القيام بكل شيء في سطر واحد ، أو استخدام الخصائص المحددة:

• text-decoration-line
• text-decoration-color
• text-decoration-style

مثال:

p {
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-style: dashed;
}

text-align

بشكل افتراضي ، يكون لمحاذاة النص الامتدادstartالقيمة ، بمعنى أن النص يبدأ بـ "البداية" ، الأصل 0 ، 0 من المربع الذي يحتوي عليه. هذا يعني أن أعلى اليسار في اللغات التي تُكتب من اليسار إلى اليمين ، وأعلى اليمين باللغات التي تُكتب من اليمين إلى اليسار.

القيم الممكنةstartوendوleftوrightوcenterوjustify(من الجيد أن يكون لديك تباعد ثابت عند نهايات السطر):

p {
  text-align: right;
}

vertical-align

يحدد كيفية محاذاة العناصر المضمنة رأسياً.

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

ثم لدينا الكلمات الرئيسية:

• baseline(الافتراضي) ، يحاذي الخط الأساسي مع الخط الأساسي للعنصر الأصل
• subيجعل عنصرًا مكتوبًا ، محاكياً ملفsubنتيجة عنصر HTML
• superيجعل عنصرًا مكتوبًا بأحرف مرتفعة ، محاكياً تنسيقsupنتيجة عنصر HTML
• topقم بمحاذاة الجزء العلوي من العنصر إلى أعلى السطر
• text-topقم بمحاذاة الجزء العلوي من العنصر إلى الجزء العلوي من خط العنصر الأصلي
• middleقم بمحاذاة منتصف العنصر إلى منتصف خط الأصل
• bottomقم بمحاذاة الجزء السفلي من العنصر إلى أسفل الخط
• text-bottomقم بمحاذاة الجزء السفلي من العنصر إلى أسفل خط العنصر الأصلي

line-height

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

p {
  line-height: 0.9rem;
}

text-indent

مسافة بادئة للسطر الأول من الفقرة بطول معين أو نسبة من عرض الفقرة:

p {
  text-indent: -10px;
}

text-align-last

بشكل افتراضي ، تتم محاذاة السطر الأخير من الفقرة بعدtext-alignالقيمة. استخدم هذه الخاصية لتغيير هذا السلوك:

p {
  text-align-last: right;
}

word-spacing

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

يمكنك استعمال الnormalالكلمة الأساسية لإعادة تعيين القيم الموروثة أو استخدام قيمة الطول:

p {
  word-spacing: 2px;
}
span {
word-spacing: -0.2em;
}

letter-spacing

يعدل التباعد بين كل حرف.

يمكنك استعمال الnormalالكلمة الأساسية لإعادة تعيين القيم الموروثة أو استخدام قيمة الطول:

p {
  letter-spacing: 0.2px;
}
span {
letter-spacing: -0.2em;
}

text-shadow

تطبيق الظل على النص. افتراضيًا ، يكون للنص الآن ظل.

تقبل هذه الخاصية لونًا اختياريًا ومجموعة من القيم التي يتم تعيينها

• إزاحة X للظل من النص
• إزاحة Y للظل من النص
• نصف قطر التمويه

إذا لم يتم تحديد اللون ، فسيستخدم الظل لون النص.

أمثلة:

p {
  text-shadow: 0.2px 2px;
}
span {
text-shadow: yellow 0.2px 2px 3px;
}

white-space

يضبط كيفية تعامل CSS مع المساحة البيضاء والأسطر وعلامات التبويب الجديدة داخل عنصر.

القيم الصالحة التي تنهار المسافة البيضاء هي:

• normalينهار الفضاء الأبيض. يضيف أسطرًا جديدة عند الضرورة عندما يصل النص إلى نهاية الحاوية
• nowrapينهار الفضاء الأبيض. لا يضيف سطرًا جديدًا عندما يصل النص إلى نهاية الحاوية ، ويمنع أي فاصل أسطر يُضاف إلى النص
• pre-lineينهار الفضاء الأبيض. يضيف أسطرًا جديدة عند الضرورة عندما يصل النص إلى نهاية الحاوية

القيم الصالحة التي تحافظ على المسافة البيضاء هي:

• preيحافظ على المساحة البيضاء. لا يضيف سطرًا جديدًا عندما يصل النص إلى نهاية الحاوية ، ولكنه يحافظ على فاصل الأسطر المضاف إلى النص
• pre-wrapيحافظ على المساحة البيضاء. يضيف أسطرًا جديدة عند الضرورة عندما يصل النص إلى نهاية الحاوية

tab-size

يضبط عرض حرف الجدولة. بشكل افتراضي هو 8 ، ويمكنك تعيين قيمة عدد صحيح تحدد مسافات الأحرف التي يستغرقها ، أو قيمة طول:

p {
  tab-size: 2;
}
span {
tab-size: 4px;
}

writing-mode

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

القيم التي يمكنك استخدامها هي

• horizontal-tb(إفتراضي)
• vertical-rlتم وضع المحتوى عموديًا. يتم وضع خطوط جديدة على يسار السابق
• vertical-lrتم وضع المحتوى عموديًا. يتم وضع خطوط جديدة على يمين السابق

hyphens

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

القيم الصالحة هي

• none(إفتراضي)
• manualفقط أضف واصلة عندما يكون هناك بالفعل واصلة مرئية أو واصلة مخفية (حرف خاص)
• autoإضافة واصلات عند تحديد النص يمكن أن يحتوي على واصلة.

text-orientation

متيwriting-modeفي الوضع الرأسي ، يحدد اتجاه النص.

القيم الصالحة هي

• mixedهو الإعداد الافتراضي ، وإذا كانت اللغة عمودية (مثل اليابانية) ، فإنها تحافظ على هذا الاتجاه ، بينما يتم تدوير النص المكتوب باللغات الغربية
• uprightيجعل كل النص موجهًا عموديًا
• sidewaysيجعل كل النص موجهًا أفقيًا

direction

يحدد اتجاه النص. القيم الصالحة هيltrوrtl:

p {
  direction: rtl;
}

word-break

تحدد هذه الخاصية كيفية فصل الأسطر داخل الكلمات.

• normal(افتراضي) يعني أن النص مقسم فقط بين الكلمات ، وليس داخل الكلمة
• break-allيمكن للمتصفح كسر كلمة (ولكن لا يتم إضافة واصلات)
• keep-allقمع التغليف الناعم. تستخدم في الغالب لنص CJK (صيني / ياباني / كوري).

الحديث عن نص CJK ، الخاصيةline-breakيستخدم لتحديد كيفية كسر أسطر النص. أنا لست خبيرًا بهذه اللغات ، لذا سأتجنب تغطيتها.

overflow-wrap

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

تُعرف هذه الخاصية أيضًا باسمword-wrap، على الرغم من أن هذا غير قياسي (لكنه لا يزال يعمل كاسم مستعار)

هذا هو السلوك الافتراضي (overflow-wrap: normal;).

يمكننا ان نستخدم:

p {
  overflow-wrap: break-word;
}

لكسرها على طول الخط بالضبط ، أو

p {
  overflow-wrap: anywhere;
}

إذا رأى المتصفح أن هناك فرصة التفاف بسيط في مكان ما في وقت سابق. لا يتم إضافة واصلات ، في أي حال.

هذه الخاصية تشبه إلى حد كبيرword-break. قد نرغب في اختيار هذا على اللغات الغربية ، بينماword-breakمعاملة خاصة للغات غير الغربية.

المزيد من دروس css:

• دليل Flexbox
• CSS Grid Tutorial
• متغيرات CSS (خصائص مخصصة)
• مقدمة إلى PostCSS
• خاصية هامش CSS
• كيفية توسيط عنصر باستخدام CSS
• خطوط نظام CSS
• كيفية طباعة HTML الخاص بك بأسلوب
• دليل تمهيدي لانتقالات CSS
• برنامج تعليمي للرسوم المتحركة CSS
• مقدمة في CSS
• دليل CSS
• كيفية إعداد Tailwind مع PurgeCSS و PostCSS
• ورقة الغش في Tailwind
• كيفية تدوير صورة باستخدام CSS بشكل مستمر
• جعل الجدول مستجيبًا باستخدام CSS
• كيفية تصحيح أخطاء CSS عن طريق شطر
• محددات CSS
• تتالي CSS
• خصوصية CSS
• محددات سمات CSS
• ألوان CSS
• وحدات CSS
• عنوان URL لـ CSS ()
• طباعة CSS
• نموذج صندوق CSS
• خاصية موضع CSS
• استعلامات وسائط CSS والتصميم سريع الاستجابة
• استعلامات ميزات CSS
• تحويلات CSS
• كيفية تصميم القوائم باستخدام CSS
• بادئات بائع CSS
• الوراثة CSS
• فئات CSS الزائفة
• عناصر CSS الزائفة
• تصميم جداول HTML باستخدام CSS
• خاصية عرض CSS
• وظيفة CSS calc ()
• حدود CSS
• استيراد ملف CSS باستخدامimport
• معالجة أخطاء CSS
• مرشحات CSS
• تحجيم صندوق CSS
• خلفيات CSS
• تعليقات CSS
• خطوط CSS
• حشوة CSS
• خاصية تعويم CSS والمقاصة
• تطبيع CSS
• خاصية CSS z-index
• كيفية تعطيل اختيار النص باستخدام CSS
• كيفية وضع عنصر في أسفل الحاوية الخاصة به باستخدام CSS
• كيفية قلب الألوان باستخدام CSS
• العلامات المسبقة المستجيبة في CSS
• فيديوهات يوتيوب متجاوبة
• ما هي قيم CSS Breakpoint الجيدة للتصميم المستجيب؟
• كيفية محاذاة المركز في flexbox