CSS Page Rule ni O'zlashtirish: Global Auditoriya uchun Bosma Stillar Jadvalini Moslashtirish

Bugungi raqamli dunyoda, e'tibor ko'pincha ekran tajribasiga qaratilgan bo'lsa-da, oddiy bosma sahifa ajablanarli darajada dolzarb bo'lib qolmoqda. Bu hisobotlar, schyot-fakturalar, retseptlar yoki sayohat marshrutlari bo'ladimi, foydalanuvchilar tez-tez veb-kontentni chop etishga muhtoj bo'lishadi. Veb-saytingizning yaxshi formatlangan, printerga qulay versiyasini taqdim etish foydalanuvchi tajribasi va foydalanish imkoniyati uchun juda muhimdir. Aynan shu yerda CSS bosma stillar jadvallari va @page qoidasi ishga tushadi.

Bosma Stillar Jadvallarining Ahamiyatini Tushunish

Bosma stillar jadvali - bu veb-sahifaning chop etilganda qanday ko'rinishini nazorat qilish uchun maxsus ishlab chiqilgan CSS faylidir. Maxsus bosma stillar jadvalisiz, brauzerlar ko'pincha sahifaning ekran versiyasini chop etishga harakat qiladi, bu esa quyidagilarga olib keladi:

• Siyoh va Qog'ozni Behuda Sarflash: Navigatsiya menyulari, reklamalar va dekorativ rasmlar kabi keraksiz elementlarni chop etish.
• O'qishning Qiyinligi: Juda kichik matn, noqulay bo'linadigan ustunlar va qog'ozda o'qish qiyin bo'lgan ranglar.
• Maket Muammolari: Elementlarning bir-birining ustiga tushishi yoki sahifa chetlarida kesilib qolishi.
• Foydalanish Imkoniyati Muammolari: Bosma kontentga tayanadigan ko'rish qobiliyati cheklangan foydalanuvchilar uchun qiyinchiliklar.

Bosma stillar jadvalini yaratish orqali siz veb-sahifalaringizni chop etish uchun optimallashtirishingiz, toza, o'qilishi oson va professional ko'rinishdagi natijani ta'minlashingiz mumkin. Bu foydalanuvchi tajribasini yaxshilashga yordam beradi va brendingizning sifatga sodiqligini mustahkamlaydi.

@page Qoidasi bilan Tanishtiruv

CSS dagi @page qoidasi sizga bosma sahifalarning turli jihatlarini, masalan, chekkalari (margins), o'lchami va yo'nalishini nazorat qilish imkonini beradi. U aynan bosma media uchun qo'llaniladigan stillarni belgilash usulini taqdim etadi.

Asosiy Sintaksis

@page qoidasining asosiy sintaksisi quyidagicha:

            @media print {
  @page {
    /* CSS properties for the printed page */
  }
}

            

              
                Copy
              
            
          

@media print media so'rovi qoida ichidagi stillar faqat sahifa chop etilayotganda qo'llanilishini ta'minlaydi.

@page Qoidasi Ichidagi Asosiy Xususiyatlar

• size: Bosma sahifaning o'lchamini belgilaydi. Umumiy qiymatlar qatoriga A4, Letter, Legal va landscape (albom yo'nalishi uchun) kiradi.
• margin: Bosma sahifa kontenti atrofidagi chekkalarni o'rnatadi. Yuqori, o'ng, pastki va chap tomonlar uchun turli xil chekkalarni belgilashingiz mumkin.
• margin-top, margin-right, margin-bottom, margin-left: Muayyan chekkalarni o'rnatish uchun alohida xususiyatlar.
• marks: Bosma sahifaga kesish belgilari yoki registratsiya belgilarini qo'shadi. Bu professional chop etish uchun foydalidir. Qiymatlariga crop va cross kiradi.
• bleed: Sahifa chekkalaridan tashqaridagi "bleed" (ortiqcha qoldiriladigan) maydon miqdorini belgilaydi. Bu ham professional chop etish uchun muhimdir.
• orphans: Paragrafning sahifa pastida qolishi kerak bo'lgan minimal satrlar sonini belgilaydi. Bitta satrning yolg'iz qolib ketishining oldini oladi.
• widows: Paragrafning sahifa tepasida qolishi kerak bo'lgan minimal satrlar sonini belgilaydi. Bitta satrning yolg'iz qolib ketishining oldini oladi.

Bosma Stillar Jadvalini Yaratish: Qadamma-qadam Qo'llanma

Veb-saytingiz uchun bosma stillar jadvalini yaratish bo'yicha qadamma-qadam qo'llanma:

1. Yashirish Kerak Bo'lgan Elementlarni Aniqlang

Birinchi qadam - chop etish uchun zarur bo'lmagan elementlarni aniqlash, masalan:

• Navigatsiya menyulari
• Yon panellar (Sidebars)
• Reklamalar
• Ijtimoiy tarmoq tugmalari
• Dekorativ rasmlar

Bu elementlarni bosma stillar jadvalingizda display: none; xususiyatidan foydalanib yashirishingiz mumkin.

            @media print {
  nav, aside, .ad, .social-buttons, img.decorative {
    display: none;
  }
}

            

              
                Copy
              
            
          

2. Matn va Maketni Optimallashtiring

Keyin, o'qish qulayligi uchun matn va maketni optimallashtirishga e'tibor qarating. Quyidagilarni inobatga oling:

• Shrift o'lchami: Qog'ozda yaxshiroq o'qilishi uchun shrift o'lchamini kattalashtiring. 12pt yoki 14pt shrift o'lchami ko'pincha yaxshi boshlanishdir.
• Shrift oilasi: Qog'ozda o'qish oson bo'lgan shrift oilasini tanlang. Times New Roman yoki Georgia kabi serif shriftlari ko'pincha afzal ko'riladi.
• Satr balandligi: Yaxshiroq o'qilishi uchun satr balandligini oshiring. Odatda 1.4 yoki 1.5 satr balandligi tavsiya etiladi.
• Rang kontrasti: Matn va fon o'rtasida yetarli kontrastni ta'minlang. Oq fondagi qora matn eng o'qilishi oson variantdir.
• Chekkalar va Ichki Bo'shliqlar (Margins and Padding): Toza va tartibli maket yaratish uchun chekkalar va ichki bo'shliqlarni sozlang.
• Keraksiz Ranglarni O'chirish: Agar veb-saytingizda fon ranglari yoki rangli matndan foydalansangiz, siyohni tejash uchun ularni bosma stillar jadvalida olib tashlashni o'ylab ko'ring.

            @media print {
  body {
    font-size: 12pt;
    font-family: Georgia, serif;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
  }

  h1, h2, h3 {
    color: #000;
  }
}

            

              
                Copy
              
            
          

3. Sahifa Bo'linishlarini Nazorat Qiling

Sahifa bo'linishlari ko'pincha noqulay joylarda, masalan, jadval yoki kod parchasi o'rtasida sodir bo'lishi mumkin. Sahifa bo'linishlarini nazorat qilish uchun quyidagi CSS xususiyatlaridan foydalanishingiz mumkin:

• page-break-before: Elementdan oldin sahifa bo'linishi kerakligini belgilaydi. Qiymatlariga auto, always, avoid, left va right kiradi.
• page-break-after: Elementdan keyin sahifa bo'linishi kerakligini belgilaydi. Qiymatlari page-break-before bilan bir xil.
• page-break-inside: Element ichida sahifa bo'linishi kerakligini belgilaydi. Qiymatlariga auto va avoid kiradi.

Masalan, jadvalning sahifalar bo'ylab bo'linib ketishining oldini olish uchun quyidagi CSS dan foydalanishingiz mumkin:

            @media print {
  table {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

Sarlavhadan oldin majburiy sahifa bo'linishini yaratish uchun quyidagi CSS dan foydalanishingiz mumkin:

            @media print {
  h2 {
    page-break-before: always;
  }
}

            

              
                Copy
              
            
          

4. @page Qoidasini Moslashtiring

Bosma sahifaning umumiy ko'rinishini nazorat qilish uchun @page qoidasidan foydalaning. Masalan, sahifa o'lchamini A4 qilib belgilash va chekkalar qo'shish uchun quyidagi CSS dan foydalanishingiz mumkin:

            @media print {
  @page {
    size: A4;
    margin: 2cm;
  }
}

            

              
                Copy
              
            
          

Shuningdek, ikki tomonlama hujjatda chap va o'ng sahifalar uchun turli xil stillarni belgilash uchun @page qoidasi ichida :left va :right psevdo-sinflaridan foydalanishingiz mumkin. Bu har bir sahifada almashinadigan sarlavhalar yoki altbilgilar qo'shish uchun foydalidir.

            @media print {
  @page :left {
    margin-right: 3cm;
  }

  @page :right {
    margin-left: 3cm;
  }
}

            

              
                Copy
              
            
          

5. URL manzil va Havolalarni Boshqarish

Veb-sahifani chop etayotganda, foydalanuvchilar onlayn resurslarga oson kirishlari uchun havolalarning URL manzillarini qo'shish ko'pincha foydalidir. Bunga CSS tomonidan yaratilgan kontent va attr() funksiyasidan foydalanib erishishingiz mumkin.

            @media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

            

              
                Copy
              
            
          

Ushbu CSS har bir havolaning URL manzilini havola matnidan keyin qavs ichida qo'shib qo'yadi. Bosma sahifani ortiqcha yuklamaslik uchun URL matnini kichikroq qilish yoki kamroq ko'zga tashlanadigan rangda qilishni o'ylab ko'rishingiz mumkin.

6. Bosma Stillar Jadvalini Sinovdan O'tkazish

Bosma stillar jadvalini yaratganingizdan so'ng, u kerakli natijalarni berishiga ishonch hosil qilish uchun uni sinchkovlik bilan sinab ko'rish muhimdir. Bosma stillar jadvalini quyidagi usullar bilan sinab ko'rishingiz mumkin:

• Brauzeringizning chop etishni oldindan ko'rish funksiyasidan foydalanish.
• Sahifani jismoniy printerda chop etish.
• Onlayn bosma stillar jadvalini sinash vositalaridan foydalanish.

Brauzerlararo muvofiqlikni ta'minlash uchun bosma stillar jadvalingizni turli brauzerlar va operatsion tizimlarda sinab ko'ring. Shuningdek, bosma stillar jadvalingiz turli stsenariylarda yaxshi ishlashiga ishonch hosil qilish uchun uni turli xil kontent turlari bilan sinab ko'ring.

Bosma Stillar Jadvallari uchun Global Mulohazalar

Global auditoriya uchun bosma stillar jadvallarini loyihalashda quyidagilarni hisobga olish muhim:

• Qog'oz o'lchamlari: Turli mintaqalarda turli xil qog'oz o'lchamlari ishlatiladi. Dunyoning aksariyat qismida A4 keng tarqalgan bo'lsa, Shimoliy Amerikada Letter o'lchami standart hisoblanadi. Foydalanuvchilarga o'zlari afzal ko'rgan qog'oz o'lchamini tanlash imkoniyatini berishni yoki bosma stillar jadvalingizni turli qog'oz o'lchamlariga moslashadigan qilib loyihalashni o'ylab ko'ring.
• Sana va Raqam Formatlari: Sana va raqam formatlari turli madaniyatlarda farq qiladi. Sanalar va raqamlarni foydalanuvchining joylashuviga qarab formatlash uchun JavaScript yoki server tomonidagi skriptlardan foydalaning.
• Tilni Qo'llab-quvvatlash: Bosma stillar jadvalingiz turli tillarni, jumladan, turli belgi to'plamlari va matn yo'nalishlariga ega bo'lgan tillarni (masalan, arab va ibroniy kabi o'ngdan chapga yoziladigan tillar) qo'llab-quvvatlashiga ishonch hosil qiling.
• Foydalanish Imkoniyati: Bosma stillar jadvalingizni nogironligi bo'lgan foydalanuvchilar uchun qulay qiling. Rasmlar uchun alternativ matn taqdim eting va matnning o'qilishi oson va yaxshi formatlanganligiga ishonch hosil qiling.
• Huquqiy va Muvofiqlik Talablari: Turli mintaqalarda chop etish bilan bog'liq har qanday qonuniy yoki muvofiqlik talablaridan xabardor bo'ling. Masalan, ba'zi mamlakatlarda schyot-fakturalar yoki moliyaviy hujjatlarni chop etishga oid qoidalar bo'lishi mumkin.

Misol: Sayohat Marshruti uchun Bosma Stillar Jadvali

Keling, sayohat marshruti uchun bosma stillar jadvali misolini ko'rib chiqaylik. Marshrut parvozlar, mehmonxonalar, tadbirlar va aloqa ma'lumotlari haqidagi ma'lumotlarni o'z ichiga oladi.

Bu asosiy HTML strukturasi:

            <div class="itinerary">
  <h1>Sayohat Marshruti</h1>
  <div class="flight">
    <h2>Parvoz Tafsilotlari</h2>
    <p>Aviakompaniya: United Airlines</p>
    <p>Reys raqami: UA123</p>
    <p>Uchish: Nyu-York (JFK) - 10:00</p>
    <p>Qo'nish: London (LHR) - 22:00</p>
  </div>
  <div class="hotel">
    <h2>Mehmonxona Tafsilotlari</h2>
    <p>Mehmonxona nomi: The Ritz London</p>
    <p>Manzil: 150 Piccadilly, London W1J 9BR, Buyuk Britaniya</p>
    <p>Telefon: +44 20 7493 8181</p>
  </div>
  <div class="activity">
    <h2>Tadbir: Bukingem Saroyi bo'ylab Ekskursiya</h2>
    <p>Sana: 20-iyul, 2024-yil</p>
    <p>Vaqt: 14:00</p>
    <p>Uchrashuv joyi: Bukingem Saroyi Asosiy Darvozasi</p>
  </div>
</div>

            

              
                Copy
              
            
          

Bu esa bosma stillar jadvali:

            @media print {
  body {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    color: #000;
  }

  .itinerary {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .itinerary h1 {
    font-size: 18pt;
    margin-bottom: 10px;
  }

  .itinerary h2 {
    font-size: 14pt;
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .flight, .hotel, .activity {
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
  }

  @page {
    size: A4;
    margin: 2cm;
  }
}

            

              
                Copy
              
            
          

Ushbu misolda biz butun hujjat uchun shrift oilasi, shrift o'lchami va rangini belgiladik. Shuningdek, toza va o'qilishi oson maket yaratish uchun marshrut elementlarining chekkalarini va ichki bo'shliqlarini sozladik. @page qoidasi sahifa o'lchamini A4 qilib belgilaydi va barcha tomonlarga 2 sm chekka qo'shadi.

Ilg'or Texnikalar va Eng Yaxshi Amaliyotlar

• CSS O'zgaruvchilardan (Maxsus Xususiyatlar) Foydalanish: Bosma stillar jadvalingizni oson boshqarish va yangilash uchun ranglar, shrift o'lchamlari va chekkalar uchun CSS o'zgaruvchilarini belgilang.
• JavaScript yordamida Shartli Chop Etish: Sahifaning chop etilayotganligini aniqlash va maxsus stillarni ishga tushirish uchun dinamik ravishda sinflarni qo'shish yoki olib tashlash uchun JavaScript-dan foydalaning. Biroq, JavaScript-ga haddan tashqari ishonishdan ehtiyot bo'ling, chunki u har doim ham yoqilgan bo'lmasligi mumkin.
• Masshtablanuvchi Grafika uchun SVG: Logotiplar va piktogrammalar uchun SVG (Scalable Vector Graphics) dan foydalaning, bu ularning turli ruxsatlarda chop etilganda aniq va tiniq ko'rinishini ta'minlaydi.
• CSS Freymvorkidan Foydalanishni O'ylab Ko'ring: Ba'zi CSS freymvorklari bosma stillar jadvallari uchun o'rnatilgan yordamni taklif qiladi, bu esa izchil va yaxshi tuzilgan bosma maket yaratishni osonlashtiradi.
• Rasmlarni Chop Etish uchun Optimallashtiring: Agar rasmlarni kiritishingiz shart bo'lsa, piksellashish yoki xira tasvirlarni oldini olish uchun ularni bosma ruxsat (300 DPI) uchun optimallashtiring.

Xulosa

Samarali bosma stillar jadvallarini yaratish veb-ishlab chiqishning muhim qismi bo'lib, kontentingizni chop etishi kerak bo'lganlar uchun ijobiy foydalanuvchi tajribasini ta'minlaydi. @page qoidasini tushunish va ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz professional ko'rinadigan va global auditoriya uchun qulay bo'lgan printerga mos veb-sahifalar yaratishingiz mumkin. Eng yaxshi natijalarga erishish uchun o'qish qulayligiga ustuvorlik berish, maketni optimallashtirish va bosma stillar jadvalini sinchkovlik bilan sinab ko'rishni unutmang.

Bosma stillar jadvallariga e'tibor berish orqali siz foydalanuvchilaringiz kontentingizni qanday iste'mol qilishidan qat'i nazar, to'liq va qulay foydalanuvchi tajribasini taqdim etishga sodiqligingizni namoyish etasiz. Tafsilotlarga bo'lgan bu e'tibor brendingiz obro'sini sezilarli darajada oshirishi va butun dunyo bo'ylab auditoriyangiz bilan ishonchni mustahkamlashi mumkin.