در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.
وبسایتها شامل محتویات مختلفی هستن که بخش اعظمی از اون رو متنها تشکیل میدن. درون هر متن، کلمه‌های زیادی قرار داره. تا حالا شده درون متنهای شما کلمه‌های وجود داشته باشن که خیلی طولانی و دراز باشن و کلا استایل صفحه رو بهم بریزن؟ به احتمال زیاد با چنین حالتی مواجهه داشتید و خیلی اذیتتون کرده. کد زیر رو در نظر بگیرید:
<!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 پیکسل بیشتر عرضش نیست. خروجی اون در مرورگر بصورت زیر میشه:
میبینید که کلمه مورد نظر بدلیل اینکه خیلی طولانی هست، از 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 مربوط به اون رو در بالا تعریف کردیم. برای اینکار از استفاده کردیم. با اینکار خروجی در Firefox بصورت زیر میشه:
دیدید که هر جا از کلمه که میخاد از div بیرون بزنه، به خط بعد میره و یک خط فاصله در انتها گذاشته میشه. زمانی که از این ویژگی میخاید استفاده کنید، باید زبان متن را برای المنت پدر یا parent مشخص کنید. باید دقت داشته باشید که زبانهای غیرانگلیسی رفتار یکسانی در مرورگرهای مختلف ندارن.
همچنان یک کتابخانه Javascript بنام Hyphenator وجود داره که مرورگرها و زبانهای بیشتری رو پشتیبانی میکنه. اما عیب این ابزار اینه که خیلی سنگینه و کدهای زیادی باید لود بشن.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !