ترفندهای بهینه سازی قالب سایت برای Print گرفتن - قسمت 3



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه گذشته نکات زیادی رو در مورد درست کردن استایل پرینت براتون قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه با ادامه نکات در خدمتتون هستیم.

5. کنترل شکستگی صفحات

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

شکستگی صفحه قبل از المنت مورد نظر:

اگر ما قصد داشته باشیم که یک المنت مورد نظر همیشه در اول صفحه قرار بگیره و پرینت بشه، میتونیم این کار رو با استفاده از ویژگی page-break-before انجام بدیم و المنت رو به صفحه جدید منتقل کنیم. بصورت زیر:

برای مطالعه بیشتر در زمینه ویژگی page-break-before میتونین این لینک رو مطالعه کنید.

شکستگی صفحه بعد از المنت مورد نظر:

با استفاده از ویژگی page-break-after میتونیم کاری کنیم که بعد از المنت مورد نظر ما، صفحه شکسته بشه و ادامه محتویات در صفحه بعد قرار بگیره. برای اینکار کد بصورت زیر میشه:

اما اگر بخوایم از اینکار جلوگیری کنیم، باید از مقدار avoid استفاده کنیم. بصورت زیر:

به همین راحتی. برای مطالعه بیشتر در زمینه ویژگی page-break-after میتونین این لینک رو مطالعه کنید.

شکستگی صفحه درون المنت:

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

برای مطالعه بیشتر در زمینه ویژگی page-break-after میتونین این لینک رو مطالعه کنید.

ویژگی های widows و orphans:

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

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

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

برای نمونه میتونین این لینک رو مشاهده کنید و حالت پرینت رو در اون فعال کرده و یا ctrl + p رو بزنید و با این ویژگی ها کار کنید.

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

در جلسات بعد با ادامه این مبحث در خدمتتون هستیم.

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

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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