تخفیف ویژه

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 32) : ویژگی orphans و widows

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۱۳ اردیبهشت ۱۳۹۶

css3 attributes

در جلسات قبل در مورد ویژگی object-fit و object-position براتون توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این جلسه قصد داریم در مورد دو ویژگی orphans و widows صحبت کنیم.

ویژگی orphans و widows

زمانی که درون کدهای HTML خودتون ستون دارید و یا قصد دارید که اونا رو پرینت کنید، باید دو ویژگی orphans و widows رو مد نظر داشته باشید و کار کردن با اونا رو بلد باشید. هر دو ویژگی مشخص میکنن که چه تعداد خطی از متن، باید در ابتدا یا انتهای صفحه باقی بمونن. میزان پشتیبانی از این ویژگی توسط مرورگرها بسیار خوب هست.

همونطور که دیدید این ویژگی فقط در مرورگر Firefox مشکل داره و در بقیه مرورگرها به خوبی پشتیبانی میشه.

ویژگی orphans:

فرض کنید که یک پاراگراف یا عنصر Block level دارید که تعدادی خط متن درون اون قرار داده شدن. زمانی که این پارگراف درون ستونها و یا صفحات پرینت شده قرار میگیره، ممکنه که در جایی از پاراگراف شکست صورت بگیره و قسمتی از متن به ستون بعدی بره و قسمتی از متن در ستون قبلی باقی بمونه. به اون قسمتی از متن پاراگراف که قبل از شکست یا Break قرار گرفته، orphans میگن. پس حداقل تعداد خطی که قبل از شکست باید باقی بمونه، توسط ویژگی orphans مشخص میشه. معمولا حالت بهینه این هست که حداقل 3 یا 4 خط قبل و بعد از شکست قرار داشته باشه. کد HTML زیر رو در نظر بگیرید:

<div class="columns">
    <p>
        Line 1
        <br> Line 2
        <br> Line 3
        <br> Line 4
        <br> Line 5
        <br> Line 6
        <br> Line 7
        <br> Line 8
        <br> Line 9
    </p>
    <p class="border">
        Line 1
        <br> Line 2
        <br> Line 3
        <br> Line 4
        <br> Line 5
        <br> Line 6
        <br> Line 7
        <br> Line 8
        <br> Line 9
        <br> Line 10
        <br> Line 11
        <br> Line 12
        <br> Line 13
        <br> Line 14
        <br> Line 15
        <br> Line 16
        <br> Line 17
        <br> Line 18
        <br> Line 19
    </p>
    <p>
        Line 1
        <br> Line 2
        <br> Line 3
        <br> Line 4
        <br> Line 5
        <br> Line 6
        <br> Line 7
        <br> Line 8
        <br> Line 9
    </p>
</div>

همونطور که دیدید یک div شامل سه پاراگراف قرار دادیم. برای اینکه بتونیم با ویژگی‌های orphans و widows کار کنیم، یا باید div مورد نظر رو ستون بندی کنیم و یا اینکه اون رو در حالت پرینت تست کنیم. ما در اینجا از ستون بندی استفاده میکنیم. برای اینکار کدهای CSS زیر رو قرار میدیم:

div.columns {
	width: 500px;
	margin: 100px auto;
	column-count: 3;
	-webkit-column-count: 3;
}

p.border {
	border: 5px double;
	padding: 5px;
}

همونطور که دیدید div مورد نظر رو به سه ستون تبدیل کردیم و برای اون پاراگرافی که در وسط قرار میگیره و شکست در اون صورت میگیره هم یک border از نوع double قرار دادیم. خروجی در مرورگر بصورت زیر میشه:

همونطور که میبینید، پاراگراف وسط در 2 نقطه دچار شکست شده و در ستون اول، سه خط در انتها باقی مانده است. میتونیم با استفاده از ویژگی orphans این حالت رو تغییر بدیم. ویژگی orphans و widows میتونن اعداد صحیح غیر منفی رو قبول کنن. مثلا اگر ویژگی orphans رو 1 یا 2 یا 3 قرار بدیم، خروجی هیچ تفاوتی نخواهد کرد. به این دلیل که حداقل 3 خط قبل از شکست در ستون اول وجود داره. اما اگر مقدار این ویژگی رو 4 قرار بدیم، کدها بصورت زیر میشه:

div.columns {
	width: 500px;
	margin: 100px auto;
	column-count: 3;
	-webkit-column-count: 3;
}

p.border {
	border: 5px double;
	padding: 5px;
	orphans: 4;
}

خروجی در مرورگر:

میبینید که در این حالت یک خط از ستون بعدی گرفته میشه و به ستون اول اضافه میشه تا حداقل 4 خط قبل از شکست قرار بگیرن. اگر مقدار رو 5 یا بیشتر قرار بدین، به دلیل اینکه ستون اول ظرفیت خطوط بیشتری رو نداره، پاراگراف دوم بصورت کامل ستون اول رو کنار میزنه و به ستون دوم میره. بصورت زیر:

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

ویژگی widows:

بر خلاف ویژگی orphans، حداقل تعداد خطی که بعد از شکست باید باقی بمونه، توسط ویژگی widows مشخص میشه. یک بار دیگه کد رو بدون orphans و در حالت اولیه به یاد بیارید:

اگر ویژگی widows رو 1 یا 2 قرار بدیم، به دلیل اینکه 2 خط در ابتدای ستون سوم وجود داره، تغییری رو مشاهده نخواهیم کرد. اما اگر مقدار رو 3 قرار بدیم، کدها بصورت زیر خواهند شد:

div.columns {
	width: 500px;
	margin: 100px auto;
	column-count: 3;
	-webkit-column-count: 3;
}

p.border {
	border: 5px double;
	padding: 5px;
	widows: 3;
}

خروجی در مرورگر:

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

همچنین شما میتونین بصورت همزمان از دو ویژگی orphans و widows استفاده کنید. کد زیر رو در نظر بگیرید:

div.columns {
	width: 500px;
	margin: 100px auto;
	column-count: 3;
	-webkit-column-count: 3;
}

p.border {
	border: 5px double;
	padding: 5px;
	orphans: 5;
	widows: 5;
}

دیدید که برای هر دو مقدار 5 رو قرار دادیم. با اینکار خروجی بصورت زیر خواهد شد:

میبینید که قبل و بعد از شکست، حداقل 5 خط وجود دارد. برای مطالعه بیشتر در این زمینه میتونین این لینک و این لینک رو مطالعه کنید.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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