CSS-PRINT
@page
@page - предназначено, когда тип носителя CSS равен печати ( <связь: СМИ:="Распечатать">: , @СМИ: Распечатать: { п: {...} }) или установить специальные свойства в 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>Привет, мир01!!</p>
<p>Привет, мир02!!</p>
<p>Привет, мир03!!</p>
<p>Привет, мир04!!</p>
<button onclick="window.print()">Распечатать:</button>
</body>
</html>
orphans widows
orphans widows - обычно используется в пунктах: <p> с элементами.
Если абзац находится в самом низу страницы, то orphans свойство определяет минимальное количество строк текста, которое останется на данной странице или столбце, а остальное будет перенесено на новую страницу или новый столбец, т.е. если браузер не может обеспечить минимальное количество строк, необходимое для сирот, то свойство весь абзац будет перенесен на новую страницу.
Это делает обратное widows — определяет минимальное количество строк, которые должны быть перенесены на следующую страницу, а остальные останутся в заданном краю. Браузер должен расположить абзацы таким образом, чтобы он мог обеспечить 5 или более строк, требуемых для окон, на новой странице или в столбце.
Обратите внимание, что значения этих свойств должны быть равны 2 или более, а отрицательное значение запрещено.
Если указаны оба этих свойства, но их значения конфликтуют, вдовы имеют приоритет над сиротами.
Краткая информация:
| Նախասահմանված արժեքը | 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 gradida justo porttitor a. Нам витаэмолестие лев……..</span
>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit semper nisi, eget gradida justo porttitor a……..
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit semper nisi, eget gradida 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 data-no-auto-translation="">Lorem 01</h2> <!--այս հատվածը կտեղադրվի գլխավոր էջի վրա։-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум…….
</p>
<h2 data-no-auto-translation="">Lorem 02</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……
</p>
<h2 data-no-auto-translation="">Lorem 03</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум………
</p>
<h2 data-no-auto-translation="">Lorem 04</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……..
</p>
<h2 data-no-auto-translation="">Lorem 05</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……….
</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 data-no-auto-translation="">Lorem 01</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум…….
</p>
<h2 data-no-auto-translation="">Lorem 02</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……
</p>
<h2 data-no-auto-translation="">Lorem 03</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум………
</p>
<h2 data-no-auto-translation="">Lorem 04</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……..
</p>
<h2 data-no-auto-translation="">Lorem 05</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……….
</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 data-no-auto-translation="">Lorem 01</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум…….
</p>
<h2 data-no-auto-translation="">Lorem 02</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……
</p>
<h2 data-no-auto-translation="">Lorem 03</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум………
</p>
<h2 data-no-auto-translation="">Lorem 04</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……..
</p>
<h2 data-no-auto-translation="">Lorem 05</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum нон нибх нон претиум……….
</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в разрыве страницы.
avoid-page - это то же самое, что avoid, но применяется только к обрезке страниц.
left – элементы после главной страницы будут размещаться на четных страницах, только слева.
right - после главной страницы элементы будут размещаться на нечетных страницах только с правой стороны.
recto – пропускает одну или две страницы, чтобы содержимое элемента начиналось с первой страницы. Первая страница — это правая сторона для книги, которую читают слева направо, а левая сторона — для тех, которые читаются справа налево. Не поддерживается браузерами.
verso – пропускает страницу или две, чтобы содержимое элемента начиналось на следующей странице. Боковая страница — это левая сторона книги, читаемой слева направо, и правая сторона книги, читаемой справа налево. Не поддерживается браузерами.
Относится к столбцам:
avoid-column - это то же самое, что avoid, но применяется только к обрезке столбцов. Не поддерживается браузерами.
column - обрезает столбец после данного элемента.
break-before имеет те же значения, что и Break-after, но разрывает веб-страницу или столбец перед данным элементом.
break-inside являются значениями
auto — содержимое элемента обрезается по необходимости как страниц, так и столбцов.
avoid — запрещает обрезать содержимое элемента как в случае страниц, так и в случае столбцов.
avoid-page - запрещает обрезать содержимое элемента в случае страниц.
avoid-column — запрещает обрезать содержимое элемента в случае столбцов.
Общий пример для трех параметров:
html {семейство шрифтов: шрифты Helvetica, Arial, без засечек; } h1 {размер шрифта: 3 рем; Межбуквенное расстояние: 2 пикселя; диапазон столбцов: все; } h2 {размер шрифта: 2 рем; цвет: красный; Межбуквенное расстояние: 1 пиксель; перерыв до: столбец; /*столбец обрезается каждый раз <h2 data-no-auto-translation="">-ից առաջ*/
}
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 data-no-auto-translation="">Main heading</h1>
<h2 data-no-auto-translation="">Heading-1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing…… lectus dictum.
</p>
<h3 data-no-auto-translation="">Subheading-1.1</h3>
<span>Lorem ipsum dolor сидеть amet consectetur adipisicing elit.</span>
<h4 data-no-auto-translation="">Subheading-1.2</h4>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </span>
<h2 data-no-auto-translation="">Heading-2</h2>
<p>Praesent condimentum dui dui, sit amet rutrum….. nec nisi.</p>
<h2 data-no-auto-translation="">Heading-3</h2>
<p>Vivamus eleifend metus vitae neque... Расскажи нам</p>
<h2 data-no-auto-translation="">Heading-4</h2>
<p>In finibus viverra enim vel suscipit. ……. ускорить!</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;
}
Russian 
Armenian