ویژگی text-transform در CSS نحوه نمایش حروف از نظر بزرگ یا کوچک بودن را کنترل می‌کند. این ویژگی بیشتر برای زبان‌هایی مثل انگلیسی کاربرد دارد که مفهوم Uppercase و Lowercase دارند.
مقادیر اصلی text-transform
uppercase: حروف را با حالت بزرگ نمایش می‌دهد.lowercase: حروف را با حالت کوچک نمایش می‌دهد.capitalize: حرف ابتدایی کلمات را بر اساس قواعد زبان به حالت بزرگ تبدیل می‌کند.none: تبدیل خودکار را غیرفعال می‌کند.
.eyebrow {
text-transform: uppercase;
}
.card-title {
text-transform: capitalize;
}در متن فارسی چه اتفاقی می‌افتد؟
فارسی تفاوت Uppercase و Lowercase ندارد، بنابراین uppercase و lowercase روی حروف فارسی تغییر ظاهری معناداری ایجاد نمی‌کنند. اما اگر همان Element شامل واژه‌های لاتین باشد، بخش لاتین می‌تواند تحت تاثیر قرار بگیرد.
محتوا را در HTML درست بنویسید
text-transform یک تغییر نمایشی است. برای نام برند، کد، Acronym یا عبارتی که Case آن از نظر معنایی اهمیت دارد، متن اصلی را در HTML درست نگه دارید و صرفا برای Presentation به CSS تکیه نکنید.
وراثت و Reset کردن
این ویژگی می‌تواند به فرزندان منتقل شود. اگر در بخشی از Interface تبدیل حروف نمی‌خواهید، روی Element مشخص مقدار text-transform: none قرار دهید.
ویدیوی آموزش
مطالب مرتبط: Font در CSS و text-indent در CSS
