ویژگی CSS: hyphenate-character

css hyphenate character
20 آبان 1403

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

برای مثال، در برخی زبان‌ها، شکستن کلمات به ظاهر خود نمی‌تواند آسیب برساند، اما به کاربران غیر مسلط به زبان، کمک می‌کند تا راحت‌تر متن را دنبال کنند. در موارد دیگر، این امکان به طراح وب کمک می‌کند تا انسجام ظاهری وب‌سایت را حفظ کند. استفاده هوشمندانه از این ویژگی می‌تواند تجربه کاربری را بهبود بخشد.

شاید فکر کنید که استفاده از hyphenate-character بر دیدگاه کلی طراحی صفحه تاثیر زیادی نمی‌گذارد، اما در واقعیت، جزئیات کوچک معمولاً به کیفیت نهایی کار کمک می‌کنند. این ویژگی از نظر عمق و پیچیدگی زیادی ندارد، اما اجرای آن به خوبی ممکن است مراحل توسعه‌ی وب را ساده‌تر کند.

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

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

p {
hyphenate-character: '\2010';
hyphens: auto;
}

حالا بیایید کد بالا را به صورت خط به خط توضیح دهیم:

p {
این خط آغاز تعیین سبک برای تمام عناصر <p> (پاراگراف) است.
hyphenate-character: '\2010';
این مشخصه تعیین می‌کند که از کاراکتر Unicode 2010 (یک نوع کاراکتر خط تیره) برای شکستن کلمات استفاده شود.
hyphens: auto;
این مشخصه تعیین می‌کند که مرورگر به طور خودکار تصمیم بگیرد که آیا می‌خواهد کلمات را بشکند یا نه، بستگی به زبان و تنظیمات دیگر دارد.
}
این خط پایان بلوک سبک برای پاراگراف است.

سوالات متداول

؟

چرا از hyphenate-character استفاده کنیم؟

؟

آیا hyphenate-character از تمام زبان‌ها پشتیبانی می‌کند؟

؟

آیا تمام مرورگرها از hyphenate-character پشتیبانی می‌کنند؟

؟

چگونه می‌توان کاراکتر شکستن کلمه را تغییر داد؟