Docy

CSS-PRINT

Մոտավոր ընթերցում. 4 րոպե 0 դիտումներ

@page

@page – նախատեսված է, երբ css-ի media տեսակը հավասար է print- ի(  <link media=”print”,  @media print { p {} }), կամ css -ում հատուկ հատկություններ առանձնացնելու համար, որը կօգտագործվի միայն էջը տպելու ժամանակ։ 

Այն թույլ է տալիս մինչ տպելը էջի դաշտերի տեղակայման փոփոխություն։

Այս կանոնի մեջ սահմանած հատկությունները կօգտագործվեն միայն տպելու ժամանակ։ 

Այստեղ կարելի է օգտագործել որոշակի հատկություններ՝ margin, margin-top, margin-bottom, margin-right, margin-left՝ վերևից և ներքևից, աջ և ձախ կողմից սահմաններ որոշելու հատկություններ։

Բրաուզերն ունի տպելու համար նախատեսված ծրագիր, որտեղ  հնարավոր է մինչ էջերը տպելը տեսնել թե ինչպիսին է։ Այնտեղ հնարավոր է փաստաթղթի էջերը ցուցադրել հերթականությամբ, կամ աջ և ձախ դասավորությամբ։ 

Կան հատուկ պսևդոկլասներ, որոնց միջոցով հնարավոր է քիչ առաջ թվարկած հատկություններն օգտագործել միայն աջ կողմում ցուցադրված էջերի համար, միայն ձախ կողմում ցուցադրվածների, կամ փաստաթղթի միայն առաջին էջի համար։ 

Պսևդոկլասներն են՝

:left -հատկությունն օգտագործել միայն ձախ կողմում ցուցադրված էջերի դաշտերի համար։

:right – միայն աջ կողմում ցուցադրվածների համար։

։first – միայն առաջին էջի համար։

				
					  @page :first {
     /* Առաջին էջի պարունակությունը կունենա հետևյալ արտաքին սահմանները։ */
    margin-left: 50%;
    margin-top: 50%;
  }
  p {
    page-break-after: always; /* ամեն էլեմենտ տեղադրելու է նոր էջի վրա։ */
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <link rel="stylesheet" media="print" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello world01!!</p>
    <p>Hello world02!!</p>
    <p>Hello world03!!</p>
    <p>Hello world04!!</p>
    <button onclick="window.print()">print</button>
  </body>
</html>

				
			

orphans widows

orphans widows – սովորաբար օգտագործվում են պարագրաֆների՝ <p> էլեմենտների հետ։ 

Եթե որևէ պարագրաֆ հայտնվում է էջի ամենաներքևում, ապա orphans հատկությունը սահմանում է տեքստի մինիմալ քանակի տողերը, որոնք մնալու են տվյալ էջում կամ սյունակում, իսկ մնացածը տեղափոխվելու է նոր էջ կամ նոր սյունակ, այսինքն եթե բրաուզերը չկարողանա ապահովել մինիմալ քանակի տող, որը պահանջում է orphans-ը, ապա ամբողջ պարագրաֆը կտեղափոխի նոր էջ։ 

Հակառակ գործողությունն է կատարում widows -ը՝ սահմանում է տողերի մինիմալ քանակը, որը պետք է տեղափոխվի հաջորդ էջ, իսկ մնացածը մնա տվյալ եջում։ Բրաուզերը պետք է այնպես դասավորի պարագրաֆները, որպեսզի կարողանա ապահովել widows-ի պահանջած 5 կամ ավելի տողերը նոր էջի կամ սյունակի մեջ։ 

Հաշվի առնել, որ այս հատկությունների արժեքները հավասար պիտի լինեն 2 կամ ավելի, իսկ բացասական արժեք արգելվում է։

 

Եթե այս երկու հատկություններն էլ նշված են, բայց դրանց արժեքները կոնֆլիկտի ունեն, ապա widows-ը առաջնահերթություն ունի orphans -ից։

Հակիրճ տվյալները՝

Նախասահմանված արժեքը   2
Ժառանգվում ենԱյո
Կիրառվում ենԲլոկ տեսակի էլեմենտների հետ
Ենթարկվում է անիմացիայիՈչ
				
					div {
  background-color: orange;
  height: 460px;
  padding: 20px;
  columns: 3;   /* սրանով տեքստը բաժանում ենք երեք սյունակների */
}
div p {
  orphans: 4;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing…….</p>
      <p>
        <span style="color: white">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Fusce hendrerit semper nisi, eget gravida justo 
        porttitor a. Nam vitaemolestie leo……...</span
        >
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit
        semper nisi, eget gravida justo porttitor a……..
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit
        semper nisi, eget gravida justo porttitor a………
      </p>
    </div>
  </body>
</html>

				
			

page-break-after page-break-before page-break-inside

նախատեսված են վեբ էջի պարունակությունը ճիշտ տպելու համար։

Հնարավոր է  վեբ էջը տպելու ընթացքում դրա պարունակությունը՝ էլեմենտները, տեղավորվեն մի քանի էջերի վրա։ Պարունակությունը կտրվում և մնացածը հաջորդ էջ է տեղափոխվում այն դեպքում, երբ տվյալ էջը զբաղեցվում է ամբողջությամբ։ Այսպիսով հնարավոր է անցանկալի արդյունքներ ունենալ։ 

Դրանցից խուսափելու համար սահմանվում են այս հատկությունները, որպեսզի պարունակությունը կտրվի մեր ուզած վայրից։

page-break-after – սահմանում է՝ պարունակությունը պետք է կտրվի տվյալ էլեմենտից(որի մեջ սահմանված է հատկությունը) անմիջապես հետո։

page-break-before – սահմանում է՝ պարունակությունը պետք է կտրվի տվյալ էլեմենտից(որի մեջ սահմանված է հատկությունը) առաջ։

page-break-inside – սահմանում է՝ տվյալ էլեմենտի պարունակությունը (որի մեջ սահմանված է հատկությունը) կարող է կտրվել ցանկացած վայրից, որտեղ կհատվեն երկու էջերը։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը   auto
Ժառանգվում ենՈչ
Կիրառվում ենԲլոկ տեսակի էլեմենտների հետ
Ենթարկվում է անիմացիայիՈչ

page-break-after հատկության արժեքներն են՝

always – միշտ կտրում է վեբ էջը էլեմենտի ավարտից հետո։

auto – վեբ Էջը կտրում է անհրաժեշտության դեպքում։

avoid – Արգելում է վեբ էջի կտրումը էլեմենտի ավարտից հետո։

left – գլխավոր էջից հետո էլեմենտները կտեղադրվեն զույգ թվերով էջերի՝  ձախ կողմերի վրա միայն։

right –  գլխավոր էջից հետո էլեմենտները կտեղադրվեն կենտ թվերով էջերի՝  աջ կողմերի վրա միայն։

Բրաուզերների վրա տարբերությունը չի նկատվի․ ուստի կօգտվենք հետևյալ կայքից՝  https://printcss.live/ ։

				
					@media print {
  div p {
    page-break-after: left;
  }
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
    
      <h2>Lorem 01</h2> <!--այս հատվածը կտեղադրվի գլխավոր էջի վրա։-->
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium…….
      </p>
      
      <h2>Lorem 02</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……
      </p>
      <h2>Lorem 03</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium………
      </p>
      <h2>Lorem 04</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……..
      </p>
      <h2>Lorem 05</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……….
      </p>
      
    </div>
  </body>
</html>

				
			

page-break-before հատկության արժեքներն են՝

always – միշտ կտրում է վեբ էջը մինչ էլեմենտի սկիզբը ։

auto – վեբ  Էջը կտրում է անհրաժեշտության դեպքում։

avoid – Արգելում է վեբ էջի կտրումը մինչ էլեմենտի սկիզբը։

left – գլխավոր էջից հետո էլեմենտները կտեղադրվեն զույգ թվերով էջերի՝  ձախ կողմերի վրա միայն։
Կկտրվի մինչ տվյալ էլեմենտը և ոչ թե դրանից հետո։

right – գլխավոր էջից հետո էլեմենտները կտեղադրվեն կենտ թվերով էջերի՝  աջ կողմերի վրա միայն։
Կկտրվի մինչ տվյալ էլեմենտը և ոչ թե դրանից հետո։

				
					@media print {
  div p {
    page-break-before: right;
  }
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <h2>Lorem 01</h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium…….
      </p>
      <h2>Lorem 02</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……
      </p>
      <h2>Lorem 03</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium………
      </p>
      <h2>Lorem 04</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……..
      </p>
      <h2>Lorem 05</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……….
      </p>
      
    </div>
  </body>
</html>

				
			

page-break-inside հատկության արժեքներն են՝

auto –էջի կտրումը կատարվում է էլեմենտի՝ պարունակության մեջ, և կտրում է որտեղից անհրաժեշտ է տվյալ պարագայում(օրինակ, երբ պարունակությունը հայտնվի երկու էջերի արանքում, կկտրի, որ մի մասը մնա էջի վրա, իսկ մյուսն անցնի հաջորդ էջ)։

avoid – արգելում է էլեմենտի պարունակության կտրումը, այսինքն, եթե պարունակությունը հայտնվում է երկու էջերի միջև, ապա ամբողջ պարունակությունն անցնում է հաջորդ էջ։

				
					@media print {
  div p {
    page-break-inside: auto;
  }
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <h2>Lorem 01</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium…….
      </p>
      <h2>Lorem 02</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……
      </p>
      <h2>Lorem 03</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium………
      </p>
      <h2>Lorem 04</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……..
      </p>
      <h2>Lorem 05</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        condimentum non nibh non pretium……….
      </p>
    </div>
  </body>
</html>

				
			

break-after break-before break-inside

Նախատեսված են նույն գործողությունների համար, ինչ page-break-after,   page-break-before և page-break-inside   հատկությունները։ Սրանց արժեքներն ավելի շատ են և կարող են նաև սյունակներ կտրել։

Կարելի է ասել, որ break-after,   break-before,   break-inside հատկությունները փոխարինման են եկել   page-break-after,   page-break-before և page-break-inside հատկություններին։ 

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը   auto
Ժառանգվում ենՈչ
Կիրառվում ենԲլոկ տեսակի էլեմենտների հետ
Ենթարկվում է անիմացիայիՈչ

break-after -ի արժեքներն են՝

Վերաբերում են թե էջերին և թե սյունակներին․
all – վեբ Էջը, կամ սյունակը կտրում է տվյալ էլեմենտից հետո։

auto – վեբ Էջը, կամ սյունակը կտրում է անհրաժեշտության դեպքում։

avoid – Արգելում է վեբ էջի կամ սյունակի կտրումը էլեմենտի ավարտից հետո։

Վերաբերում են էջերին․
page – նույնն է ինչ always-ը page-break-after-ի մեջ։

avoid-page – նույնն է ինչ avoid-ը, բայց վերաբերում է միայն էջի կտրմանը։

left – գլխավոր էջից հետո էլեմենտները կտեղադրվեն զույգ թվերով էջերի՝  ձախ կողմերի վրա միայն։

right – գլխավոր էջից հետո  էլեմենտները կտեղադրվեն կենտ թվերով էջերի՝  աջ կողմերի վրա միայն։

recto – բաց է թողնում մեկ կամ երկու էջ, որպեսզի էլեմենտի պարունակությունը սկսվի առջևի էջից։ Առջևի էջը աջ կողմն է ձախից աջ կարդացվող գրքի համար և ձախ կողմն է աջից ձախ կարդացվողների համար։ Չի աջակցվում բրաուզերների կողմից։

verso –  բաց է թողնում մեկ կամ երկու էջ, որպեսզի էլեմենտի պարունակությունը սկսվի կողքի էջից։ Կողքի էջը ձախ կողմն է ձախից աջ կարդացվող գրքի համար և աջ  կողմն է աջից ձախ կարդացվողների համար։ Չի աջակցվում բրաուզերների կողմից։

Վերաբերում են սյունակներին․
avoid-column – նույնն է ինչ avoid-ը, բայց վերաբերում է միայն սյունակի կտրմանը։ Չի աջակցվում բրաուզերների կողմից։

column – սյունակը կտրում է տվյալ էլեմենտից հետո։


break-before –ի արժեքները նույնն են ինչ break-after -ինը, բայց վեբ էջը կամ սյունակը կտրում է տվյալ էլեմենտից առաջ։


break-inside –ի արժեքներն են՝

auto – էլեմետնի պարունակությունը կտրվում է ըստ անհրաժեշտության թե՜ էջերի և թե՜ սյունակների դեպքում։

avoid – արգելում է կտրել էլեմենտի պարունակությունը թե՜ էջերի և թե՜ սյունակների դեպքում։

avoid-page – արգելում է կտրել էլեմենտի պարունակությունը էջերի դեպքում։

avoid-column – արգելում է կտրել էլեմենտի պարունակությունը սյունակների դեպքում։

Ընդհանուր օրինակ երեք պարամետրերի համար՝

				
					html {
  font-family: helvetica, arial, sans-serif;
}
h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}
h2 {
  font-size: 2rem;
  color: red;
  letter-spacing: 1px;
  break-before: column;   /*սյունակը կտրվում է յուրաքանչյուր <h2>-ից առաջ*/
}
span {
  break-after: avoid;   /*<span>-ններից հետո արգելվում է կտրել սյունակը*/
  font-size: 1rem;
}
p {
  line-height: 1.5;
  break-inside: avoid-column;   /* արգելվում է կտրել տվյալ էլեմենտի  
                                պարունակությունը*/
}
article {
  column-width: 200px;
  gap: 20px;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      
    <article>
      <h1>Main heading</h1>
      <h2>Heading-1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing …… lectus dictum.
      </p>
      <h3>Subheading-1.1</h3>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
      <h4>Subheading-1.2</h4>
      <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </span>
      <h2>Heading-2</h2>
      <p>Praesent condimentum dui dui, sit amet rutrum ….. nec nisi.</p>
      <h2>Heading-3</h2>
      <p>Vivamus eleifend metus vitae neque …. tellus.</p>
      <h2>Heading-4</h2>
      <p>In finibus viverra enim vel suscipit. ……. expedita!</p>
    </article>
    
  </body>
</html>

				
			

print-color-adjust

print-color-adjust – սահմանում է` բրաուզերին թույլատրվում կամ արգելվում է փոխել էլեմենտի արտաքին տեսքը, եթե անհրաժեշտ է՝  հաշվի առնելով էլեմենտը ցուցադրող սարքավորման տեսակը և հնարավորությունները։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը   economy
Ժառանգվում ենԱյո
Կիրառվում ենԲոլոր տեսակի էլեմենտների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

economy – բրաուզերին թույլատրվում է շտկումներ կատարել  էլեմենտում իր ուզածի պես, որպեսզի կարգավորի ցուցադրող սարքավորման համար։ Օրինակ տպելու դեպքում բրաուզերը կարող է բացառել ֆոնային նկարները և տեքստին այնպիսի գույն հաղորդել, որ այն ընթեռնելի դառնա սպիտակ թղթի վրա։

exact – էլեմենտի պարունակությունը հատուկ կերպով և խնամքով մշակված է, ուստի բրաուզերի կողմից ենթարկած փոփոխությունը կարող է իրավիճակը վատթարացնել, այլ ոչ թե բարելավել։ Այս արժեքով արգելվում է բրաուզերին էլեմենտում որևէ փոփոխություն կատարել։

				
					div {
  background-color: black;
  background-image: url(example.png);
  color: white;
  -webkit-print-color-adjust: exact;
}
				
			

Թողնել մեկնաբանություն

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
hyArmenian