همونطور که اطلاع دارید در جلسه گذشته نکات زیادی رو در مورد درست کردن استایل پرینت براتون قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه با ادامه نکات در خدمتتون هستیم.
فرض کنید که شما یک Media query شبیه به مورد زیر دارید:
@media screen and (min-width: 48em) { /* screen only */ } |
چون در query بالا از نوع screen استفاده کردیم، پس این کدها فقط در دستگاه هایی که صفحه نمایش دارند، اعمال میشن و در حالت پرینت هیچ تاثیری ندارند. اگر بخواید که کدها علاوه بر نمایشگر، در حالت پرینت نیز تاثیر داده بشه، میتونین کلمه screen رو حذف کنید. بصورت زیر:
@media (min-width: 48em) { /* all media types */ } |
با اینکار هر جایی که اندازه عرض از 48em کمتر باشه، کدهای مورد نظر بهش اعمال میشه.
نسخه های نهایی و فعلی مرورگر Chrome و Firefox توانایی پرینت گرفتن از نقشه های Google Maps و ... رو دارند ولی بقیه مرورگرها مثل Safari این قابلیت رو ندارند. برای مواقعی که نیاز هست یک نقشه رو برای حالت پرینت قرار بدین، میتونین از سایتهایی که نقشه استاتیک و ثابت تهیه میکنند، استفاده کنید. مثلا سایت staticmapmaker رو در نظر بگیرید. با استفاده از این سایت در ابتدا میتونین سرویس مورد نظرتون رو انتخاب کنید. برای مثال من Google رو انتخاب میکنم. بعد از اون میتونین آدرس و موقعیت مورد نظرتون رو در ستون سمت چپ وارد کنید. با اینکار نقشه موقعیت مورد نظر بصورت یک تصویر ثابت و استاتیک در سمت راست نمایش داده میشه. در سمت راست میتونین روشهای مختلف استفاده از این نقشه رو مشاهده کنید. روش آخر که مربوط به CSS هست همون روشی هست که در اینجا بدرد ما میخوره:
میبینید که نقشه ثابت موقعیت مورد نظر ما بصورت یک تصویر پس زمینه قرار داده شده. حالا میتونیم این ویژگی رو برای المنت مورد نظرمون قرار بدیم. کد زیر رو در نظر بگیرید:
1 2 3 4 5 6 7 | .map { width: 400px; height: 300px; background-image: url('http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true'); -webkit-print-color-adjust: exact; print-color-adjust: exact; } |
میبینید که طول و عرض رو مشخص کردیم و تصویر مورد نظر رو بعنوان پس زمینه المنت قرار دادیم. در نهایت هم با استفاده از ویژگی print-color-adjust کاری کردیم که مرورگر مجبور به پرینت گرفتن تصویر پس زمینه بشه و از اون صرف نظر نکنه.
فرض کنید که شما میخواید یک آدرس طولانی رو پرینت کنید و کاربر مجبور هست که همه اون موارد رو یکی یکی از روی صفحه پرینت شده بخونه و در مرورگر تایپ کنه تا وارد سایت مورد نظر شما بشه. شما میتونین اون آدرس سایت رو درون یک QR Code قرار بدین و کاربر میتونه با اسکن کردن اون با تلفن همراه، به راحتی و با سرعت وارد سایت مورد نظرتون بشه. برای اینکار میتونین بصورت زیر عمل کنید. برای ساخت QR Code مورد نظرمون از Google Chart API استفاده میکنیم و چهار مقدار رو باید برای اون مشخص کنیم:
مثلا اگر بخوایم متن
رو درون QR Code قرار بدیم، بصورت زیر عمل میکنیم:https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=https://7learn.com&choe=UTF-8 |
با اینکار خروجی بصورت زیر نمایش داده میشه:
حالا اگر کاربر مورد نظر این qr code رو اسکن کنه، همون لینک سایت سون لرن رو مشاهده میکنه. به همین راحتی.
برای اینکه در حالت پرینت Qr Code ساخته شده رو قرار بدیم، بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 | @media print { header h1:after { content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=https://7learn.com&choe=UTF-8); position: absolute; right: 0; top: 0; } } |
میبینید که به همین راحتی QR Code مورد نظر رو درون کلاس کاذب after مربوط به هدر قرار دادیم و موقعیت اون رو نیز مشخص کردیم.
برای مطالعه بیشتر در زمینه پرینت میتونین این لینک و این لینک رو مطالعه کنید.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
Source
سون لرن • آموزش...