CSS-PRINT
@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; /* ամեն էլեմենտ տեղադրելու է նոր էջի վրա։ */
}
Hayti
Hello world01!!
Hello world02!!
Hello world03!!
Hello world04!!
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;
}
hayti
Lorem ipsum dolor sit amet, consectetur adipiscing…….
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce hendrerit semper nisi, eget gravida justo
porttitor a. Nam vitaemolestie leo……...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit
semper nisi, eget gravida justo porttitor a……..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit
semper nisi, eget gravida justo porttitor a………
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;
}
}
hayti
Lorem 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium…….
Lorem 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……
Lorem 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium………
Lorem 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……..
Lorem 05
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……….
page-break-before հատկության արժեքներն են՝
always – միշտ կտրում է վեբ էջը մինչ էլեմենտի սկիզբը ։
auto – վեբ Էջը կտրում է անհրաժեշտության դեպքում։
avoid – Արգելում է վեբ էջի կտրումը մինչ էլեմենտի սկիզբը։
left – գլխավոր էջից հետո էլեմենտները կտեղադրվեն զույգ թվերով էջերի՝ ձախ կողմերի վրա միայն։
Կկտրվի մինչ տվյալ էլեմենտը և ոչ թե դրանից հետո։
right – գլխավոր էջից հետո էլեմենտները կտեղադրվեն կենտ թվերով էջերի՝ աջ կողմերի վրա միայն։
Կկտրվի մինչ տվյալ էլեմենտը և ոչ թե դրանից հետո։
@media print {
div p {
page-break-before: right;
}
}
hayti
Lorem 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium…….
Lorem 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……
Lorem 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium………
Lorem 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……..
Lorem 05
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……….
page-break-inside հատկության արժեքներն են՝
auto –էջի կտրումը կատարվում է էլեմենտի՝ պարունակության մեջ, և կտրում է որտեղից անհրաժեշտ է տվյալ պարագայում(օրինակ, երբ պարունակությունը հայտնվի երկու էջերի արանքում, կկտրի, որ մի մասը մնա էջի վրա, իսկ մյուսն անցնի հաջորդ էջ)։
avoid – արգելում է էլեմենտի պարունակության կտրումը, այսինքն, եթե պարունակությունը հայտնվում է երկու էջերի միջև, ապա ամբողջ պարունակությունն անցնում է հաջորդ էջ։
@media print {
div p {
page-break-inside: auto;
}
}
hayti
Lorem 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium…….
Lorem 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……
Lorem 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium………
Lorem 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……..
Lorem 05
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
condimentum non nibh non pretium……….
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; /*սյունակը կտրվում է յուրաքանչյուր -ից առաջ*/
}
span {
break-after: avoid; /*-ններից հետո արգելվում է կտրել սյունակը*/
font-size: 1rem;
}
p {
line-height: 1.5;
break-inside: avoid-column; /* արգելվում է կտրել տվյալ էլեմենտի
պարունակությունը*/
}
article {
column-width: 200px;
gap: 20px;
}
hayti
Main heading
Heading-1
Lorem ipsum dolor sit amet, consectetur adipiscing …… lectus dictum.
Subheading-1.1
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Subheading-1.2
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Heading-2
Praesent condimentum dui dui, sit amet rutrum ….. nec nisi.
Heading-3
Vivamus eleifend metus vitae neque …. tellus.
Heading-4
In finibus viverra enim vel suscipit. ……. expedita!
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;
}