درس ۳۲ از ۴۵ · صفحه‌های وب

قلم و سبک متن

صفحه بیشتر از حرف ساخته شده و ظاهر حرف‌ها تعیین می‌کند مردم آن را بخوانند یا نه. این درس ویژگی‌های قلم (کدام قلم، چه اندازه، چقدر پررنگ، با کدام ویژگی)، ویژگی‌های متن (تراز، خط، فاصله‌ها، شکستن سطر، جهت) و عنصر قلم وب را با نمونه‌های اجرایی پوشش می‌دهد و راهنمای کوتاهی برای متن فارسی و عربی دارد.

در این درس

انتخاب قلم
اندازه
وزن، سبک و پهنا
قلم وب
ویژگی‌ها، نسخه‌ها و قلم متغیر
تراز و تبدیل متن
خط، سایه و دور حرف
ارتفاع خط و فاصله‌ها
شکستن و بریدن متن
جهت و متن عمودی
آوانما و نشانه‌ی تأکید
متن فارسی و عربی
مرجع: همه‌ی ویژگی‌های قلم و متن
خودتان امتحان کنید

انتخاب قلم

نمی‌دانید بازدیدکننده چه قلم‌هایی نصب کرده است. برای همین خانواده قلم (font-family) فهرستی می‌گیرد که پشته‌ی قلم نامیده می‌شود: مرورگر نام‌ها را از چپ به راست امتحان می‌کند و نخستین قلمی را برمی‌دارد که وجود دارد و حرف‌های لازم را دارد. نامی که فاصله دارد درون رشته در گیومه‌ی تکی می‌آید. نام آخر باید یک خانواده‌ی عمومی باشد که هر مرورگری همیشه می‌تواند جایش را پر کند: serif (حرف‌هایی با پایه‌ی کوچک)، sans-serif (بدون پایه)، monospace (هم‌عرض، برای کد)، cursive و fantasy (تزیینی و در هر سامانه متفاوت) و system-ui (قلم پنجره‌های خود سامانه‌ی عامل). ui-monospace قلم کد سامانه است.

web-font-family.salam

صفحه:
    عنوان = "پشته قلم"
    سراسری: گزینشگر = "body" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    پاراگراف: خانواده قلم = "Georgia, 'Times New Roman', serif" محتوا = "سریف: نخست جورجیا، بعد تایمز، و اگر نبود هر قلم سریف دیگر." پایان
    پاراگراف: خانواده قلم = "system-ui, sans-serif" محتوا = "بدون سریف: قلم رابط کاربری سامانه." پایان
    پاراگراف: خانواده قلم = "ui-monospace, Consolas, monospace" محتوا = "هم‌عرض: همه‌ی نویسه‌ها پهنای یکسان دارند. 12345" پایان
    پاراگراف: خانواده قلم = "cursive" محتوا = "دست‌نویس: ظاهری شبیه خط دست." پایان
    پاراگراف: خانواده قلم = "NoSuchFont, Tahoma, sans-serif" محتوا = "نام اول وجود ندارد، پس مرورگر نام بعدی را برمی‌دارد." پایان
پایان

سطر آخر پیش‌نمایش را ببینید. نام نخست وجود ندارد، پس مرورگر بی‌صدا از آن می‌گذرد و سراغ بعدی می‌رود. با حرف‌هایی که در قلم نیستند هم همین می‌شود: اگر قلم نخست حرفی ندارد، مرورگر همان یک حرف را از قلم بعدی فهرست می‌گیرد.

قاعده را با یک عنصر سراسری روی body بگذارید، همان‌طور که نمونه‌ها می‌کنند، تا همه‌ی عنصرها آن را به ارث ببرند. فقط جایی که یک عنصر واقعاً قلم دیگری می‌خواهد، مثل کد، خانواده قلم را روی خودش بنویسید.

اندازه

اندازه قلم (font-size) عدد تنها (پیکسل) یا رشته‌ای با واحد می‌گیرد. واحدهای به‌دردبخور rem است که نسبت به اندازه‌ی قلم کل صفحه است، em و % که نسبت به عنصر والدند، و vw که بخشی از پهنای پنجره است. واژه‌هایی از xx-small تا xx-large هم هست، و clamp(کمینه، دلخواه، بیشینه) که با پنجره بزرگ می‌شود ولی از دو حد بیرون نمی‌رود. برای متن rem را به پیکسل ترجیح دهید: کسی که اندازه‌ی پیش‌فرض مرورگرش را بزرگ کرده، متن صفحه‌ی شما را هم بزرگ‌تر می‌بیند.

web-font-size.salam

صفحه:
    عنوان = "اندازه‌ی قلم"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    پاراگراف: اندازه قلم = 12 محتوا = "۱۲ یعنی ۱۲ پیکسل" پایان
    پاراگراف: اندازه قلم = 12 + 6 محتوا = "یک عبارت: ۱۲ + ۶ می‌شود ۱۸ پیکسل" پایان
    پاراگراف: اندازه قلم = "1.5rem" محتوا = "1.5rem یعنی یک‌ونیم برابر اندازه‌ی ریشه" پایان
    پاراگراف: اندازه قلم = "150%" محتوا = "۱۵۰ درصد اندازه‌ی والد" پایان
    پاراگراف: اندازه قلم = "x-large" محتوا = "واژه‌ی کلیدی x-large" پایان
    پاراگراف: اندازه قلم = "clamp(1rem, 4vw, 2rem)" محتوا = "clamp() با پنجره بزرگ می‌شود، ولی در یک بازه" پایان
پایان

سطر دوم یک عبارت است. هر عدد یا رشته‌ای که مترجم بتواند حسابش کند مقدار معتبری است، پس می‌توانید پایایی را هم که بالای صفحه تعریف شده به کار ببرید، مثل اندازه قلم = پایه * 2، و با عوض کردن یک عدد اندازه‌ی چند عنصر را عوض کنید.

پیش از بخش بعدی خودتان امتحان کنید. لغزنده و فهرست زیر تابع‌های کوچکی را اجرا می‌کنند که از بسته‌ی دام استفاده می‌کنند و در صفحه‌ی خودش توضیح داده شده است. هر بار لغزنده حرکت می‌کند، تابعش مقدار را می‌خواند و ویژگی font-size نمونه را تنظیم می‌کند. درون چنین تابعی ویژگی‌های CSS همان نام اصلی‌شان را با خط تیره دارند.

web-font-tester.salam

واردسازی دام

صفحه:
    عنوان = "آزمون قلم"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    پاراگراف: شناسه = "برچسب" محتوا = "اندازه: 28 پیکسل" پایان
    جعبه: نمایش = "flex" شکاف = 12
        ورودی: شناسه = "اندازه" نوع = "range" کمینه = 12 بیشینه = 64 مقدار = 28
            ورودی = ():
                اندازه := دام.دریافت مقدار(دام.با شناسه("اندازه"))
                دام.تنظیم سبک(دام.با شناسه("نمونه")، "font-size"، اندازه + "px")
                دام.تنظیم متن(دام.با شناسه("برچسب")، "اندازه: " + اندازه + " پیکسل")
            پایان
        پایان
        انتخاب: شناسه = "خانواده" تغییر = (): دام.تنظیم سبک(دام.با شناسه("نمونه")، "font-family"، دام.دریافت مقدار(دام.با شناسه("خانواده"))) پایان
            گزینه: مقدار = "Tahoma, sans-serif" محتوا = "بدون سریف" پایان
            گزینه: مقدار = "Georgia, serif" محتوا = "سریف" پایان
            گزینه: مقدار = "ui-monospace, monospace" محتوا = "هم‌عرض" پایان
        پایان
    پایان
    پاراگراف: شناسه = "نمونه" خانواده قلم = "Tahoma, sans-serif" اندازه قلم = 28 محتوا = "هر نویسنده‌ای در جست‌وجوی واژه‌ی درست است." پایان
پایان

وزن، سبک و پهنا

وزن قلم (font-weight) عددی از ۱ تا ۱۰۰۰ است: ۴۰۰ متن معمولی و ۷۰۰ پررنگ است. normal و bold همان ۴۰۰ و ۷۰۰‌اند و bolder و lighter یک گام از والد دور می‌شوند. پرونده‌ی قلم فقط وزن‌هایی را دارد که طراحش کشیده است. اگر ۳۰۰ بخواهید و قلم ۴۰۰ و ۷۰۰ داشته باشد، مرورگر ۴۰۰ را نشان می‌دهد، پس در پیش‌نمایش زیر ممکن است چند سطر نخست یکسان دیده شوند. سبک قلم راست، italic (طرحی جداگانه) یا oblique (حرف‌های راست که کج شده‌اند) را برمی‌گزیند. کشیدگی قلم (font-stretch) و نام تازه‌ترش پهنای قلم طرح‌های باریک‌تر یا پهن‌تر را برمی‌گزینند و فقط برای قلم‌هایی که چنین طرح‌هایی دارند معنا دارند.

web-font-weight.salam

صفحه:
    عنوان = "وزن، سبک و پهنا"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    پاراگراف: وزن قلم = 300 محتوا = "وزن ۳۰۰، سبک" پایان
    پاراگراف: وزن قلم = 400 محتوا = "وزن ۴۰۰، معمولی" پایان
    پاراگراف: وزن قلم = 700 محتوا = "وزن ۷۰۰، پررنگ" پایان
    پاراگراف: وزن قلم = 900 محتوا = "وزن ۹۰۰، سیاه" پایان
    پاراگراف: سبک قلم = "italic" محتوا = "کج: طرح کج خود قلم، اگر داشته باشد" پایان
    پاراگراف: سبک قلم = "oblique" محتوا = "مایل: حرف‌های راست که کج شده‌اند" پایان
    پاراگراف: کشیدگی قلم = "condensed" محتوا = "فشرده، اگر قلم طرح باریک داشته باشد" پایان
    پاراگراف: قلم = "italic 700 1.25rem/1.6 Tahoma, serif" محتوا = "همه‌ی این‌ها در یک کوتاه‌نویسی" پایان
پایان

سطر آخر از کوتاه‌نویسی قلم (font) استفاده می‌کند. سبک، وزن، پهنا، اندازه، ارتفاع خط و خانواده را در یک رشته و به همین ترتیب می‌نویسد، با ارتفاع خط پس از یک خط مورب. فقط اندازه و خانواده الزامی‌اند.

کوتاه‌نویسی قلم هر ویژگی را که نام نبرده بازنشانی می‌کند. اگر روی یک عنصر بعد از وزن قلم = 700 بنویسید قلم = "16px serif"، وزن دوباره ۴۰۰ می‌شود. وقتی فقط می‌خواهید یک چیز را عوض کنید، همان یک ویژگی را بنویسید.

اگر قلمی طرح پررنگ یا کج نداشته باشد، مرورگر با کلفت یا کج کردن حرف‌های معمولی یکی می‌سازد. نتیجه اغلب کمی زشت است. ساخت قلم (font-synthesis) این کار را ممنوع می‌کند و بخش‌هایش، یعنی ساخت وزن قلم، ساخت سبک قلم، ساخت حروف کوچک قلم و ساخت جایگاه قلم، هر کدام یک نوع ساختگی را ممنوع می‌کنند.

قلم وب

برای استفاده از قلمی که بازدیدکننده‌ها ندارند، پرونده‌اش را همراه صفحه بفرستید. عنصر قلم یک پرونده را توصیف می‌کند: نام همان است که بعداً در خانواده قلم می‌نویسید و نشانی آدرس پرونده است. سلام آن را به قاعده‌ی @font-face تبدیل می‌کند و مرورگر پرونده را فقط وقتی دانلود می‌کند که متنی از قلم استفاده کند. وقتی یک خانواده چند پرونده دارد، برای هر پرونده یک عنصر قلم با همان نام بنویسید و وزن یا سبکی را بگذارید که آن پرونده می‌دهد.

web-font-face.salam

صفحه:
    عنوان = "یک قلم وب"
    قلم:
        نام = "قلم درس"
        نشانی = "/fonts/course-sans.woff2"
        وزن = 400
        سبک = normal
        نمایش = swap
    پایان
    قلم:
        نام = "قلم درس"
        نشانی = "/fonts/course-sans-bold.woff2"
        وزن = 700
        نمایش = swap
    پایان
    سراسری: گزینشگر = "body" خانواده قلم = "'قلم درس', Tahoma, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    سرتیتر: اندازه = 2 محتوا = "خواندن راحت" پایان
    پاراگراف: محتوا = "پرونده‌های قلم بخشی از این پیش‌نمایش نیستند، پس مرورگر نام بعدی پشته را نشان می‌دهد." پایان
    پاراگراف: وزن قلم = 700 محتوا = "این سطر وزن ۷۰۰ می‌خواهد و از پرونده‌ی دوم استفاده می‌کرد." پایان
پایان

دو پرونده‌ی این نمونه در پیش‌نمایش وجود ندارند، پس صفحه قلم بعدیِ پشته را نشان می‌دهد. ساختن صفحه درست همین است: قلم پشتیبان باید همیشه به اندازه‌ی کافی خوانا باشد. در سایت خودتان پرونده‌ها را در پوشه‌ای بگذارید که کارسازتان می‌فرستد تا صفحه از آن‌ها استفاده کند. سلام نشانی را هنگام ترجمه می‌سنجد: نشانی ناامن خطاست و پرونده‌ی نسبی‌ای که کنار برنامه پیدا نشود هشدار می‌دهد. اگر نوع را ننویسید، سلام قالب را از ته نشانی می‌فهمد.

سه ویژگی شکل بارگذاری را تعیین می‌کنند. نمایش = swap بی‌درنگ قلم پشتیبان را نشان می‌دهد و با رسیدن قلم اصلی عوضش می‌کند، پس متن هرگز نامرئی نیست. بازه بازه‌های یونیکدی را که یک پرونده می‌پوشاند فهرست می‌کند، تا پرونده‌ی فارسی فقط برای صفحه‌هایی دانلود شود که حرف فارسی دارند. وزن برای قلم متغیر می‌تواند بازه‌ای مثل "100 900" باشد.

هر پرونده‌ی قلم یک دانلود است و صفحه‌ای که منتظر پنج‌تا باشد کند حس می‌شود. یک یا دو خانواده، فقط وزن‌هایی که واقعاً به کار می‌برید و قالب woff2 را، که کوچک‌ترین است، به کار ببرید. مجوز را هم بخوانید: قلمی که روی رایانه‌ی شما هست همیشه قلمی نیست که اجازه‌ی انتشارش را داشته باشید.

ویژگی‌ها، نسخه‌ها و قلم متغیر

یک قلم خوب فقط حرف نیست: حروف کوچک بزرگ‌نما، چند شکل رقم، پیوندها (شکل‌هایی که دو حرف به هم می‌چسبند، مثل fi) و شکل‌های جایگزین هم دارد. به این‌ها ویژگی‌های اوپن‌تایپ می‌گویند و هر کدام برچسبی چهارحرفی مثل smcp یا liga دارد. ویژگی‌هایی که با نسخه قلم شروع می‌شوند رایج‌ترین‌ها را با واژه روشن می‌کنند: حروف بزرگ قلم، عددی نسخه قلم، پیوندها نسخه قلم، جایگاه نسخه قلم، جایگزین های نسخه قلم، آسیایی شرق نسخه قلم و گونه شکلک قلم. تنظیمات ویژگی قلم نسخه‌ی خام برای بقیه است: "'smcp' 1" ویژگی را روشن و ۰ خاموشش می‌کند. فاصله‌گذاری قلم فاصله‌ی جفت‌حرف‌ها را تعیین می‌کند که به‌طور پیش‌فرض روشن است و باید روشن بماند.

web-font-variants.salam

صفحه:
    عنوان = "نسخه‌های قلم"
    سراسری: گزینشگر = "body" خانواده قلم = "Georgia, Tahoma, serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    پاراگراف: حروف بزرگ قلم = "small-caps" محتوا = "حروف کوچک بزرگ‌نما (فقط لاتین): Small capitals" پایان
    پاراگراف: عددی نسخه قلم = "tabular-nums" محتوا = "رقم‌های هم‌پهنا برای جدول: 1111 و 8888" پایان
    پاراگراف: عددی نسخه قلم = "oldstyle-nums" محتوا = "رقم‌های کتابی لاتین: 2026" پایان
    پاراگراف: پیوندها نسخه قلم = "none" محتوا = "خاموش کردن پیوندهای لاتین: office affinity" پایان
    پاراگراف: فاصله‌گذاری قلم = "none" محتوا = "خاموش کردن فاصله‌گذاری جفت‌حرف‌ها: AVATAR WAVE" پایان
    پاراگراف: تنظیمات ویژگی قلم = "'smcp' 1" محتوا = "همان حروف کوچک بزرگ‌نما با برچسب خام: Small capitals" پایان
    پاراگراف: تنظیمات تغییر قلم = "'wght' 650" محتوا = "قلم متغیر این محور را می‌خواند، بقیه نادیده می‌گیرند" پایان
پایان

قلم متغیر یک پرونده است که یک گستره‌ی کامل از طرح‌ها را در امتداد محورهایی مثل وزن (wght) یا پهنا (wdth) دارد. تنظیمات تغییر قلم محورها را با برچسبشان تنظیم می‌کند و اندازه بصری قلم به قلمی که محور اندازه‌ی بصری دارد اجازه می‌دهد شکلش را با اندازه‌ی متن عوض کند. جایی که ویژگی معمولی هست از همان استفاده کنید: وزن قلم = 650 محور وزن را تنظیم می‌کند و خواناتر است. پالت قلم یکی از مجموعه‌رنگ‌های یک قلم رنگی را برمی‌گزیند.

ویژگی‌ها فقط وقتی کار می‌کنند که قلم آن‌ها را داشته باشد. قلمی که حروف کوچک بزرگ‌نما ندارد حرف‌های معمولی یا، در بعضی مرورگرها، شکل ساختگی را نشان می‌دهد و یک سطر پیش‌نمایش بالا ممکن است تغییری نکرده باشد. با قلمی که واقعاً به کار می‌برید آزمایش کنید.

تراز و تبدیل متن

ترازمتن (text-align) سطرهای یک بلوک را جا می‌دهد. start و end را به کار ببرید، نه left و right را: آن‌ها از جهت متن پیروی می‌کنند، پس یک قاعده هم برای فارسی درست است هم برای انگلیسی. center همه‌ی سطرها را وسط می‌گذارد و justify همه‌ی سطرها جز آخر را تا پهنای کامل می‌کشد. تراز خط آخر سطر آخر را جداگانه جا می‌دهد و چینش متن تعیین می‌کند فضای اضافه میان کلمه‌ها برود یا میان حرف‌ها. تورفتگی متن سطر نخست را تو می‌برد، همان‌طور که کتاب‌ها بند تازه را نشان می‌دهند. تبدیل متن بزرگی و کوچکی حرف‌های نمایش‌داده‌شده را بدون تغییر خود متن عوض می‌کند، که از تایپ کردن حروف بزرگ بهتر است، چون صفحه‌خوان و جستجو همچنان متن واقعی را می‌بینند.

web-font-align.salam

صفحه:
    عنوان = "تراز کردن متن"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 پایان
    جعبه: ترازمتن = "start" محتوا = "آغاز: سویی که خواندن از آن شروع می‌شود." کادر = "1px solid #cbd5e1" فاصله = 8 فضا پایین = 8 پایان
    جعبه: ترازمتن = "center" محتوا = "وسط: سطرها در میانه." کادر = "1px solid #cbd5e1" فاصله = 8 فضا پایین = 8 پایان
    جعبه: ترازمتن = "end" محتوا = "پایان: سویی که خواندن در آن تمام می‌شود." کادر = "1px solid #cbd5e1" فاصله = 8 فضا پایین = 8 پایان
    جعبه:
        ترازمتن = "justify"
        تراز خط آخر = "center"
        تورفتگی متن = "2em"
        کادر = "1px solid #cbd5e1"
        فاصله = 8
        فضا پایین = 8
        بیشینه عرض = 420
        محتوا = "متن دوطرفه همه‌ی سطرها را به یک پهنا می‌رساند و سطر آخر را می‌شود جداگانه جا داد. سطر نخست دو حرف تورفتگی دارد، چون در کتاب‌ها هر بند را این‌طور شروع می‌کنند."
    پایان
    جعبه: تبدیل متن = "uppercase" محتوا = "uppercase letters" پایان
    جعبه: تبدیل متن = "capitalize" محتوا = "every word starts large" پایان
پایان

متن دوطرفه سطرهای پهن می‌خواهد. در ستون باریک فاصله‌ی میان کلمه‌ها بزرگ و ناهموار می‌شود، پس justify را فقط برای بلوک‌های پهن به کار ببرید.

خط، سایه و دور حرف

تزیین متن روی متن خط می‌کشد. کوتاه‌نویسی چهار ویژگی است: خط تزیین متن (underline، overline، line-through)، سبک تزیین متن (solid، double، dotted، dashed، wavy)، رنگ تزیین متن و ضخامت تزیین متن. دو ویژگی دیگر زیرخط را تنظیم می‌کنند: فاصله زیرخط خط را از حرف‌ها دور می‌کند و پرش جوهر تزیین تعیین می‌کند خط از دم حرف‌هایی مثل g و y بپرد یا نه. سایه متن یک یا چند سایه می‌گذارد، هر کدام با جابه‌جایی افقی، جابه‌جایی عمودی، محوشدگی و رنگ؛ دو سایه‌ی همرنگ درخشش می‌سازند. خط دور متن و رنگ پر متن دور حرف‌ها خط می‌کشند؛ نامشان در سلام webkit دارد چون مرورگرها این ایده را با همان پیشوند پذیرفتند و همه هنوز همان را به کار می‌برند.

web-font-decoration.salam

صفحه:
    عنوان = "خط و سایه‌ی متن"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 1.9 اندازه قلم = 20 پایان
    پاراگراف: خط تزیین متن = "underline" سبک تزیین متن = "wavy" رنگ تزیین متن = "crimson" ضخامت تزیین متن = 2 محتوا = "یک زیرخط موجی قرمز" پایان
    پاراگراف: خط تزیین متن = "underline" فاصله زیرخط = 6 پرش جوهر تزیین = "none" محتوا = "زیرخطی که از حرف‌ها دور شده است" پایان
    پاراگراف: تزیین متن = "line-through 2px #64748b" محتوا = "خط خورده، همه در یک کوتاه‌نویسی" پایان
    پاراگراف: خط تزیین متن = "overline underline" سبک تزیین متن = "double" محتوا = "یک خط بالا و یک خط دوگانه پایین" پایان
    پاراگراف: سایه متن = "2px 2px 4px #94a3b8" اندازه قلم = 32 وزن قلم = 700 محتوا = "سایه‌ی نرم" پایان
    پاراگراف: سایه متن = "0 0 8px #38bdf8, 0 0 16px #0ea5e9" رنگ = "white" پس زمینه = "#0f172a" فاصله = 8 محتوا = "درخششی از دو سایه" پایان
    پاراگراف: خط دور متن = "1px #0f172a" رنگ پر متن = "transparent" اندازه قلم = 40 وزن قلم = 700 محتوا = "Outline" پایان
پایان

مردم انتظار دارند زیرخط یعنی پیوند. زیر متن‌های دیگر خط نکشید و زیرخط پیوندهای واقعی را بدون نشانه‌ی روشن دیگری، مثل رنگ متفاوت به‌علاوه‌ی وزن، برندارید. سایه و خط دور هم تباین را کم می‌کنند، پس بسنجید که متن خوانا می‌ماند.

ارتفاع خط و فاصله‌ها

ارتفاع خط (line-height) مهم‌ترین ویژگی برای خواندن است. یک عدد ساده، بی‌واحد، به آن بدهید: 1.6 یعنی ۱٫۶ برابر اندازه‌ی قلم همان عنصر و فرزندی که اندازه‌اش بزرگ‌تر است خودکار ارتفاع خط بزرگ‌تری می‌گیرد. اندازه‌ای مثل "24px" به‌عنوان یک نتیجه‌ی ثابت به فرزندان می‌رسد و باعث می‌شود تیترهای بزرگ روی هم بیفتند. برای انگلیسی حدود ۱٫۵ مناسب است و فارسی به‌خاطر نقطه‌ها و نشانه‌های بالا و پایین خط حدود ۱٫۹ می‌خواهد. فاصله حروف و فاصله واژه‌ها میان حرف‌ها و میان کلمه‌ها فضا اضافه می‌کنند. فاصله‌ی حروف مثبت و کوچک به حروف بزرگ می‌آید و مقدار منفی بسیار کوچک به تیترهای خیلی درشت. تراز عمودی متن یک عنصر درون‌خطی را درون سطر بالا یا پایین می‌برد، مثل super و sub برای توان و اندیس. اندازه زبانه پهنای نویسه‌ی تب را در متن پیش‌قالب تعیین می‌کند.

web-font-spacing.salam

صفحه:
    عنوان = "فاصله‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: عرض = 300 ارتفاع خط = 1 پس زمینه = "#f1f5f9" فضا پایین = 12 محتوا = "ارتفاع خط ۱: سطرهای این بند به‌شدت به هم چسبیده‌اند." پایان
    جعبه: عرض = 300 ارتفاع خط = 1.9 پس زمینه = "#f1f5f9" فضا پایین = 12 محتوا = "ارتفاع خط ۱٫۹: برای خواندن متن بلند فارسی راحت است." پایان
    جعبه: عرض = 300 ارتفاع خط = 2.8 پس زمینه = "#f1f5f9" فضا پایین = 12 محتوا = "ارتفاع خط ۲٫۸: چنان باز که سطرها از هم می‌افتند." پایان
    جعبه: فاصله حروف = "0.25em" تبدیل متن = "uppercase" اندازه قلم = 14 فضا پایین = 12 محتوا = "Letter spacing for a label" پایان
    جعبه: فاصله واژه‌ها = "0.5em" محتوا = "کلمه‌ها به اندازه‌ی نیم حرف از هم دور می‌شوند" پایان
پایان

روی فارسی و عربی فاصله حروف را به کار نبرید. حرف‌های این خط‌ها به هم می‌چسبند و فاصله میانشان کلمه را تکه‌تکه می‌کند. مرورگرها با آن یک‌جور رفتار نمی‌کنند و جایی که فاصله را اضافه می‌کنند کلمه‌ها را از هم می‌گسلند، پس مقدار امن همیشه 0 یا ننوشتن است.

شکستن و بریدن متن

معمولاً مرورگر سطر را در فاصله‌ها می‌شکند. فضای سفید (white-space) این را عوض می‌کند: nowrap هرگز نمی‌شکند، pre متن را همان‌طور که تایپ شده نگه می‌دارد، pre-wrap نگه می‌دارد و باز هم می‌شکند و pre-line فقط رفتن به سطر بعد را نگه می‌دارد. ادغام فضای سفید نیمه‌ی «با فاصله‌ها چه شود» آن است. وقتی یک کلمه از جعبه‌اش بلندتر است، شکستن سرریز = "anywhere" می‌گذارد بشکند تا از صفحه بیرون نزند، که دقیقاً چیزی است که یک نشانی وب بلند لازم دارد. شکستن واژه = "break-all" همه‌جا می‌شکند، حتی جایی که کلمه جا می‌شد، و keep-all برای چینی، ژاپنی و کره‌ای است و شکستن درون کلمه را ممنوع می‌کند. خط تیره = "auto" کلمه‌ها را در زبان‌هایی که مرورگر برایشان فرهنگ دارد خط‌تیره می‌گذارد، اگر عنصر زبان درستی داشته باشد. پیچش متن = "balance" سطرهای یک تیتر کوتاه را هم‌اندازه می‌کند و pretty از سطر آخری که فقط یک کلمه‌ی کوتاه دارد پرهیز می‌کند.

web-font-wrapping.salam

صفحه:
    عنوان = "شکستن متن بلند"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: عرض = 180 فضای سفید = "nowrap" سرریز = "hidden" سرریز متن = "ellipsis" پس زمینه = "#f1f5f9" فضا پایین = 12 محتوا = "این جمله برای جعبه‌اش بسیار بلند است" پایان
    جعبه: جهت = "ltr" عرض = 180 شکستن سرریز = "anywhere" پس زمینه = "#e0f2fe" فضا پایین = 12 محتوا = "https://example.com/a/very/long/address/that-does-not-fit" پایان
    جعبه: جهت = "ltr" عرض = 180 شکستن واژه = "break-all" پس زمینه = "#fef9c3" فضا پایین = 12 محتوا = "Break-all cuts at any letter, even in short words." پایان
    جعبه: عرض = 180 خط تیره = "auto" زبان = "en" جهت = "ltr" پس زمینه = "#dcfce7" فضا پایین = 12 محتوا = "Hyphenation helps incomprehensibilities fit narrow columns." پایان
    جعبه: عرض = 180 فضای سفید = "pre-line" پس زمینه = "#fae8ff" محتوا = "سطرهای سرچشمه\nحفظ می‌شوند\nبا pre-line." پایان
پایان

برای نشان دادن چند سطر نخست یک متن بلند دو ابزار دارید. سرریز متن = "ellipsis" انتهای بریده‌ی یک سطر را با سه‌نقطه عوض می‌کند و محدود کردن سطرها یک بلوک را به چند سطر محدود می‌کند. هر دو تازه یا حساس‌اند، پس نمونه‌ی زیر را همان‌طور که نوشته شده بسازید: با یک بیشینه ارتفاع و سرریز = "hidden" به‌عنوان پشتیبانی که همه‌جا کار می‌کند.

web-font-clamp.salam

صفحه:
    عنوان = "محدود کردن سطرها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        عرض = 260
        ارتفاع خط = 1.9
        محدود کردن سطرها = 3
        سرریز = "hidden"
        بیشینه ارتفاع = "5.7em"
        پس زمینه = "#f1f5f9"
        فاصله = "0 10"
        محتوا = "پیش‌نمایش کارت فقط چند سطر نخست یک متن بلند را نشان می‌دهد، تا همه‌ی کارت‌های یک فهرست هم‌قد بمانند، هرچه نویسنده نوشته باشد. هرچه بعد از سطر سوم باشد اینجا بریده می‌شود."
    پایان
    سرتیتر: اندازه = 3 پیچش متن = "balance" بیشینه عرض = 260 محتوا = "یک تیتر بلند که به دو سطر هم‌اندازه شکسته می‌شود" پایان
پایان

سرریز متن تنها کاری نمی‌کند. سه ویژگی با هم می‌خواهد: سرریز (چیزی جز visible)، فضای سفید = "nowrap" و پهنای محدود. اگر سه‌نقطه نمی‌بینید، یکی از سه نیست.

جهت و متن عمودی

جهت متن (direction) برای متن یک عنصر ltr یا rtl را برمی‌گزیند. در عمل جهت را با ویژگی جهت تنظیم می‌کنید (درس سرصفحه و ویژگی‌های همگانی را ببینید)، چون به صفحه‌خوان هم خبر می‌دهد، و ویژگی CSS را برای قاعده‌ای نگه می‌دارید که روی عنصرهای بسیار اثر دارد. دوسویه یونیکد ترتیب متن با جهت‌های آمیخته را تعیین می‌کند و bidi-override ترتیب را هر حرفی که باشد تحمیل می‌کند؛ عنصرهای جداساز جهت و جهت اجباری در درس عنصرهای متن همین کار را می‌کنند.

حالت نوشتار (writing-mode) جلوتر می‌رود و خود سطرها را می‌چرخاند: vertical-rl در امتداد صفحه به پایین می‌نویسد و سطرها را از راست به چپ روی هم می‌چیند، مثل ژاپنی و چینی. جهت‌گیری متن تعیین می‌کند حرف‌های خطوط دیگر بایستند یا بخوابند و ترکیب ایستاده متن رشته‌ی کوتاهی مثل یک سال را در جای یک نویسه جا می‌دهد.

web-font-vertical.salam

صفحه:
    عنوان = "نوشتن عمودی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: نمایش = "flex" شکاف = 32 اندازه قلم = 22 ارتفاع = 220
        جعبه: حالت نوشتار = "vertical-rl" محتوا = "سطرهای عمودی از بالا به پایین می‌روند" پایان
        جعبه: حالت نوشتار = "vertical-rl" جهت‌گیری متن = "upright" محتوا = "UPRIGHT" پایان
        جعبه: حالت نوشتار = "vertical-rl"
            محتوا = "در "
            تکه: ترکیب ایستاده متن = "all" محتوا = "2026" پایان
        پایان
    پایان
پایان

آوانما و نشانه‌ی تأکید

آوانما یادداشت کوچکی بالا یا پایین یک واژه است، بیشتر تلفظ یک واژه‌ی چینی یا ژاپنی، که با عنصرهای آوانما و متن آوانما نوشته می‌شود. جای آوانما سو را تعیین می‌کند و تراز آوانما می‌گوید یادداشت چگونه روی واژه پخش شود. متن آسیای شرقی حرف کج ندارد، پس تأکید به شکل نشانه‌های کوچک روی هر نویسه کشیده می‌شود، با سبک تاکید متن، رنگ تاکید متن و موقعیت تاکید متن. کوتاه‌نویسی‌اش تاکید متن است.

web-font-ruby.salam

صفحه:
    عنوان = "آوانما و تأکید"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" اندازه قلم = 26 ارتفاع خط = 2.4 پایان
    پاراگراف:
        آوانما: جای آوانما = "over" تراز آوانما = "center"
            محتوا = "東京"
            پرانتز آوانما: محتوا = "(" پایان
            متن آوانما: محتوا = "とうきょう" پایان
            پرانتز آوانما: محتوا = ")" پایان
        پایان
    پایان
    پاراگراف: سبک تاکید متن = "filled dot" رنگ تاکید متن = "crimson" محتوا = "نقطه‌ها تأکید را نشان می‌دهند" پایان
    پاراگراف: سبک تاکید متن = "open circle" موقعیت تاکید متن = "under right" محتوا = "حلقه‌هایی زیر متن" پایان
پایان

متن فارسی و عربی

هرچه بالا آمد برای فارسی هم کار می‌کند و چند نکته مراقبت می‌خواهد. صفحه در پرونده‌ی فارسی از پیش زبان = "fa" و جهت راست‌به‌چپ دارد. پس:

قلمی بگیرید که حرف فارسی دارد و یک قلم مطمئن مثل Tahoma ته پشته بگذارید. بسیاری از قلم‌هایی که برای انگلیسی ساخته شده‌اند حرف فارسی ندارند و مرورگر جای خالی را حرف‌به‌حرف از قلم دیگری پر می‌کند که ناهموار به نظر می‌رسد. راه‌حل واقعی یک قلم وب مثل وزیرمتن یا استعداد است: با عنصر قلم و بازه‌ی بلوک فارسی بارگذاری‌اش کنید.
برای متن اصلی ارتفاع خط را حدود ۱٫۹ بگذارید. حرف‌های فارسی نقطه و نشانه دارند که بالا و پایین‌شان جا می‌خواهد.
برای تراز از start و end استفاده کنید، نه left و right.
فاصله حروف را صفر نگه دارید. پیوندها را هم خاموش نکنید، چون شکل‌های پیوسته خودِ خط هستند.
رقم‌ها نویسه‌اند، نه سبک. ۱۲۳ و 123 نویسه‌های متفاوتی‌اند و هیچ ویژگی CSS یکی را به دیگری تبدیل نمی‌کند. عددی نسخه قلم فقط ظاهر رقم‌هایی را که قلم دارد عوض می‌کند، مثل شکل هم‌پهنا برای ستون‌ها.
مرورگرها فارسی را خط‌تیره نمی‌کنند و justify وقتی سطرها بلندند خوب کار می‌کند.
در حروف‌چینی فارسی کج کردن کم‌رواج است. سطری که فقط oblique باشد کج دیده می‌شود، که برای یک نقل قول کوتاه خوب است ولی خواندن یک بند کامل را خسته می‌کند. برای تأکید پررنگ یا اندازه‌ی دیگر را به کار ببرید.

web-font-persian.salam

صفحه:
    عنوان = "متن فارسی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: ارتفاع خط = 1.9 فضا پایین = 16 کادر = "1px solid #cbd5e1" فاصله = 10 بیشینه عرض = 340
        محتوا = "هر کتاب برای خواننده‌ای نوشته می‌شود. این بند ۳ سطر دارد و ارتفاع خطش ۱٫۹ است تا نقطه‌ها و کسره‌ها جا داشته باشند."
    پایان
    جعبه: ارتفاع خط = 1.2 فضا پایین = 16 کادر = "1px solid #fecaca" فاصله = 10 بیشینه عرض = 340
        محتوا = "همین متن با ارتفاع خط ۱٫۲ فشرده و خسته‌کننده می‌شود، چون سطرها به هم می‌چسبند و نقطه‌ها روی هم می‌افتند."
    پایان
    جعبه: ارتفاع خط = 1.9 ترازمتن = "justify" بیشینه عرض = 340 کادر = "1px solid #cbd5e1" فاصله = 10
        محتوا = "ترازشدن دوطرفه در متن فارسی خوب کار می‌کند، به شرط آنکه خط‌ها به اندازه‌ی کافی بلند باشند."
    پایان
پایان

نمونه همان متن را در سه جعبه نشان می‌دهد: جعبه‌ی نخست ارتفاع خط راحت دارد، دومی ارتفاع خط تنگی که سطرها نزدیک است به هم بچسبند، و سومی دوطرفه است. پیش‌نمایش صفحه را همان‌طور که مترجم ساخته نشان می‌دهد، با حرف‌های فارسی از سامانه.

مرجع: همه‌ی ویژگی‌های قلم و متن

هر ورودی نام را در سلام، نامش در CSS، مقدارهای قابل قبول و یک نمونه نشان می‌دهد. نمونه‌ها را مترجم بررسی کرده است، پس هر کدام را می‌توانید درون یک بلوک صفحه: بگذارید. رنگ متن، رنگ، به درس رنگ و پس‌زمینه مربوط است و جعبه‌ی دور متن به درس‌های بعد از آن. نام‌های فارسی در هر پرونده کار می‌کنند و درس‌های فارسی از آن‌ها استفاده می‌کنند.

قلم: خانواده، اندازه، وزن و سبک

این‌ها قلم و ظاهر پایه‌اش را برمی‌گزینند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`خانواده قلم` font family font-family	فهرست قلم‌هایی که به ترتیب امتحان می‌شوند. مرورگر نخستین قلمی را برمی‌دارد که نصب (یا بارگذاری) شده باشد و حرف‌های لازم را داشته باشد، پس همیشه ته فهرست یک خانواده‌ی عمومی بگذارید: `serif`، `sans-serif`، `monospace`، `cursive`، `fantasy` یا `system-ui`. نامی که فاصله دارد درون رشته در گیومه‌ی تکی می‌آید. [comma list of names, quoted names and generic families (serif, sans-serif, ...)]	`جعبه: خانواده قلم = "Georgia, 'Times New Roman', serif" محتوا = "یک پشته‌ی سریف" پایان`
`اندازه قلم` font size font-size	اندازه‌ی حرف‌ها. عدد تنها یعنی پیکسل. `"1.5rem"` نسبت به اندازه‌ی ریشه‌ی صفحه است، `"1.2em"` و درصد نسبت به اندازه‌ی والد، و `vw` نسبت به پهنای پنجره. واژه‌های `xx-small` تا `xx-large` گام‌هایی هستند که مرورگر تعیین می‌کند و `smaller` و `larger` یک گام از والد فاصله می‌گیرند. [length / percentage / xx-small, x-small, small, medium, large, x-large, ...]	`جعبه: اندازه قلم = "1.5rem" محتوا = "یک‌ونیم برابر اندازه‌ی ریشه" پایان`
`تنظیم اندازه قلم` font size adjust font-size-adjust	قلم پشتیبان را طوری بزرگ یا کوچک می‌کند که حرف‌های کوچکش به اندازه‌ی قلم نخست بلند دیده شوند. عدد نسبت دلخواه ارتفاع حرف کوچک به اندازه‌ی قلم است، مثلاً `0.5`، و `none` آن را خاموش می‌کند. وقتی قلم وب با قلم پشتیبان عوض می‌شود، متن را از جهش اندازه نجات می‌دهد. [number / none]	`جعبه: تنظیم اندازه قلم = "0.5" محتوا = "اندازه‌ی ظاهری یکسان در هر قلم" پایان`
`وزن قلم` font weight font-weight	ضخامت خط حرف‌ها. عددی از ۱ تا ۱۰۰۰ بدهید (۱۰۰ باریک، ۴۰۰ معمولی، ۷۰۰ پررنگ، ۹۰۰ سیاه) یا واژه‌های `normal` و `bold`. `bolder` و `lighter` یک گام از والد فاصله می‌گیرند. قلمی که فقط دو وزن دارد نزدیک‌ترین را نشان می‌دهد و قلم متغیر هر عددی را نشان می‌دهد. [number / normal, bold, bolder, lighter]	`جعبه: وزن قلم = 700 محتوا = "متن پررنگ" پایان`
`سبک قلم` font style font-style	طرح راست، کج یا مایل را انتخاب می‌کند. `italic` از حرف‌های کج خود قلم استفاده می‌کند اگر داشته باشد و `oblique` حرف‌های راست را کج می‌کند. قلم‌های فارسی کمتر طرح کج دارند، پس مرورگر حرف‌ها را خودش کج می‌کند. [normal, italic, oblique]	`جعبه: سبک قلم = "italic" محتوا = "متن کج" پایان`
`کشیدگی قلم` font stretch font-stretch	طرح باریک‌تر یا پهن‌تری از قلم را برمی‌گزیند، از `50%` تا `200%` یا با واژه‌هایی مثل `condensed` و `expanded`. فقط وقتی کاری می‌کند که قلم طرح‌هایی با پهنای دیگر داشته باشد و خودش هرگز حرف‌ها را فشرده نمی‌کند. [percentage / normal, condensed, expanded]	`جعبه: کشیدگی قلم = "condensed" محتوا = "طرح باریک" پایان`
`پهنای قلم` font width font-width	نام تازه‌تر `font stretch` با همان مقدارها. مرورگرهای قدیمی‌تر فقط `font stretch` را می‌شناسند، پس اگر صفحه باید همه‌جا کار کند آن را به کار ببرید. [a percentage / a font-stretch keyword]	`جعبه: پهنای قلم = "75%" محتوا = "هفتاد و پنج درصد پهنا" پایان`
`قلم` font font	کوتاه‌نویسی سبک، وزن، پهنا، اندازه، ارتفاع خط و خانواده در یک رشته: `"italic 700 1.25rem/1.5 Georgia, serif"`. اندازه و خانواده الزامی‌اند و به همین ترتیب می‌آیند، و هر ویژگی که ننویسید به مقدار عادی برمی‌گردد، پس می‌تواند تنظیم‌های پیشین را پاک کند. [CSS-wide keywords only]	`جعبه: قلم = "italic 700 1.25rem/1.5 Georgia, serif" محتوا = "سبک، وزن، اندازه، ارتفاع خط و خانواده یک‌جا" پایان`
`ساخت قلم` font synthesis font-synthesis	تعیین می‌کند مرورگر وقتی قلم چیزی را ندارد چه چیزی را بسازد: `weight` (پررنگ)، `style` (کج)، `small-caps` و `position` (زیرنویس و بالانویس). `none` همه را ممنوع می‌کند و شکل حرف‌ها را به طراح قلم وفادار نگه می‌دارد. [up to 4 values]	`جعبه: ساخت قلم = "none" محتوا = "بدون پررنگ و کج ساختگی" پایان`
`ساخت وزن قلم` font synthesis weight font-synthesis-weight	اجازه می‌دهد (`auto`) یا ممنوع می‌کند (`none`) که مرورگر با کلفت‌تر کردن حرف‌های معمولی، پررنگ بسازد. [auto / none]	`جعبه: ساخت وزن قلم = "none" محتوا = "بدون پررنگ ساختگی" پایان`
`ساخت سبک قلم` font synthesis style font-synthesis-style	اجازه می‌دهد (`auto`) یا ممنوع می‌کند (`none`) که با کج کردن حرف‌های راست، کج ساخته شود. `oblique-only` فقط برای مایل اجازه می‌دهد و آن را به‌جای `italic` نمی‌گذارد. [auto / none / oblique-only]	`جعبه: ساخت سبک قلم = "none" محتوا = "بدون کج ساختگی" پایان`
`ساخت حروف کوچک قلم` font synthesis small caps font-synthesis-small-caps	اجازه می‌دهد (`auto`) یا ممنوع می‌کند (`none`) که حروف کوچک بزرگ‌نما با کوچک کردن حروف بزرگ ساخته شوند. [auto / none]	`جعبه: ساخت حروف کوچک قلم = "none" محتوا = "بدون حروف کوچک ساختگی" پایان`
`ساخت جایگاه قلم` font synthesis position font-synthesis-position	اجازه می‌دهد (`auto`) یا ممنوع می‌کند (`none`) که زیرنویس و بالانویس با کوچک کردن و جابه‌جایی حرف‌های معمولی ساخته شوند. [auto / none]	`جعبه: ساخت جایگاه قلم = "none" محتوا = "بدون بالانویس ساختگی" پایان`

قلم: ویژگی‌ها، نسخه‌ها و قلم متغیر

این‌ها شکل‌ها و محورهای اضافه‌ای را که قلم دارد روشن می‌کنند. اثرشان به قلم بستگی دارد.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`فاصله‌گذاری قلم` font kerning font-kerning	فاصله‌گذاری جفت‌حرف‌های قلم را روشن یا خاموش می‌کند. این فاصله‌گذاری بعضی جفت‌حرف‌ها، مثل AV، را به هم نزدیک می‌کند. `auto` و `normal` آن را به کار می‌برند و `none` نه. برای متن روشنش بگذارید و فقط برای آزمایش یا جلوه‌ی ویژه خاموشش کنید. [auto, normal, none]	`جعبه: فاصله‌گذاری قلم = "none" محتوا = "AVATAR WAVE بدون فاصله‌گذاری جفت‌حرف‌ها" پایان`
`اندازه بصری قلم` font optical sizing font-optical-sizing	به قلم متغیری که محور اندازه‌ی بصری دارد اجازه می‌دهد شکل حرف‌ها را با اندازه‌ی متن عوض کند: در اندازه‌ی کوچک محکم‌تر و در اندازه‌ی بزرگ ظریف‌تر. `auto` این کار را می‌کند و `none` یک طرح را نگه می‌دارد. روی قلم‌های معمولی اثری ندارد. [auto, none]	`جعبه: اندازه بصری قلم = "none" محتوا = "یک طرح در همه‌ی اندازه‌ها" پایان`
`نسخه قلم` font variant font-variant	کوتاه‌نویسی که چند شکل جایگزین حرف را یک‌جا برمی‌گزیند: `small-caps`، شکل رقم‌ها، پیوندها و مانند آن، یا `normal` برای بازنشانی. اگر فقط یک چیز را می‌خواهید تنظیم کنید، ویژگی‌های بلندتر زیر را به کار ببرید. [up to 99 values]	`جعبه: نسخه قلم = "small-caps" محتوا = "حروف کوچک بزرگ‌نما" پایان`
`حروف بزرگ قلم` font variant caps font-variant-caps	شکل‌های حروف بزرگ را برمی‌گزیند: `small-caps` (حرف‌های کوچک به بزرگ‌نمای کوچک تبدیل می‌شوند)، `all-small-caps` (حروف بزرگ هم)، `petite-caps`، `unicase` و `titling-caps`. اگر قلم این شکل‌ها را نداشته باشد، مرورگرها دو مورد نخست را می‌سازند. [normal, small-caps, all-small-caps]	`جعبه: حروف بزرگ قلم = "all-small-caps" محتوا = "همه‌ی حرف‌ها بزرگ‌نمای کوچک" پایان`
`پیوندها نسخه قلم` font variant ligatures font-variant-ligatures	پیوندها را، یعنی شکل‌های به‌هم‌چسبیده‌ای مثل fi، تنظیم می‌کند. واژه‌ها: `common-ligatures`، `no-common-ligatures`، `discretionary-ligatures`، `historical-ligatures`، `contextual` و `none` برای خاموش کردن همه. در فارسی و عربی پیوندها را خاموش نکنید، چون شکل‌های پیوسته خودِ خط هستند. [up to 4 values]	`جعبه: پیوندها نسخه قلم = "no-common-ligatures" محتوا = "office affinity بدون پیوند" پایان`
`عددی نسخه قلم` font variant numeric font-variant-numeric	شکل و فاصله‌ی رقم‌ها را برمی‌گزیند: `lining-nums`، `oldstyle-nums`، `proportional-nums`، `tabular-nums` (همه‌ی رقم‌ها هم‌پهنا، برای ستون‌ها)، `diagonal-fractions`، `slashed-zero` و `ordinal`. قلم باید این شکل‌ها را داشته باشد. رقم انگلیسی را به فارسی تبدیل نمی‌کند: این به نویسه‌هایی بستگی دارد که می‌نویسید. [up to 5 values]	`جعبه: عددی نسخه قلم = "tabular-nums" محتوا = "1111 و 8888 زیر هم می‌ایستند" پایان`
`آسیایی شرق نسخه قلم` font variant east asian font-variant-east-asian	شکل نویسه‌های چینی و ژاپنی را برمی‌گزیند: `simplified`، `traditional`، استانداردهای جی‌آی‌اس از `jis78` تا `jis04`، `full-width`، `proportional-width` و `ruby`. فقط برای قلمی اهمیت دارد که چند شکل از یک نویسه داشته باشد. [up to 3 values]	`جعبه: آسیایی شرق نسخه قلم = "traditional" محتوا = "漢字 به شکل‌های سنتی" پایان`
`جایگزین های نسخه قلم` font variant alternates font-variant-alternates	شکل‌های جایگزینی را که قلم دارد روشن می‌کند: `historical-forms`، یا تابع‌های `stylistic()`، `styleset()`، `swash()`، `ornaments()` و `annotation()` که نامی را می‌گیرند که در یک قاعده‌ی مقدارهای ویژگی قلم تعریف شده است. [up to 9 of historical-forms or a function like swash()]	`جعبه: جایگزین های نسخه قلم = "historical-forms" محتوا = "شکل‌های تاریخی حرف‌ها" پایان`
`جایگاه نسخه قلم` font variant position font-variant-position	از شکل‌های زیرنویس (`sub`) یا بالانویس (`super`) خود قلم استفاده می‌کند که هم‌وزن متن طراحی شده‌اند. `normal` هیچ‌کدام را به کار نمی‌برد. [normal / sub / super]	`جعبه: جایگاه نسخه قلم = "super" محتوا = "x2 با بالانویس واقعی" پایان`
`گونه شکلک قلم` font variant emoji font-variant-emoji	تعیین می‌کند نویسه‌هایی که هم نماد و هم شکلک‌اند چگونه کشیده شوند: `text` (نماد ساده‌ی تک‌رنگ)، `emoji` (تصویر رنگی)، `unicode` (همان‌طور که خود نویسه می‌گوید) یا `normal` (مرورگر تصمیم می‌گیرد). [normal / text / emoji / unicode]	`جعبه: گونه شکلک قلم = "text" محتوا = "قلب به شکل متن ساده: ❤" پایان`
`تنظیمات ویژگی قلم` font feature settings font-feature-settings	ویژگی‌های اوپن‌تایپ را با برچسب چهارحرفی‌شان روشن و خاموش می‌کند: فهرستی با ویرگول مثل `'smcp' 1, 'liga' 0` که ۱ روشن و ۰ خاموش است. این ابزار سطح پایین است، پس تا می‌شود ویژگی‌های `font variant` را به کار ببرید و این را برای چیزهایی نگه دارید که ویژگی دیگری ندارند. [comma list]	`جعبه: تنظیمات ویژگی قلم = "'smcp' 1, 'liga' 0" محتوا = "حروف کوچک بزرگ‌نما، بدون پیوند" پایان`
`تنظیمات تغییر قلم` font variation settings font-variation-settings	محورهای یک قلم متغیر را با برچسب چهارحرفی‌شان تنظیم می‌کند، به شکل فهرستی با ویرگول مثل `'wght' 650, 'wdth' 90`. قلم‌های معمولی نادیده‌اش می‌گیرند. جایی که ویژگی معمولی هست، مثل `font weight` برای `wght`، همان را به کار ببرید. [comma list]	`جعبه: تنظیمات تغییر قلم = "'wght' 650, 'wdth' 90" محتوا = "وزنی میان دو گام" پایان`
`پالت قلم` font palette font-palette	پالت رنگ یک قلم رنگی را برمی‌گزیند: `light`، `dark`، `normal` یا نام پالتی که با قاعده‌ی `@font-palette-values` تعریف شده است. قلم‌هایی که لایه‌ی رنگی ندارند نادیده‌اش می‌گیرند. [normal / light / dark / an ident / palette-mix()]	`جعبه: پالت قلم = "dark" محتوا = "قلم رنگی با پالت تیره" پایان`
`جایگزینی زبان قلم` font language override font-language-override	سامانه‌ی زبان اوپن‌تایپ را به‌جای آنچه از ویژگی `lang` می‌آید اجباری می‌کند، به شکل برچسبی چهارحرفی در گیومه مثل `'TRK'`. `normal` به حالت پیش‌فرض برمی‌گردد. به‌ندرت لازم می‌شود. [a quoted string / normal]	`جعبه: جایگزینی زبان قلم = "'TRK'" محتوا = "شکل ترکی حرف‌ها" پایان`

عنصر قلم وب

عنصر قلم مستقیم درون صفحه می‌آید.

`قلم` (English: `font`)

یک قلم وب را معرفی می‌کند و به یک قاعده‌ی @font-face تبدیل می‌شود. name و url الزامی‌اند و عنصر مستقیم درون صفحه می‌آید. بعد از آن نام را در font family بنویسید. مرورگر فایل را فقط وقتی دانلود می‌کند که متنی از قلم استفاده کند و تا آن موقع قلم بعدیِ پشته را نشان می‌دهد.

قلم:
    نام = "قلم درس"
    نشانی = "/fonts/course-sans.woff2"
    وزن = 400
    نمایش = swap
پایان
جعبه: خانواده قلم = "قلم درس, Tahoma, sans-serif" محتوا = "با قلم درس نوشته شد" پایان

الزامی: name, url · فقط درون: page · عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`نام` name	نام خانواده‌ای که برای قلم برمی‌گزینید. متن آزاد است و به نام فایل ربطی ندارد: همین نام را بعداً در `font family` می‌نویسید. الزامی. [string]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans.woff2" پایان جعبه: خانواده قلم = "قلم درس, Tahoma, sans-serif" محتوا = "نام همان چیزی است که خانواده قلم به کار می‌برد" پایان`
`نشانی` url	فایل قلم کجاست. یک نشانی بنویسید یا چند نشانی جدا از هم با فاصله، بهترین اول: مرورگر نخستین قالبی را برمی‌دارد که می‌فهمد (woff2 پیش از woff). نشانی نسبی از روی صفحه خوانده می‌شود، نشانی ناامنی مثل `javascript:` خطاست و فایل نسبی‌ای که کنار برنامه نباشد هشدار می‌دهد. الزامی. [url (list)]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans.woff2 /fonts/course-sans.woff" پایان`
`نوع` type	قالب فایل: `woff2`، `woff`، `ttf` (`truetype`)، `otf` (`opentype`) یا `collection`. ننویسید تا سلام آن را از ته نشانی و بعد از بایت‌های فایلی که کنار برنامه است پیدا کند. نوعی که با فایل نخواند خطاست. [enum: font_format]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans.bin" نوع = woff2 پایان`
`وزن` weight	وزنی که این فایل می‌دهد، عددی از ۱ تا ۱۰۰۰ مثل `400` یا `700`. برای قلم متغیر بازه را درون یک رشته بدهید، مثل `"100 900"`. عددِ بیرون از بازه خطاست. برای هر وزن یک `font` با همان نام بنویسید. [string]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans-bold.woff2" وزن = 700 پایان`
`سبک` style	سبکی که این فایل می‌دهد: `normal`، `italic` یا `oblique`. مرورگر فایلی را برمی‌دارد که سبکش با متن بخواند. [enum: font_style]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans-italic.woff2" سبک = italic پایان`
`نمایش` display	تا وقتی فایل قلم هنوز بارگذاری می‌شود، مرورگر چه نشان دهد. `swap` بی‌درنگ قلم پشتیبان را نشان می‌دهد و با رسیدن فایل عوضش می‌کند (انتخاب معمول)، `block` متن را لحظه‌ای پنهان می‌کند، `fallback` و `optional` در اینترنت کند دیر یا هرگز عوض نمی‌کنند و `auto` را به مرورگر می‌سپارد. [enum: font_display]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans.woff2" نمایش = swap پایان`
`بازه` range	نویسه‌هایی که این فایل می‌پوشاند، به شکل بازه‌های یونیکد جدا شده با ویرگول. مرورگر فایل را فقط وقتی دانلود می‌کند که صفحه نویسه‌ای از آن بازه داشته باشد، پس قلمی که به یک فایل لاتین و یک فایل فارسی بخش شده فقط آنچه را صفحه لازم دارد بارگذاری می‌کند. `U+0600-06FF` بلوک عربی و فارسی است. [string]	`قلم: نام = "قلم درس" نشانی = "/fonts/course-sans-arabic.woff2" بازه = "U+0600-06FF, U+200C-200D" پایان`

ظاهر متن: تراز، حروف، خط و سایه

این‌ها چگونگی جا گرفتن و کشیده شدن یک سطر متن را عوض می‌کنند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`ترازمتن` text align text-align	خط‌های یک بلوک را میان دو لبه‌اش جا می‌دهد: `start` و `end` از جهت خواندن پیروی می‌کنند (در فارسی راست و چپ)، `left` و `right` ثابت‌اند، `center` وسط می‌گذارد و `justify` همه‌ی سطرها جز آخر را تا پهنای کامل می‌کشد. به‌جای `left` از `start` استفاده کنید تا یک صفحه در هر دو جهت درست باشد. [start, end, left, right, center, justify]	`جعبه: ترازمتن = "center" محتوا = "متن وسط‌چین" پایان`
`تراز خط آخر` text align last text-align-last	ترازِ آخرین سطر یک بلوک و سطرهایی را که با شکست اجباری تمام می‌شوند تعیین می‌کند. همان واژه‌های `text align` را می‌گیرد، به‌علاوه‌ی `auto`. بیشتر با `text align = "justify"` به کار می‌رود. [auto, start, end, left, right, center, ...]	`جعبه: تراز خط آخر = "center" محتوا = "سطر آخر یک بلوک دوطرفه وسط می‌ایستد. این متن در جعبه‌ای باریک چند سطر می‌شود تا دیده شود." پایان`
`چینش متن` text justify text-justify	خط دوطرفه فضای اضافه‌اش را از کجا می‌گیرد: `inter-word` (میان کلمه‌ها)، `inter-character` (میان حرف‌ها)، `auto` یا `none`. فقط وقتی اهمیت دارد که `text align` برابر `justify` باشد. [auto, none, inter-word, inter-character]	`جعبه: ترازمتن = "justify" چینش متن = "inter-character" عرض = 260 محتوا = "هنگام دوطرفه کردن فاصله میان حرف‌ها اضافه می‌شود، همان‌طور که چینی و ژاپنی چیده می‌شوند." پایان`
`تورفتگی متن` text indent text-indent	فضای خالی پیش از نخستین سطر یک بلوک. یک اندازه یا درصد، و عدد منفی سطر نخست را بیرون می‌برد که همراه با فاصله‌ی درونی تورفتگی آویزان می‌سازد. [length / percentage]	`جعبه: تورفتگی متن = "2em" محتوا = "سطر نخست بند دو حرف تو می‌رود. بقیه‌ی سطرها جابه‌جا نمی‌شوند، پس بند مثل کتاب خوانده می‌شود." پایان`
`تبدیل متن` text transform text-transform	بزرگی و کوچکی حرف‌های نمایش‌داده‌شده را بدون دست زدن به خود متن عوض می‌کند: `uppercase`، `lowercase`، `capitalize` (نخستین حرف هر کلمه) یا `none`. فارسی و عربی حرف بزرگ و کوچک ندارند، پس اثری روی آن‌ها ندارد. [none, uppercase, lowercase, capitalize]	`جعبه: تبدیل متن = "uppercase" محتوا = "ABC به حروف بزرگ" پایان`
`تزیین متن` text decoration text-decoration	کوتاه‌نویسی نوع، سبک، رنگ و ضخامت خط‌هایی که روی متن کشیده می‌شوند: `"underline wavy crimson"`. پیوندها به‌طور پیش‌فرض زیرخط دارند و `"none"` آن را برمی‌دارد. [CSS-wide keywords only]	`جعبه: تزیین متن = "underline wavy crimson" محتوا = "زیرخط موجی قرمز" پایان`
`خط تزیین متن` text decoration line text-decoration-line	کدام خط‌ها کشیده شوند: `underline`، `overline`، `line-through` یا `none`. می‌توانید چند واژه را در یک رشته بنویسید. [none, underline, overline, line-through; up to 3 values]	`جعبه: خط تزیین متن = "underline overline" محتوا = "یک خط بالا و یک خط پایین" پایان`
`سبک تزیین متن` text decoration style text-decoration-style	ظاهر خط: `solid`، `double`، `dotted`، `dashed` یا `wavy`. برای دیده شدن به یک خط تزیین نیاز دارد. [solid, double, dotted, dashed, wavy]	`جعبه: سبک تزیین متن = "dashed" محتوا = "زیرخط خط‌چین" پایان`
`رنگ تزیین متن` text decoration color text-decoration-color	رنگ خط تزیین. اگر ننویسید، خط رنگ خود متن را می‌گیرد. [color]	`جعبه: خط تزیین متن = "underline" رنگ تزیین متن = "crimson" محتوا = "زیرخط زرشکی" پایان`
`ضخامت تزیین متن` text decoration thickness text-decoration-thickness	ضخامت خط: یک اندازه، درصدی از اندازه‌ی قلم، `auto` یا `from-font` که همان را به کار می‌برد که قلم پیشنهاد می‌دهد. [length / percentage / auto, from-font]	`جعبه: خط تزیین متن = "underline" ضخامت تزیین متن = 4 محتوا = "زیرخط ضخیم" پایان`
`پرش جوهر تزیین` text decoration skip ink text-decoration-skip-ink	اینکه زیرخط یا خط بالایی از جاهایی از حرف که به آن می‌خورد، مثل دم `g`، بپرد یا نه. `auto` می‌پرد، `none` از میانشان می‌کشد و `all` در هر خطی می‌پرد. [auto, none, all]	`جعبه: خط تزیین متن = "underline" پرش جوهر تزیین = "none" محتوا = "خط از میان حرف‌های gypsy و jumpy می‌گذرد" پایان`
`فاصله زیرخط` text underline offset text-underline-offset	فاصله‌ی زیرخط تا خط پایه: یک اندازه، درصد یا `auto`. عدد بزرگ‌تر آن را از حرف‌ها دورتر می‌کند. [length / percentage / auto]	`جعبه: خط تزیین متن = "underline" فاصله زیرخط = 8 محتوا = "زیرخطی که پایین‌تر رفته" پایان`
`جای زیرخط` text underline position text-underline-position	زیرخط کجا می‌نشیند: `auto`، `under` (زیر همه‌ی دنباله‌ها) یا برای متن عمودی `left` و `right`. برای خط‌هایی با دنباله‌های بلند مفید است. [auto, under, left, right; up to 2 values]	`جعبه: خط تزیین متن = "underline" جای زیرخط = "under" محتوا = "خط زیر پایین‌ترین حرف‌ها می‌نشیند" پایان`
`سایه متن` text shadow text-shadow	یک یا چند سایه، جداشده با ویرگول. هر سایه این است: جابه‌جایی افقی، جابه‌جایی عمودی، محوشدگی اختیاری و رنگ، مثل `"2px 2px 4px #94a3b8"`. چند سایه درخشش و دور می‌سازد. تباین را آن‌قدر نگه دارید که متن خوانا بماند. [comma list]	`جعبه: سایه متن = "2px 2px 4px #94a3b8" محتوا = "سایه‌ی نرم" پایان`
`خط دور متن` webkit text stroke -webkit-text-stroke	دور هر حرف یک خط می‌کشد: یک ضخامت و یک رنگ، مثل `"1px #0f172a"`. همه‌ی مرورگرهای امروز آن را با نام `-webkit-` پشتیبانی می‌کنند. با رنگ پر شفاف ترکیبش کنید تا متن توخالی بسازید. [length and color, in either order]	`جعبه: خط دور متن = "1px #0f172a" رنگ پر متن = "transparent" اندازه قلم = 36 وزن قلم = 700 محتوا = "خط دور" پایان`
`ضخامت خط دور متن` webkit text stroke width -webkit-text-stroke-width	فقط ضخامت خط دور: یک اندازه یا `thin`، `medium`، `thick`. خط ضخیم به درون حرف‌ها می‌خورد، چون وسطش روی لبه‌ی حرف است. [length / thin / medium / thick]	`جعبه: ضخامت خط دور متن = 2 رنگ خط دور متن = "teal" اندازه قلم = 36 وزن قلم = 700 محتوا = "خط دور ضخیم" پایان`
`رنگ خط دور متن` webkit text stroke color -webkit-text-stroke-color	فقط رنگ خط دور. برای دیده شدن به ضخامتی بیشتر از صفر نیاز دارد. [color]	`جعبه: ضخامت خط دور متن = 1 رنگ خط دور متن = "crimson" اندازه قلم = 36 وزن قلم = 700 محتوا = "خط دور قرمز" پایان`
`رنگ پر متن` webkit text fill color -webkit-text-fill-color	رنگی که درون حرف‌ها را پر می‌کند. وقتی هر دو باشند بر `color` غلبه می‌کند و `transparent` می‌گذارد پس‌زمینه یا خط دور دیده شود. [color]	`جعبه: رنگ پر متن = "#0f766e" محتوا = "پر شده با سبز آبی" پایان`
`نمایش متن` text rendering text-rendering	یک راهنمایی درباره‌ی سرعت در برابر کیفیت: `auto`، `optimizeSpeed`، `optimizeLegibility` (فاصله‌گذاری جفت‌حرف و پیوندها روشن) یا `geometricPrecision`. مرورگرها ممکن است نادیده‌اش بگیرند. [auto, optimizeSpeed, optimizeLegibility, geometricPrecision]	`جعبه: نمایش متن = "optimizeLegibility" محتوا = "بهینه برای خواندن" پایان`

فاصله‌ها و شکستن سطر

این‌ها فاصله‌ی میان سطرها، حرف‌ها و کلمه‌ها را تعیین می‌کنند و اینکه سطرها کجا بشکنند یا بریده شوند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`ارتفاع خط` line height line-height	ارتفاع هر سطر. عدد تنها (`1.6`) در اندازه‌ی قلم خود عنصر ضرب می‌شود و بهترین گزینه است، چون فرزندان خودِ عدد را به ارث می‌برند، نه یک نتیجه‌ی ثابت. اندازه یا درصد ارتفاعی ثابت می‌دهد. برای انگلیسی حدود ۱٫۵ و برای فارسی حدود ۱٫۹ مناسب است. [number / length / percentage / normal]	`جعبه: ارتفاع خط = 1.7 عرض = 260 پس زمینه = "#f1f5f9" محتوا = "سطرهایی که جای نفس کشیدن دارند. عدد در اندازه‌ی قلم ضرب می‌شود، پس با تغییر اندازه همراه متن می‌ماند." پایان`
`فاصله حروف` letter spacing letter-spacing	فاصله‌ی اضافه میان حرف‌ها: یک اندازه، بهتر است به `em` تا با متن بزرگ شود، یا `normal`. مقدار مثبت کوچک به حروف بزرگ و برچسب‌ها می‌آید. هرگز روی فارسی و عربی به کارش نبرید، چون حرف‌هایشان به هم می‌چسبند و باید چسبیده بمانند. [length / normal]	`جعبه: فاصله حروف = "0.2em" تبدیل متن = "uppercase" محتوا = "فاصله‌ی حروف" پایان`
`فاصله واژه‌ها` word spacing word-spacing	فضای اضافه میان کلمه‌ها: یک اندازه، درصد یا `normal`. مقدار منفی آن‌ها را به هم نزدیک می‌کند. [length / percentage / normal]	`جعبه: فاصله واژه‌ها = "0.6em" محتوا = "کلمه‌هایی که کمی از هم دور شده‌اند" پایان`
`تراز عمودی متن` vertical align vertical-align	یک عنصر درون‌خطی یا یک خانه‌ی جدول در راستای عمودی کجا بنشیند: `baseline`، `sub`، `super`، `top`، `middle`، `bottom`، `text-top`، `text-bottom` یا یک اندازه که آن را بالا (مثبت) یا پایین (منفی) می‌برد. جعبه‌ای را درون والدش وسط نمی‌گذارد. [length / percentage / baseline, sub, super, text-top, text-bottom, middle, ...]	`جعبه: تراز عمودی متن = "super" اندازه قلم = 22 محتوا = "x2 بالاتر از خط" پایان`
`فضای سفید` white space white-space	با فاصله‌ها و رفتن به سطر بعد در متن چه می‌شود: `normal` آن‌ها را ادغام می‌کند و می‌شکند، `nowrap` هرگز نمی‌شکند، `pre` همه‌چیز را نگه می‌دارد و نمی‌شکند، `pre-wrap` همه‌چیز را نگه می‌دارد و می‌شکند، `pre-line` فقط رفتن به سطر بعد را نگه می‌دارد و `break-spaces` فاصله‌هایی را نگه می‌دارد که می‌توانند بشکنند. [normal, nowrap, pre, pre-wrap, pre-line, break-spaces]	`جعبه: فضای سفید = "pre-line" عرض = 220 پس زمینه = "#f1f5f9" محتوا = "شکست‌های متن\nهمان‌طور که هست\nدر این جعبه می‌ماند." پایان`
`ادغام فضای سفید` white space collapse white-space-collapse	فقط بخش فاصله‌ی `white space`: `collapse` (ادغام)، `preserve` (نگه داشتن همه)، `preserve-breaks` (نگه داشتن شکست‌ها و ادغام فاصله‌ها)، `preserve-spaces` و `break-spaces`. [collapse, preserve, preserve-breaks, preserve-spaces, break-spaces]	`جعبه: ادغام فضای سفید = "preserve-breaks" عرض = 220 پس زمینه = "#f1f5f9" محتوا = "شکست‌ها\nمی‌مانند، فاصله‌های اضافه می‌روند." پایان`
`شکستن واژه` word break word-break	خط در کجای درون کلمه‌ها می‌تواند بشکند: `normal`، `break-all` (میان هر دو حرف)، `keep-all` (هرگز درون کلمه‌های چینی، ژاپنی و کره‌ای) یا `break-word`. برای متن عادی `overflow wrap` ابزار بهتری است. [normal, break-all, keep-all, break-word]	`جعبه: شکستن واژه = "break-all" عرض = 150 پس زمینه = "#fef9c3" محتوا = "break-all کلمه‌ها را هرجا ببرد می‌شکند" پایان`
`شکستن سرریز` overflow wrap overflow-wrap	به کلمه‌ای که برای جعبه زیادی بلند است اجازه می‌دهد بشکند تا بیرون نزند. `normal` هرگز نمی‌شکند، `break-word` فقط وقتی راه دیگری نباشد می‌شکند و `anywhere` همین را می‌کند و نقطه‌های شکست را هنگام محاسبه‌ی اندازه‌ی جعبه هم به حساب می‌آورد. [normal, break-word, anywhere]	`جعبه: شکستن سرریز = "anywhere" عرض = 150 پس زمینه = "#e0f2fe" محتوا = "https://example.com/an/address/with/no/spaces" پایان`
`قاعده شکستن خط` line break line-break	قاعده‌های جای شکستن سطر چقدر سخت‌گیرانه باشند، بیشتر برای چینی و ژاپنی: `auto`، `loose`، `normal`، `strict` یا `anywhere`. [auto, loose, normal, strict, anywhere]	`جعبه: قاعده شکستن خط = "anywhere" عرض = 150 پس زمینه = "#e0f2fe" محتوا = "قاعده‌ی سخت یا آسان برای جاهایی که سطر می‌تواند بشکند." پایان`
`خط تیره` hyphens hyphens	آیا کلمه می‌تواند در انتهای سطر با خط تیره شکسته شود: `none`، `manual` (فقط در خط‌تیره‌های نرمی که خودتان می‌نویسید) یا `auto` (مرورگر تصمیم می‌گیرد). `auto` زبانی می‌خواهد که مرورگر برایش فرهنگ داشته باشد و مرورگرها فارسی را خط‌تیره نمی‌کنند. [none, manual, auto]	`جعبه: خط تیره = "auto" زبان = "en" عرض = 160 پس زمینه = "#dcfce7" محتوا = "hyphenation helps incomprehensibilities fit narrow columns." پایان`
`نویسه خط تیره` hyphenate character hyphenate-character	نویسه‌ای که در جای شکستن کلمه با خط تیره نشان داده می‌شود. `auto` خط تیره‌ی زبان را به کار می‌برد و رشته‌ای مثل `"~"` همان را جایش می‌گذارد. [string / auto]	`جعبه: خط تیره = "auto" نویسه خط تیره = "\"~\"" زبان = "en" عرض = 160 پس زمینه = "#dcfce7" محتوا = "incomprehensibilities break with a tilde." پایان`
`حد نویسه خط تیره` hyphenate limit chars hyphenate-limit-chars	خط‌تیره‌گذاری را به کلمه‌هایی با اندازه‌ی معین محدود می‌کند: تا سه عدد برای کوتاه‌ترین کلمه، کوتاه‌ترین بخش پیش از خط تیره و کوتاه‌ترین بخش پس از آن، مثل `"8 3 3"`. `auto` را به مرورگر می‌سپارد. [up to 3 of an integer or auto]	`جعبه: خط تیره = "auto" حد نویسه خط تیره = "8 3 3" زبان = "en" عرض = 160 پس زمینه = "#dcfce7" محتوا = "only long words are hyphenated, never leaving a short stub." پایان`
`پیچش متن` text wrap text-wrap	سطرها چگونه شکسته شوند. `wrap` حالت عادی است، `nowrap` هرگز نمی‌شکند، `balance` سطرها را تقریباً هم‌اندازه می‌کند (برای تیترها خوب است)، `pretty` از تک‌کلمه‌ی کوتاه در سطر آخر پرهیز می‌کند و `stable` هنگام ویرایش متن، سطرهای بالا را دوباره نمی‌چیند. [wrap, nowrap, balance, pretty, stable]	`جعبه: پیچش متن = "balance" عرض = 260 اندازه قلم = 22 وزن قلم = 700 محتوا = "یک تیتر که به دو سطر هم‌اندازه تقسیم می‌شود" پایان`
`حالت پیچش متن` text wrap mode text-wrap-mode	فقط نیمه‌ی نخست `text wrap`: `wrap` می‌گذارد سطرها بشکنند و `nowrap` همه‌ی متن را در یک سطر نگه می‌دارد. [CSS-wide keywords only]	`جعبه: حالت پیچش متن = "nowrap" عرض = 160 سرریز = "hidden" پس زمینه = "#f1f5f9" محتوا = "جمله‌ای که نمی‌خواهد بشکند" پایان`
`سبک پیچش متن` text wrap style text-wrap-style	فقط نیمه‌ی دوم `text wrap`: `auto`، `balance`، `pretty` یا `stable`. [CSS-wide keywords only]	`جعبه: سبک پیچش متن = "pretty" عرض = 200 پس زمینه = "#f1f5f9" محتوا = "بندی که با یک کلمه‌ی کوتاه تنها تمام نمی‌شود" پایان`
`سرریز متن` text overflow text-overflow	خطی که بریده شده در جای برش چه نشان دهد: `clip` می‌برد، `ellipsis` با سه‌نقطه تمامش می‌کند. فقط وقتی کار می‌کند که `overflow` جعبه چیزی جز `visible` باشد و متن نتواند بشکند، پس همراه `white space = "nowrap"` به کار می‌رود. [clip, ellipsis]	`جعبه: سرریز متن = "ellipsis" فضای سفید = "nowrap" سرریز = "hidden" عرض = 180 پس زمینه = "#f1f5f9" محتوا = "این جمله برای جعبه‌اش بسیار بلند است" پایان`
`محدود کردن سطرها` line clamp line-clamp	یک بلوک را به چند سطر (یک عدد صحیح) محدود می‌کند و در جای برش سه‌نقطه می‌گذارد. این ویژگی استاندارد تازه‌ای است که فقط مرورگرهای نو دارند، پس مثل نمونه به جعبه `max height` و `overflow` هم بدهید که متن را در همه‌ی مرورگرها می‌برد. [integer / none]	`جعبه: محدود کردن سطرها = 2 سرریز = "hidden" بیشینه ارتفاع = "3em" ارتفاع خط = 1.5 عرض = 220 پس زمینه = "#f1f5f9" محتوا = "متنی بلند که به چند سطر محدود شده و اگر جا نشود با سه‌نقطه تمام می‌شود." پایان`
`اندازه زبانه` tab size tab-size	پهنای نویسه‌ی تب: تعدادی فاصله یا یک اندازه. فقط در متنی اهمیت دارد که تب‌ها در آن می‌مانند، یعنی در `white space = "pre"` یا `pre-wrap`، مثل کد برنامه. [integer / length]	`جعبه: اندازه زبانه = 2 فضای سفید = "pre" خانواده قلم = "monospace" محتوا = "a\tb\tc" پایان`
`سطرهای یتیم` orphans orphans	در متن چاپی یا چندستونه، کمترین تعداد سطر از یک بند که می‌تواند تنها در پایین صفحه یا ستون بماند. یک عدد صحیح، معمولاً ۲ یا ۳. [integer]	`جعبه: سطرهای یتیم = 3 محتوا = "هنگام چاپ دست‌کم سه سطر در پایین صفحه می‌مانند." پایان`
`سطرهای بیوه` widows widows	برعکس `orphans`: کمترین تعداد سطر از یک بند که می‌تواند تنها در بالای صفحه یا ستون بعد بماند. [integer]	`جعبه: سطرهای بیوه = 3 محتوا = "هنگام چاپ دست‌کم سه سطر به بالای صفحه‌ی بعد می‌روند." پایان`
`نشانه‌گذاری آویزان` hanging punctuation hanging-punctuation	می‌گذارد گیومه‌ی آغاز یا نشانه‌ی پایان بیرون از لبه‌ی متن آویزان بماند تا حرف‌ها هم‌تراز شوند: `first`، `last`، `force-end`، `allow-end` یا `none`. فقط سافاری آن را پشتیبانی می‌کند. [none, first, last, force-end, allow-end; up to 3 values]	`جعبه: نشانه‌گذاری آویزان = "first" محتوا = "«گیومه‌ی آغاز بیرون از لبه‌ی متن آویزان می‌ماند.»" پایان`
`جعبه متن` text box text-box	کوتاه‌نویسی `text box trim` و `text box edge`: `"trim-both cap alphabetic"` فضای خالی بالای حروف بزرگ و زیر خط پایه را می‌برد. `normal` چیزی نمی‌برد. [normal or a trim keyword with an edge keyword]	`جعبه: جعبه متن = "trim-both cap alphabetic" اندازه قلم = 28 پس زمینه = "#fef9c3" محتوا = "تنگ دور حرف‌ها" پایان`
`برش جعبه متن` text box trim text-box-trim	نیم‌فاصله‌ی سطر را برمی‌دارد، یعنی فضای اضافه‌ای که ارتفاع خط بالای سطر نخست و پایین سطر آخر می‌گذارد: `trim-start`، `trim-end`، `trim-both` یا `none`. ویژگی تازه‌ای است، پس نخست پشتیبانی مرورگرها را بررسی کنید. [none / trim-start / trim-end / trim-both]	`جعبه: برش جعبه متن = "trim-both" لبه جعبه متن = "cap alphabetic" اندازه قلم = 28 پس زمینه = "#fef9c3" محتوا = "نیم‌فاصله‌ی سطر برداشته شده" پایان`
`لبه جعبه متن` text box edge text-box-edge	لبه‌های بریده‌شده از کدام خط‌ها اندازه گرفته شوند: برای بالا `text`، `cap` یا `ex` و برای پایین `text` یا `alphabetic`، مثل `"cap alphabetic"`. همراه `text box trim` به کار می‌رود. [up to 2 of auto, text, cap, ex, alphabetic, ...]	`جعبه: برش جعبه متن = "trim-both" لبه جعبه متن = "ex alphabetic" اندازه قلم = 28 پس زمینه = "#fef9c3" محتوا = "لبه‌ها در ارتفاع حرف x" پایان`
`حرف آغازین` initial letter initial-letter	حرف نخست یک بلوک را حرف بزرگ آغازین می‌کند که چند سطر را می‌گیرد، مثلاً `3` برای سه سطر. عدد دوم تعیین می‌کند چقدر پایین برود. روی حرف نخست بلوک اثر دارد و پشتیبانی مرورگرها هنوز ناقص است. [normal / number, with an optional drop/raise count]	`جعبه: عرض = 260 اندازه قلم = 18 تکه: حرف آغازین = 3 رنگ = "crimson" محتوا = "س" پایان تکه: محتوا = "لام با یک حرف بزرگ آغاز می‌شود." پایان پایان`

جهت و حالت نوشتار

این‌ها جهت متن را تعیین می‌کنند و سطرها را می‌ایستانند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`جهت متن` direction direction	جهت نوشتن متن یک عنصر: `ltr` (چپ به راست) یا `rtl` (راست به چپ). مشخص می‌کند `start` کدام سو است، نشانه‌گذاری کجا می‌نشیند و ستون‌های جدول از کدام سو می‌روند. برای کل یک عنصر ویژگی `dir` گزینه‌ی بهتری است، چون به فناوری‌های کمکی هم خبر می‌دهد. [ltr, rtl]	`جعبه: جهت متن = "rtl" عرض = 260 پس زمینه = "#f1f5f9" محتوا = "متن راست به چپ (پایان جمله)." پایان`
`دوسویه یونیکد` unicode bidi unicode-bidi	متن با جهت‌های آمیخته چگونه مرتب شود. `normal` الگوریتم استاندارد را به کار می‌برد، `isolate` عنصر را جدا از اطراف می‌چیند، `embed` یک سطح تازه باز می‌کند، `bidi-override` ترتیب `direction` را هر حرفی که باشد تحمیل می‌کند و `plaintext` با نخستین حرف قوی تصمیم می‌گیرد. [normal, embed, isolate, bidi-override, isolate-override, plaintext]	`جعبه: دوسویه یونیکد = "bidi-override" جهت متن = "rtl" محتوا = "با زور وارونه شد" پایان`
`حالت نوشتار` writing mode writing-mode	جهتی که سطرها می‌روند: `horizontal-tb` (عادی)، `vertical-rl` (سطرها از بالا به پایین می‌روند و از راست به چپ روی هم چیده می‌شوند، مثل ژاپنی) یا `vertical-lr` (از چپ به راست چیده می‌شوند). همه‌ی ویژگی‌های منطقی با آن می‌چرخند. [horizontal-tb, vertical-rl, vertical-lr]	`جعبه: حالت نوشتار = "vertical-rl" ارتفاع = 160 اندازه قلم = 22 محتوا = "متن عمودی از بالا به پایین می‌رود" پایان`
`جهت‌گیری متن` text orientation text-orientation	حرف‌ها در متن عمودی چگونه می‌ایستند: `mixed` حرف‌های لاتین را می‌خواباند و نویسه‌های آسیای شرقی را ایستاده نگه می‌دارد، `upright` همه را ایستاده نگه می‌دارد و `sideways` همه را می‌خواباند. [mixed, upright, sideways]	`جعبه: حالت نوشتار = "vertical-rl" جهت‌گیری متن = "upright" ارتفاع = 160 اندازه قلم = 22 محتوا = "UPRIGHT" پایان`
`ترکیب ایستاده متن` text combine upright text-combine-upright	در متن عمودی، چند نویسه‌ی کوتاه، مثل یک سال، را کنار هم و در جای یک نویسه می‌گذارد. `all` برای کل عنصر این کار را می‌کند و `none` نه. روی یک `span` درون یک بلوک عمودی به کار می‌رود. [none, all]	`جعبه: حالت نوشتار = "vertical-rl" ارتفاع = 140 اندازه قلم = 22 محتوا = "سال " تکه: ترکیب ایستاده متن = "all" محتوا = "2026" پایان پایان`

آوانما، تأکید و حروف‌چینی آسیای شرقی

این‌ها برای چینی، ژاپنی و کره‌ای ساخته شده‌اند، هرچند بیشترشان با هر متنی کار می‌کنند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`تراز آوانما` ruby align ruby-align	یادداشت کوچک چگونه روی متن پایه پخش شود: `start`، `center`، `space-between` یا `space-around`. روی عنصر `ruby` تنظیم می‌شود. [start, center, space-between, space-around]	`آوانما: تراز آوانما = "space-between" اندازه قلم = 28 محتوا = "漢字" متن آوانما: محتوا = "کانجی" پایان پایان`
`جای آوانما` ruby position ruby-position	یادداشت در کدام سو بنشیند: `over` (بالای متن افقی)، `under`، `alternate` (یک‌درمیان بالا و پایین) یا `inter-character` (کنار نویسه‌ها، چنان‌که برای بوپوموفوی تایوانی به کار می‌رود). [over, under, alternate, inter-character; up to 2 values]	`آوانما: جای آوانما = "under" اندازه قلم = 28 محتوا = "東京" متن آوانما: محتوا = "توکیو" پایان پایان`
`تاکید متن` text emphasis text-emphasis	کوتاه‌نویسی نشانه‌ای که روی هر نویسه کشیده می‌شود، رنگش و جایش: `"filled dot crimson"`. در متن آسیای شرقی، که حرف کج ندارد، به کار می‌رود ولی با هر متنی کار می‌کند. [CSS-wide keywords only]	`جعبه: تاکید متن = "filled dot crimson" محتوا = "نقطه‌ها تأکید را نشان می‌دهند" پایان`
`سبک تاکید متن` text emphasis style text-emphasis-style	نشانه: `none`، یک شکل (`dot`، `circle`، `double-circle`، `triangle`، `sesame`) با `filled` یا `open` پیش از آن، یا هر نویسه‌ی تکی در گیومه. [string; up to 2 values]	`جعبه: سبک تاکید متن = "open circle" محتوا = "حلقه‌های توخالی روی هر حرف" پایان`
`رنگ تاکید متن` text emphasis color text-emphasis-color	رنگ نشانه‌ها. اگر ننویسید رنگ خود متن را می‌گیرند. [color]	`جعبه: سبک تاکید متن = "filled dot" رنگ تاکید متن = "crimson" محتوا = "نقطه‌های قرمز" پایان`
`موقعیت تاکید متن` text emphasis position text-emphasis-position	نشانه‌ها کجا بنشینند: `over` یا `under` و بعد `right` یا `left` (سویی که در متن عمودی می‌گیرند)، مثل `"under right"`. [up to 2 values]	`جعبه: سبک تاکید متن = "filled dot" موقعیت تاکید متن = "under right" محتوا = "نقطه‌ها زیر حرف‌ها" پایان`
`برش فاصله متن` text spacing trim text-spacing-trim	در چینی و ژاپنی تعیین می‌کند نیمه‌ی خالی نشانه‌های تمام‌پهنا بریده شود یا نه: `normal`، `space-all` (هرگز)، `space-first` یا `trim-start`. [normal / space-all / space-first / trim-start]	`جعبه: برش فاصله متن = "space-all" اندازه قلم = 24 محتوا = "「東京」と「大阪」" پایان`
`فاصله خودکار متن` text autospace text-autospace	میان نویسه‌های چینی یا ژاپنی و حرف‌ها یا رقم‌های لاتینِ کنارشان فاصله‌ی کوچکی می‌گذارد: `normal`، `no-autospace` یا واژه‌های `ideograph-alpha` و `ideograph-numeric`. [up to 3 autospace keywords]	`جعبه: فاصله خودکار متن = "normal" اندازه قلم = 24 محتوا = "東京Towerと12個" پایان`

خودتان امتحان کنید

آزمون قلم را بردارید و لغزنده‌ی دومی اضافه کنید که ارتفاع خط نمونه را میان ۱ و ۳ تنظیم کند. از چه مقداری بند شل به نظر می‌رسد؟
روی جلد یک کتاب کار کنید: عنوان با حروف کوچک بزرگ‌نما و فاصله حروف، سطر نویسنده کج، و یک بند دوطرفه با تورفتگی متن برابر 2em.
یک قلم با پرونده‌ای که وجود ندارد بنویسید، آن را در پشته‌ای با پشتیبان خوب به کار ببرید و ببینید صفحه هنوز خوانا است.
کارتی بسازید که سه سطر نخست یک متن بلند را نشان می‌دهد، و یک تیتر با پیچش متن = "balance".