تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۰ آبان ۱۳۹۵

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Long Words</title>
	<style type="text/css">
		html {
		  background: #eee;
		}

		div {
		  background: #fff;
		  padding: 10px 20px;
		  width: 400px;
		  margin: 0 auto;
		}

		h1 {
		  font-family: Helvetica, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 36px;
		}

		p {
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<h1>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h1>
		<p>The word - which refers to the "law for the delegation of monitoring beef labelling", has been repealed by a regional parliament after the EU lifted a recommendation to carry out BSE tests on healthy cattle. German is famous for its compound nouns, which frequently become so cumbersome they have to be reduced to abbreviations. The beef labelling law, introduced in 1999 to protect consumers from BSE, was commonly transcribed as the "RkReÜAÜG", but even everyday words are shortened to initials so Lastkraftwagen - lorry - becomes Lkw.</p>
    </div>
</body>
</html>

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

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

خط تیره یا Hyphen

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

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>Long Words</title>
	<style type="text/css">
		html {
		  background: #eee;
		}

		div {
		  background: #fff;
		  padding: 10px 20px;
		  width: 400px;
		  margin: 0 auto;
		}

		h1 {
		  font-family: Helvetica, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 36px;
		}

		.hyphens {
		  -webkit-hyphens: auto;
		  -moz-hyphens: auto;
		  -ms-hyphens: auto;
		  hyphens: auto;
		}

		p {
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<h1 class="hyphens">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h1>
		<p>The word - which refers to the "law for the delegation of monitoring beef labelling", has been repealed by a regional parliament after the EU lifted a recommendation to carry out BSE tests on healthy cattle. German is famous for its compound nouns, which frequently become so cumbersome they have to be reduced to abbreviations. The beef labelling law, introduced in 1999 to protect consumers from BSE, was commonly transcribed as the "RkReÜAÜG", but even everyday words are shortened to initials so Lastkraftwagen - lorry - becomes Lkw.</p>
    </div>
</body>
</html>

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

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

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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