اگر بخواهیم در زبان فارسی یا هر زبانی که از شکستن کلمات در پایان خطوط سود میبرد، از شکستن کلمات با حروفی خاص استفاده کنیم، ویژگی CSS به نام hyphenate-character
میتواند بسیار کاربردی باشد. این ویژگی به شما اجازه میدهد تعیین کنید که چه کاراکتری برای نشان دادن قطع شدن کلمات در پایان خط ظاهر شود. این کار ممکن است در برخی زبانها تنها یک کاربرد ظاهری نداشته باشد و بتواند به روانی خوانایی متن کمک کند.
برای مثال، در برخی زبانها، شکستن کلمات به ظاهر خود نمیتواند آسیب برساند، اما به کاربران غیر مسلط به زبان، کمک میکند تا راحتتر متن را دنبال کنند. در موارد دیگر، این امکان به طراح وب کمک میکند تا انسجام ظاهری وبسایت را حفظ کند. استفاده هوشمندانه از این ویژگی میتواند تجربه کاربری را بهبود بخشد.
شاید فکر کنید که استفاده از hyphenate-character
بر دیدگاه کلی طراحی صفحه تاثیر زیادی نمیگذارد، اما در واقعیت، جزئیات کوچک معمولاً به کیفیت نهایی کار کمک میکنند. این ویژگی از نظر عمق و پیچیدگی زیادی ندارد، اما اجرای آن به خوبی ممکن است مراحل توسعهی وب را سادهتر کند.
در صورتی که نیاز به پیادهسازی این ویژگی دارید، ابتدا باید مطمئن باشید که مرورگر وب کاربران شما از آن پشتیبانی میکند. متاسفانه، پشتیبانی مرورگرها از این ویژگی، به صورت کلی هنوز فراگیر نشده است و باید بررسی کنید که آیا این امکان در مرورگرهای مورد استفاده شما به خوبی اجرا میشود یا خیر.
به عنوان مثال ساده ای از استفاده این ویژگی، فرض کنید میخواهید حروف شکسته در زبان فارسی با یک خط تیره (-) نمایش یابد تا انسجام صفحه حفظ شود. در تکه کد زیر میتوان نحوه استفاده از این ویژگی را مشاهده کرد.
p {
hyphenate-character: '\2010';
hyphens: auto;
}
حالا بیایید کد بالا را به صورت خط به خط توضیح دهیم:
p {
این خط آغاز تعیین سبک برای تمام عناصر <p>
(پاراگراف) است.
hyphenate-character: '\2010';
این مشخصه تعیین میکند که از کاراکتر Unicode 2010 (یک نوع کاراکتر خط تیره) برای شکستن کلمات استفاده شود.
hyphens: auto;
این مشخصه تعیین میکند که مرورگر به طور خودکار تصمیم بگیرد که آیا میخواهد کلمات را بشکند یا نه، بستگی به زبان و تنظیمات دیگر دارد.
}
این خط پایان بلوک سبک برای پاراگراف است.