ویژگی text-indent در CSS مشخص می‌کند خط اول متن داخل یک Block چقدر نسبت به ابتدای خط تورفتگی داشته باشد. این ویژگی بیشتر برای پاراگراف‌های متنی و طراحی Editorial کاربرد دارد.
مثال ساده text-indent
.article p {
text-indent: 2rem;
}در این مثال فقط خط اول هر پاراگراف به اندازه 2rem تورفتگی می‌گیرد. می‌توانید از واحدهایی مثل px، em، rem یا درصد استفاده کنید.
رفتار در متن RTL و LTR
تورفتگی نسبت به ابتدای خط اعمال می‌شود. بنابراین در متن فارسی با جهت RTL، فاصله از سمت شروع راست ایجاد می‌شود و در متن LTR از سمت شروع چپ. به همین دلیل لازم نیست برای فارسی و انگلیسی مقدار جداگانه فیزیکی تعریف کنید؛ Direction متن رفتار آن را تعیین می‌کند.
مقادیر مثبت و منفی
مقدار مثبت خط اول را به داخل می‌برد. مقدار منفی می‌تواند Hanging Indent ایجاد کند؛ یعنی خط اول نسبت به خطوط بعدی بیرون‌تر قرار بگیرد. برای مقدار منفی باید فضای کافی در Container داشته باشید تا متن از محدوده قابل مشاهده خارج نشود.
تورفتگی فقط برای پاراگراف‌های بعدی
در بعضی سبک‌های صفحه‌آرایی، پاراگراف اول بعد از تیتر بدون تورفتگی است و فقط پاراگراف‌های بعدی Indent می‌گیرند. می‌توانید با Selector ترکیبی این رفتار را بسازید:
.article p + p {
text-indent: 1.5em;
}این روش یک انتخاب طراحی است، نه قانون ثابت خوانایی. برای وب فارسی، Spacing بین پاراگراف‌ها اغلب کافی است و باید نتیجه را در متن واقعی و روی موبایل تست کنید.
ویدیوی آموزش
مطالب مرتبط: تراز متن در CSS و text-transform در CSS
