تنسيق النصوص والزخرفة

مقدمة في تنسيق النصوص

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

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

محاذاة النص باستخدام text-align

تتحكم خاصية text-align في المحاذاة الأفقية للمحتوى السطري داخل عنصر كتلي. تؤثر على النص والعناصر السطرية وعناصر inline-block. هذه واحدة من أكثر خصائص التخطيط أساسية في CSS.

قيم المحاذاة الأساسية

• left -- يحاذي النص إلى الحافة اليسرى. هذا هو الافتراضي للغات التي تُكتب من اليسار إلى اليمين (LTR) مثل الإنجليزية.
• right -- يحاذي النص إلى الحافة اليمنى. هذا هو الافتراضي للغات التي تُكتب من اليمين إلى اليسار (RTL) مثل العربية والعبرية.
• center -- يوسّط النص أفقياً داخل العنصر. يُستخدم عادةً للعناوين وأقسام البطل وكتل المحتوى القصيرة.
• justify -- يمدد النص بحيث يكون لكل سطر عرض متساوٍ، محاذياً كلاً من الحافتين اليسرى واليمنى. يقوم المتصفح بضبط المسافات بين الكلمات لتحقيق ذلك. هذا ينشئ مظهراً أنيقاً يشبه الصحف لكنه قد يسبب مشاكل في القراءة.

.left-aligned {
    text-align: left;
}

.right-aligned {
    text-align: right;
}

.centered {
    text-align: center;
}

.justified {
    text-align: justify;
}

قيم المحاذاة المنطقية: start و end

قدم CSS الحديث قيمتي start و end اللتين تحترمان اتجاه كتابة المستند. هذه ضرورية لبناء مواقع ويب متعددة اللغات:

• start -- يحاذي إلى بداية اتجاه الكتابة. في لغات LTR، هذا يعني اليسار. في لغات RTL، هذا يعني اليمين.
• end -- يحاذي إلى نهاية اتجاه الكتابة. في لغات LTR، هذا يعني اليمين. في لغات RTL، هذا يعني اليسار.

/* تتكيف تلقائياً بناءً على سمة dir */
.content {
    text-align: start; /* يسار بالإنجليزية، يمين بالعربية */
}

.sidebar-note {
    text-align: end; /* يمين بالإنجليزية، يسار بالعربية */
}

/* سياق HTML */
<div dir="ltr">
    <p class="content">This aligns left</p>
</div>

<div dir="rtl">
    <p class="content">هذا يحاذي لليمين</p>
</div>

اعتبارات النص المتساوي (Justified)

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

/* نص متساوي أساسي */
.article-body {
    text-align: justify;
}

/* أفضل: استخدم الواصلات لتقليل الفجوات */
.article-body-improved {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
}

/* حدد اللغة للوصل الصحيح */
/* في HTML: <p lang="en">...</p> */

زخرفة النص

تضيف خاصية text-decoration زخارف بصرية إلى النص مثل الخط السفلي والخط العلوي وخط الشطب. ترتبط هذه الخاصية عادةً بالروابط لكن لها استخدامات عديدة أخرى في تصميم الويب.

خطوط الزخرفة الأساسية

• underline -- يرسم خطاً أسفل النص. هذا هو التنسيق الافتراضي للروابط (عناصر <a>).
• overline -- يرسم خطاً أعلى النص. نادراً ما يُستخدم، لكنه يمكن أن يكون مفيداً لبعض التأثيرات التصميمية.
• line-through -- يرسم خطاً عبر منتصف النص (شطب). يُستخدم عادةً لإظهار المحتوى المحذوف أو الأسعار الأصلية في التخفيضات أو المهام المكتملة.
• none -- يزيل جميع الزخارف. يُستخدم كثيراً لإزالة الخط السفلي الافتراضي من الروابط.

/* إزالة خط الرابط السفلي */
a {
    text-decoration: none;
}

/* إضافة خط سفلي عند التمرير */
a:hover {
    text-decoration: underline;
}

/* خط شطب للأسعار */
.original-price {
    text-decoration: line-through;
    color: #999;
}

/* تأثير خط علوي */
.section-label {
    text-decoration: overline;
}

/* زخارف متعددة */
.fancy-text {
    text-decoration: underline overline;
}

الاختصار text-decoration

خاصية text-decoration هي في الواقع اختصار لأربع خصائص فردية. الصيغة الكاملة للاختصار هي:

text-decoration: <line> <style> <color> <thickness>

• text-decoration-line -- أي خط(خطوط) سيتم رسمها: underline أو overline أو line-through أو مزيج منها.
• text-decoration-style -- نمط الخط: solid أو double أو dotted أو dashed أو wavy.
• text-decoration-color -- لون خط الزخرفة. افتراضياً، يطابق لون النص.
• text-decoration-thickness -- سماكة الخط. يقبل قيم طول مثل 2px أو 0.1em أو الكلمة المفتاحية auto.

/* خط سفلي متموج أحمر (مثل خطأ إملائي) */
.spelling-error {
    text-decoration: underline wavy red;
}

/* خط سفلي منقط سميك */
.dotted-underline {
    text-decoration: underline dotted 2px;
}

/* خط علوي مزدوج بالأزرق */
.double-overline {
    text-decoration: overline double blue;
}

/* خط شطب متقطع بالرمادي */
.removed-text {
    text-decoration: line-through dashed #888;
}

/* استخدام خصائص فردية لمزيد من التحكم */
.custom-decoration {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #e74c3c;
    text-decoration-thickness: 3px;
}

/* إزاحة الخط السفلي عن النص */
.offset-underline {
    text-decoration: underline;
    text-underline-offset: 4px; /* مسافة بين النص والخط السفلي */
}

تحويل النص

تغيّر خاصية text-transform حالة الأحرف في النص دون تعديل محتوى HTML الفعلي. هذه أداة قوية للحفاظ على تنسيق بصري متسق بغض النظر عن كيفية كتابة المحتوى في المصدر.

• uppercase -- يحول جميع الأحرف إلى أحرف كبيرة. شائع للأزرار والتسميات وعناصر التنقل والعناوين.
• lowercase -- يحول جميع الأحرف إلى أحرف صغيرة.
• capitalize -- يكبّر الحرف الأول من كل كلمة. مفيد للعناوين والأسماء.
• none -- يزيل أي تحويل نصي موروث. يظهر النص كما هو مكتوب في HTML.
• full-width -- يحول الأحرف إلى شكلها بالعرض الكامل. مفيد أساساً للطباعة في شرق آسيا حيث تحتاج إلى محاذاة الأحرف اللاتينية مع أحرف CJK.

/* روابط تنقل بأحرف كبيرة */
nav a {
    text-transform: uppercase;
    letter-spacing: 0.05em; /* إضافة تباعد لسهولة القراءة */
    font-size: 0.875rem;
}

/* كتابة العناوين بأحرف كبيرة أولى */
.article-title {
    text-transform: capitalize;
}

/* عناوين البريد الإلكتروني بأحرف صغيرة */
.email {
    text-transform: lowercase;
}

/* نص الزر دائماً بأحرف كبيرة */
.btn {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* إعادة تعيين التحويل للعناصر الفرعية */
.uppercase-section {
    text-transform: uppercase;
}
.uppercase-section .normal-text {
    text-transform: none;
}

إزاحة النص باستخدام text-indent

تحدد خاصية text-indent إزاحة السطر الأول من النص في عنصر كتلي. هذه ميزة طباعية كلاسيكية تُستخدم في الكتب والمقالات لتمييز بداية الفقرات.

/* إزاحة فقرة كلاسيكية */
.book-style p {
    text-indent: 2em;
    margin-bottom: 0; /* بدون مسافة بين الفقرات بأسلوب الكتاب */
}

/* الفقرة الأولى بدون إزاحة (عرف الكتب) */
.book-style p:first-of-type {
    text-indent: 0;
}

/* إزاحة معلقة (قيمة سالبة) */
.bibliography {
    text-indent: -2em;
    padding-left: 2em; /* تعويض بالحشوة */
}

/* إزاحة مبنية على النسبة المئوية */
.wide-indent {
    text-indent: 10%; /* 10% من عرض الحاوية */
}

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

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

letter-spacing

تضبط خاصية letter-spacing المسافة بين الأحرف الفردية (وتُسمى أيضاً التتبع في الطباعة). القيم الموجبة تزيد التباعد؛ والقيم السالبة تقلله.

/* تباعد أحرف ضيق للعناوين الكبيرة */
h1 {
    letter-spacing: -0.02em;
    font-size: 3rem;
}

/* تباعد أحرف واسع للنص الصغير بالأحرف الكبيرة */
.label {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    font-weight: 600;
}

/* تباعد أحرف عادي */
.body-text {
    letter-spacing: normal; /* مثل 0 */
}

/* تباعد درامي لتأثير تصميمي */
.spaced-heading {
    letter-spacing: 0.5em;
    text-transform: uppercase;
}

word-spacing

تضبط خاصية word-spacing المسافة بين الكلمات. تضيف إلى (أو تطرح من) عرض حرف المسافة الطبيعي.

/* زيادة تباعد الكلمات لسهولة القراءة */
.wide-words {
    word-spacing: 0.2em;
}

/* تقليل تباعد الكلمات */
.tight-words {
    word-spacing: -0.05em;
}

/* دمج مع تباعد الأحرف للعناوين */
.hero-subtitle {
    word-spacing: 0.3em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
}

ارتفاع السطر

تتحكم خاصية line-height في المسافة العمودية بين أسطر النص (المسافة بين السطور). هي واحدة من أهم خصائص القراءة وضرورية للطباعة الاحترافية.

طرق مختلفة لتعيين ارتفاع السطر

• رقم بدون وحدة (موصى به) -- مضاعف لحجم خط العنصر. line-height: 1.5 يعني أن ارتفاع السطر هو 1.5 مرة حجم الخط. هذا هو النهج الموصى به لأنه يتناسب بشكل صحيح مع تغييرات حجم الخط ويُورَث بشكل صحيح من قبل العناصر الفرعية.
• قيمة طول (px, em, rem) -- ارتفاع سطر ثابت. line-height: 24px يحدد ارتفاع سطر دقيق بغض النظر عن حجم الخط. هذا يمكن أن يسبب مشاكل عند تغيير أحجام الخطوط.
• نسبة مئوية -- نسبة من حجم خط العنصر. line-height: 150% مشابه لـ 1.5، لكن هناك فرق جوهري في كيفية التوريث: يتم توريث القيمة المحسوبة، وليس النسبة المئوية نفسها.
• normal -- ارتفاع السطر الافتراضي للمتصفح، عادةً حوالي 1.2. هذا غالباً ما يكون ضيقاً جداً لنص المتن.

/* موصى به: line-height بدون وحدة */
body {
    font-size: 16px;
    line-height: 1.6; /* = 25.6px، والعناصر الفرعية ترث المضاعف 1.6 */
}

/* line-height ثابت (كن حذراً) */
.fixed-leading {
    font-size: 16px;
    line-height: 24px; /* بالضبط 24px بغض النظر عن حجم الخط */
}

/* line-height بالنسبة المئوية (مشكلة التوريث) */
.parent {
    font-size: 16px;
    line-height: 150%; /* المحسوب: 24px. العناصر الفرعية ترث 24px، وليس 150% */
}
.parent .child {
    font-size: 32px; /* ارتفاع السطر لا يزال 24px! النص يتداخل. */
}

/* بدون وحدة يتجنب مشكلة التوريث */
.parent-better {
    font-size: 16px;
    line-height: 1.5; /* العناصر الفرعية ترث المضاعف 1.5 */
}
.parent-better .child {
    font-size: 32px; /* ارتفاع السطر = 32px * 1.5 = 48px. صحيح! */
}

أفضل ممارسات ارتفاع السطر

/* نص المتن: ارتفاع سطر سخي لسهولة القراءة */
body {
    line-height: 1.5; /* الحد الأدنى لنص المتن */
}

/* أفضل للقراءة الطويلة */
article p {
    line-height: 1.6; /* إلى 1.8 للقراءة المريحة */
}

/* العناوين: ارتفاع سطر أضيق */
h1, h2, h3 {
    line-height: 1.2; /* العناوين تبدو أفضل بمسافة أقل */
}

/* العناوين الكبيرة: أضيق حتى */
.hero-title {
    font-size: 4rem;
    line-height: 1.1; /* منع المسافة المفرطة في النص الكبير */
}

/* عناصر سطر واحد: مطابقة الارتفاع */
.button {
    line-height: 1; /* النص يتوسط عمودياً مع الحشوة */
    padding: 12px 24px;
}

/* حيلة التوسيط العمودي مع line-height */
.single-line-center {
    height: 50px;
    line-height: 50px; /* مطابقة الارتفاع للتوسيط العمودي */
}

التعامل مع المسافات البيضاء

تتحكم خاصية white-space في كيفية التعامل مع أحرف المسافات البيضاء (المسافات وعلامات الجدولة والأسطر الجديدة) داخل عنصر. هذه الخاصية ضرورية لعرض الأكواد والحفاظ على التنسيق والتحكم في سلوك التفاف النص.

قيم white-space

• normal -- الافتراضي. يطوي أحرف المسافات البيضاء المتعددة في مسافة واحدة. تلتف الأسطر عند حافة الحاوية.
• nowrap -- يطوي المسافات البيضاء مثل normal، لكنه يمنع التفاف الأسطر. يستمر النص في سطر واحد حتى يصادف وسم <br>. مفيد للعناصر أحادية السطر التي لا يجب أن تنكسر.
• pre -- يحافظ على جميع المسافات البيضاء تماماً كما هي مكتوبة في HTML، بما في ذلك المسافات وعلامات الجدولة والأسطر الجديدة. لا تلتف الأسطر. يتصرف مثل عنصر HTML <pre>.
• pre-wrap -- يحافظ على المسافات البيضاء مثل pre، لكنه يسمح للأسطر بالالتفاف عند وصولها إلى حافة الحاوية. هذا هو الخيار الأفضل لعرض الأكواد التي يجب أن تلتف في الحاويات الضيقة.
• pre-line -- يطوي المسافات وعلامات الجدولة في مسافات مفردة (مثل normal)، لكنه يحافظ على أحرف الأسطر الجديدة. تلتف الأسطر أيضاً عند حافة الحاوية. مفيد عندما تريد احترام فواصل الأسطر من المصدر دون الحفاظ على جميع المسافات.
• break-spaces -- مشابه لـ pre-wrap، لكن أي مسافات بيضاء في نهاية السطر يتم الحفاظ عليها أيضاً ولا تتدلى. بالإضافة إلى ذلك، يمكن كسر تلك المسافات البيضاء عبر الأسطر.

/* عادي: يطوي المسافات، يلف النص */
.normal {
    white-space: normal;
}

/* بدون التفاف: يمنع كسر الأسطر */
.no-break {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* إظهار ... عند قطع النص */
}

/* Pre: يحافظ على كل التنسيق (لكتل الأكواد) */
.code-display {
    white-space: pre;
    font-family: monospace;
    background: #f4f4f4;
    padding: 1rem;
    overflow-x: auto; /* السماح بالتمرير الأفقي */
}

/* Pre-wrap: يحافظ على التنسيق لكنه يلف الأسطر الطويلة */
.code-wrapping {
    white-space: pre-wrap;
    word-break: break-all; /* كسر السلاسل الطويلة */
}

/* Pre-line: يحترم الأسطر الجديدة لكنه يطوي المسافات */
.poetry {
    white-space: pre-line;
}

/*
القيمة        | المسافات | الأسطر الجديدة | الالتفاف
--------------+---------+---------------+--------
normal        | طي      | طي            | نعم
nowrap        | طي      | طي            | لا
pre           | حفظ     | حفظ           | لا
pre-wrap      | حفظ     | حفظ           | نعم
pre-line      | طي      | حفظ           | نعم
break-spaces  | حفظ     | حفظ           | نعم
*/

كسر الكلمات والتفاف الفائض

عندما يحتوي النص على كلمات طويلة جداً أو عناوين URL أو سلاسل متواصلة بدون مسافات، يمكن أن يتجاوز حاويته. يوفر CSS عدة خصائص للتحكم في كيفية ومتى تنكسر هذه السلاسل الطويلة.

word-break

تحدد خاصية word-break كيف يجب أن تنكسر الكلمات عندما تصل إلى نهاية السطر:

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

overflow-wrap (سابقاً word-wrap)

خاصية overflow-wrap أقل عدوانية من word-break. تكسر الكلمات فقط إذا كانت ستتجاوز حاويتها:

• normal -- تُكسر الكلمات فقط عند نقاط الكسر الطبيعية.
• break-word -- إذا كانت الكلمة طويلة جداً لتناسب، ستنكسر عند نقطة عشوائية لمنع التجاوز. على عكس break-all، هذا يعمل فقط عند الضرورة.
• anywhere -- مثل break-word، لكن يتم اعتبار الكسر عند حساب تحجيم min-content.

/* النهج الأكثر أماناً لمعظم النصوص */
.content {
    overflow-wrap: break-word;
}

/* للمحتوى الذي ينشئه المستخدمون مع عناوين URL */
.user-content {
    overflow-wrap: break-word;
    word-break: break-word; /* بديل قديم */
}

/* كسر عدواني لجداول البيانات */
.data-cell {
    word-break: break-all;
}

/* التعامل مع عناوين URL الطويلة في الروابط */
a {
    overflow-wrap: break-word;
    word-break: break-all; /* كسر عناوين URL عند أي حرف */
}

/* التفاف نص دفاعي كامل */
.safe-text {
    overflow-wrap: break-word;
    word-wrap: break-word; /* الاسم القديم، لا يزال يعمل */
    hyphens: auto;
}

تجاوز النص والاقتطاع

تحدد خاصية text-overflow كيف يجب الإشارة للمستخدم عن المحتوى المتجاوز الذي لم يتم عرضه. الاستخدام الأكثر شيوعاً هو إظهار علامة حذف (...) عند اقتطاع النص.

نمط الاقتطاع الكلاسيكي

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

/* ثلاثي الاقتطاع */
.truncate {
    white-space: nowrap;      /* منع النص من الالتفاف */
    overflow: hidden;          /* إخفاء النص المتجاوز */
    text-overflow: ellipsis;   /* إظهار ... عند نقطة القطع */
}

/* مثال عملي: عنوان البطاقة */
.card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

/* اقتطاع خلية الجدول */
td {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

اقتطاع متعدد الأسطر

اقتطاع النص بعد أسطر متعددة يتطلب نهجاً مختلفاً باستخدام خاصية -webkit-line-clamp. على الرغم من البادئة webkit، فهذا مدعوم في جميع المتصفحات الحديثة:

/* اقتطاع بعد سطرين */
.two-line-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* اقتطاع بعد 3 أسطر */
.three-line-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* بطاقة مقتطف المدونة */
.blog-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    max-height: calc(1.6em * 4); /* بديل للمتصفحات القديمة */
}

ظل النص

تضيف خاصية text-shadow تأثيرات ظل إلى النص. يمكنها إنشاء عمق وتأثيرات توهج ومخططات وعلاجات بصرية إبداعية أخرى. الصيغة مشابهة لـ box-shadow لكن بدون قيمة الانتشار.

صيغة ظل النص

text-shadow: offset-x offset-y blur-radius color;

• offset-x -- الإزاحة الأفقية. الموجب يتحرك لليمين، والسالب يتحرك لليسار.
• offset-y -- الإزاحة العمودية. الموجب يتحرك للأسفل، والسالب يتحرك للأعلى.
• blur-radius -- اختياري. مدى ضبابية الظل. الافتراضي هو 0 (ظل حاد).
• color -- اختياري. لون الظل. يأخذ افتراضياً لون النص (currentColor).

/* ظل ساقط بسيط */
.shadow-basic {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* بدون ضبابية (ظل حاد) */
.shadow-hard {
    text-shadow: 3px 3px 0 #333;
}

/* تأثير التوهج */
.shadow-glow {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                 0 0 20px rgba(255, 255, 255, 0.6),
                 0 0 40px rgba(0, 150, 255, 0.4);
}

/* تأثير النقش / الطباعة البارزة */
.shadow-embossed {
    color: #ccc;
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #333;
}

/* نص ثلاثي الأبعاد كلاسيكي */
.shadow-3d {
    color: #e74c3c;
    text-shadow: 1px 1px 0 #c0392b,
                 2px 2px 0 #a93226,
                 3px 3px 0 #922b21,
                 4px 4px 0 #7b241c;
}

/* تأثير لافتة نيون */
.shadow-neon {
    color: #fff;
    text-shadow: 0 0 7px #fff,
                 0 0 10px #fff,
                 0 0 21px #fff,
                 0 0 42px #0fa,
                 0 0 82px #0fa,
                 0 0 92px #0fa;
}

/* نص محدد باستخدام ظلال متعددة */
.shadow-outline {
    color: #fff;
    text-shadow: -1px -1px 0 #000,
                  1px -1px 0 #000,
                 -1px  1px 0 #000,
                  1px  1px 0 #000;
}

وضع الكتابة

تغيّر خاصية writing-mode الاتجاه الذي يتدفق فيه النص. افتراضياً، يتدفق النص أفقياً من اليسار إلى اليمين. مع writing-mode، يمكنك إنشاء تخطيطات نص عمودية تُستخدم في لغات شرق آسيا أو لتأثيرات تصميمية إبداعية.

/* نص أفقي افتراضي */
.horizontal {
    writing-mode: horizontal-tb; /* أفقي، من الأعلى للأسفل */
}

/* نص عمودي، من اليمين لليسار (صيني/ياباني تقليدي) */
.vertical-rl {
    writing-mode: vertical-rl;
}

/* نص عمودي، من اليسار لليمين */
.vertical-lr {
    writing-mode: vertical-lr;
}

/* تسمية شريط جانبي عمودية */
.sidebar-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* نص مدور للتصميم */
.rotated-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    /* هذا يجعل النص يُقرأ من الأسفل للأعلى */
}

أمثلة طباعية عملية

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

/* الطباعة الأساسية */
body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    letter-spacing: normal;
    overflow-wrap: break-word;
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* تباعد الفقرات */
p + p {
    margin-top: 1em;
}

/* الروابط */
a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}
a:hover {
    text-decoration-color: rgba(37, 99, 235, 1);
}

/* أحرف صغيرة كبيرة للاختصارات */
abbr {
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

/* الاقتباسات */
blockquote {
    text-indent: -0.4em; /* تأثير علامات الترقيم المعلقة */
    font-style: italic;
    line-height: 1.8;
    color: #555;
}

/* التنقل */
nav a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    font-weight: 600;
}

/* اقتطاع وصف البطاقة */
.card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* شارة / تسمية */
.badge {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}