ترفندهای حرفه ای و پیشرفته Front End (جلسه 13) : استایل دهی کلمات طولانی یا long words - قسمت 1

- visibility ۰ mode_comment

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.long-word-hyphens

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

میبینید که درون h1 یک کلمه طولانی رو قرار دادیم. این h1 درون یک div قرار داره که 400 پیکسل بیشتر عرضش نیست. خروجی اون در مرورگر بصورت زیر میشه:long-words

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

خط تیره یا Hyphen

اولین راه حلی که برای long words میتونیم از اون استفاده کنیم، بهره بردن از خط تیره یا hyphen هست. این ویژگی در مرورگرهای Chrome و Opera و Android پشتیبانی نمیشه ولی بقیه مرورگرها از اون پشتیبانی میکنن. با توجه به تستهایی که در مرورگر Safari 5.1 انجام شده، مشخص شده که خط های تیره قرار داده میشه، اما استایل مناسبی ندارن و در جای مناسب قرار نمیگیرن. برای قرار دادن خط تیره بصورت زیر عمل میکنیم:

میبینید که یک کلاس hyphens به h1 اضافه کردیم و کدهای css مربوط به اون رو در بالا تعریف کردیم. برای اینکار از hyphens: auto استفاده کردیم. با اینکار خروجی در Firefox بصورت زیر میشه:long-words 2

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

همچنان یک کتابخانه Javascript بنام Hyphenator وجود داره که مرورگرها و زبانهای بیشتری رو پشتیبانی میکنه. اما عیب این ابزار اینه که خیلی سنگینه و کدهای زیادی باید لود بشن.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.