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; /* ամեն էլեմենտ տեղադրելու է նոր էջի վրա։ */
}
<!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;
}
Armenian 
Russian