طباعة CSS

كيفية العمل مع الطباعة في 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


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