آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۲۶) : ویژگی hyphens

css3 attributes

در جلسه پیش در مورد سه ویژگی font-kerning و font-smoothing و font-variant صحبت کردیم و مثالهایی رو براتون قرار دادیم. در این جلسه قصد داریم ویژگی hyphens رو براتون توضیح بدیم.

ویژگی hyphens برای قرار دادن خط تیره در متن

با استفاده از ویژگی hyphens در CSS میتونین مشخص کنید که مرورگر چطور و طبق چه قاعده ای درون متون ما خط تیره قرار بده. پشتیبانی مرورگرها از این ویژگی اونطوری که باید باشه نیس و بیشتر مرورگرها از اون بصورت جزئی پشتیبانی میکنن.css hyphens 2

همونطور که میدونین زمانی که مقداری متن درون یک div قرار داشته باشه و عرض اون رو کم کنیم، کلمات درون هر خط طوری قرار میگیرن که چیزی از اون div خارج نشه. مثلا کد زیر رو در نظر بگیرید:

Lorem ipsum dolor sit amet, consec‐tetur adipisicing elit. Esse quisquam possimus sequi aut modi velit temporibus, delectus voluptatem! Laboriosam eligendi fuga quam odit minus voluptatem blanditiis eveniet aut, adipisci est!

کدهای CSS زیر رو هم برای اون قرار میدیم:

.container {
	width: 30%;
	margin: 100px auto;
	border: 3px solid black;
	padding: 10px;
}

چون این ویژگی بصورت کامل درون Firefox پشتیبانی میشه، پس بهتره که اون رو درون مرورگر Firefox باز کنیم. خروجی بصورت زیر میشه:css hyphens 3

همونطور که میبینید با توجه به عرض فعلی div، کلمه Esse در خط اول جاش نبوده و به همین دلیل به اول خط بعد رفته. خط‌های بعدی هم به همین صورت. همونطور که میبینید متن خیلی نامرتب هست و خطوط کوتاه و بلند هستند. برای اینکار میتونیم کاری کنیم مقداری از کلمه که در خط بالا جا میشه رو نمایش بدیم و بقیه اون رو به خط بعدی ببریم. برای اینکه به کاربران بفهمونیم که این حروف مربوط به یک کلمه هستن، باید یک خط تیره در انتهای خط قرار بگیره. باید این مورد رو در کتاب یا روزنامه‌ها دیده باشید و بیشتر در زبان انگلیسی مورد استفاده قرار میگیره. ما در اینجا برای فهم بیشتر شما از زبان انگلیسی استفاده میکنیم و باید برای تگ html هم ویژگی lang رو برابر با en قرار بدین تا مرورگر متوجه بشه که میخواید با متن انگلیسی کار کنید.

خب حالا میرسیم سر قضیه ویژگی hyphens که میخواد این مشکل رو برای ما حل کنه. این ویژگی سه مقدار رو قبول میکنه:

  • none : در این حالت مرورگر هیچ خط تیری در متن ما قرار نمیده و این ویژگی هیچ تاثیری بر روی متن نداره. تصویری که در بالا نمایش داده شده، همین حالت رو نمایش میده.
  • auto : در این حالت مرورگر بصورت اتوماتیک خطوط تیره رو در جاهای مناسب قرار میده و محل قرار گیری کلمات رو بهینه‌تر میکنه. برای اینکار کد زیر رو قرار میدیم:
.container {
	width: 30%;
	margin: 100px auto;
	border: 3px solid black;
	padding: 10px;

	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

همونطور که دیدید علاوه بر ویژگی hyphens، این ویژگی رو با vendor prefix‌های webkit و ms هم قرار دادیم تا مرورگرهای بیشتری رو تحت پوشش قرار بدیم. با اینکار خروجی بصورت زیر خواهد شد:css hyphens 4

همونطور که میبینید وضعیت از قبل بهتر شده و کلماتی شکسته شدن و در انتهای اونا خط تیره قرار داده شده. این کار توسط مرورگر بصورت اتوماتیک انجام شده است. اگر در اینجا از ویژگی text-align و مقدار justify نیز استفاده کنید، خروجی بهتری خواهید داشت، بصورت زیر:css hyphens 5

همونطور که میبینید استایل خطوط خیلی بهتر و مرتب‌تر شده. اگر از hyphens استفاده نکنیم و فقط از text-align استفاده کنیم، خروجی بصورت زیر میشه:css hyphens 6

همونطور که میبینید در این حالت فاصله بین کلمات خیلی زیاد هست و در انتها هم خطوط تراز نیستن. پس ترکیبی از text-align و hyphens حالت بهتری رو به وجود میاره. حالا بریم سراغ مقدار بعد.

  • manual : در اینجا دیگه مرورگر کاری رو برای ما انجام نمیده و خودمون میتونیم نقاط شکست کلمات رو مشخص کنیم و به مرورگر بگیم که زمانی که لازم شد، این کلمات رو از این نقاط بشکن و به خط بعد ببر.

برای اینکار میتونیم از دو کاراکتر درون HTML استفاده کنیم. مورد اول ­ هست که اگر اون رو در کلمه مورد نظر قرار بدین، به مرورگر میفهمونید که اگر لازم شد، در این نقطه این کلمه رو بشکن و به خط بعد ببر. پس خط تیره تا زمانی که لازم نباشه نمایش داده نمیشه.

مورد دیگه ای که وجود داره  هست که اگر اون رو درون کلمات قرار بدین، خط تیره همیشه نمایش داده میشه. برای اینکار کد زیر رو در نظر بگیرید:

Lorem ipsum dolor sit amet, consect‐etur adipisicing elit. Esse quisquam possimus sequi aut modi velit temporibus, delectus voluptatem! Laboriosam eligendi fuga quam odit minus voluptatem blanditiis eveniet aut, adipisci est!

همونطور که دیدید  رو درون کلمه consectetur قرار دادیم. کد CSS رو هم بصورت manual در میاریم:

.container {
	width: 30%;
	margin: 100px auto;
	border: 3px solid black;
	padding: 10px;
	text-align: justify;

	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}

حالا اگر خروجی رو ببینیم بصورت زیر خواهد بود:css hyphens 7

به همین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0