illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 230 ۲۰ آبان ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram