Добавляет статью про `break-after` и `page-break-after` #5622

furtivite · 2025-01-02T15:24:18Z

Описание

Добавил статью по двум свойствам. Лучше сливать после #5620, в @page надо добавить ссылку сюда.

Превью: https://content-5622.dev.doka.guide/css/break-after/

Closes #663
Closes #654

Чек-лист

Текст оформлен согласно руководству по стилю
Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

solarrust

Классно!
Только не очень понятно место свойства page-break-after. Только к концу доки поняла, что это устаревший вариант основного свойства.

css/break-after/index.md

solarrust · 2025-01-07T10:39:49Z

css/break-after/index.md

+  - css/media
+  - css/lang
+keywords:
+  - page-break-after


Может быть найдутся ещё какие-то ключевые слова, по которым эту статью можно будет найти?

solarrust · 2025-01-07T10:40:23Z

css/break-after/index.md

+
+## Кратко
+
+Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойством `break-after`.  Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать.


А про второе свойство ничего не скажем в этом блоке?

Здесь достаточно сложно что-то сказать, потому что page-break-after делает то же самое.

Я бы переформулировал так. Если ок, то прими, плз.

Suggested change

Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойством `break-after`. Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать.

Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойствами `break-after` и `page-break-after`. Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать. Однако, если вы его пишете, используйте оба свойства для улучшения поддержки.

Да, было бы неплохо сказать об обоих в самом начале. Может лучше так? Мы ведь в самом начале говорим «Когда вам нужно управлять», так что вторую часть можно опустить, а в конце чуть упростить.

Suggested change

Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойством `break-after`. Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать.

Когда вам нужно управлять разбиением контента по страницам на печати, воспользуйтесь свойствами `break-after` и `page-break-after`. Пишите их вместе для улучшения поддержки.

css/break-after/index.md

solarrust · 2025-01-07T11:03:13Z

css/break-after/index.md

+- `auto` — стандартное значение, разрыв по страницам будет происходить автоматически
+- `avoid` — позволит избежать разрыва страницы, весь контент блока с этим свойством будет на одной странице
+- `always` — разобьёт текстовый контент по страницам. Но если контент находится в разных колонках, то разрыв будет происходить по тексту, а не по колонке
+- `all` — контент разобьётся по страницам, независимо от контента
+- `avoid-page` — после вашего блока не будет разрыва страницы
+- `page` — после вашего поля будет разрыв на страницы
+- `left` — если следующая страница будет *левой* или на обратной стороне при двусторонней печати, то разрыв состоится
+- `right` — если следующая страница будет *правой* или на лицевой стороне при двусторонней печати, то разрыв состоится
+- `recto` — сделает следующую страницу *правой* (если на языке страницы пишут слева направо, если справа налево — *левой*), для этого между элементами будет вставлено один или два разрыва
+- `verso` — сделает следующую страницу *левой* (если на языке страницы пишут слева направо, если справа налево — *правой*), для этого между элементами будет вставлено один или два разрыва
+- `avoid-column` — следующая колонка (например, для таблиц) не будет перенесена на следующую страницу
+- `column` — следующая колонка (например, для таблиц) будет перенесена на следующую страницу
+- `avoid-region` — после основного поля не будет разрыва страницы
+- `region` — после основного поля будет обязательный разрыва страницы


Suggested change

- `auto` — стандартное значение, разрыв по страницам будет происходить автоматически

- `avoid` — позволит избежать разрыва страницы, весь контент блока с этим свойством будет на одной странице

- `always` — разобьёт текстовый контент по страницам. Но если контент находится в разных колонках, то разрыв будет происходить по тексту, а не по колонке

- `all` — контент разобьётся по страницам, независимо от контента

- `avoid-page` — после вашего блока не будет разрыва страницы

- `page` — после вашего поля будет разрыв на страницы

- `left` — если следующая страница будет *левой* или на обратной стороне при двусторонней печати, то разрыв состоится

- `right` — если следующая страница будет *правой* или на лицевой стороне при двусторонней печати, то разрыв состоится

- `recto` — сделает следующую страницу *правой* (если на языке страницы пишут слева направо, если справа налево — *левой*), для этого между элементами будет вставлено один или два разрыва

- `verso` — сделает следующую страницу *левой* (если на языке страницы пишут слева направо, если справа налево — *правой*), для этого между элементами будет вставлено один или два разрыва

- `avoid-column` — следующая колонка (например, для таблиц) не будет перенесена на следующую страницу

- `column` — следующая колонка (например, для таблиц) будет перенесена на следующую страницу

- `avoid-region` — после основного поля не будет разрыва страницы

- `region` — после основного поля будет обязательный разрыва страницы

- `auto` – значение по умолчанию, разрыв по страницам будет происходить автоматически.

- `avoid` – отменяет разрыва страницы, весь контент блока с этим значением будет на одной странице.

- `always` – разобьёт текстовый контент по страницам. Но если контент находится в разных колонках, то разрыв будет происходить по тексту, а не по колонке.

- `all` – контент разобьётся по страницам, независимо от контента.

- `avoid-page` – после блока не будет разрыва страницы.

- `page` – после поля будет разрыв страницы.

- `left` – если следующая страница будет оборотной при двусторонней печати, то будет задан разрыв страницы.

- `right` – если следующая страница будет лицевой при двусторонней печати, то будет задан разрыв страницы.

- `recto` – сделает следующую страницу лицевой (если на языке страницы пишут слева направо, если справа налево – оборотной), для этого между элементами будет вставлено один или два разрыва.

- `verso` – сделает следующую страницу оборотной (если на языке страницы пишут слева направо, если справа налево – лицевой), для этого между элементами будет вставлено один или два разрыва.

- `avoid-column` – следующая колонка (например, для таблиц) не будет перенесена на следующую страницу.

- `column` – следующая колонка (например, для таблиц) будет перенесена на следующую страницу.

- `avoid-region` – после основного поля не будет разрыва страницы.

- `region` – после основного поля будет обязательный разрыва страницы.

Расставила точки в конце пунктов. Чуть подправила формулировки. Поменяла левые и правые страницы на лицевые и оборотные. Пожалуйста, проверь, что это не меняет смысл высказываний.

Я не очень уверен, что стоит заменять на лицевые и оборотные.

Если язык LTR (как русский), то лицевой является правая (насколько я понял), а оборотной - левая (если держать книгу закрытой, то титульная обложка перед нами, а корешок слева). Если язык RTL (как арабский), то лицевой является правая, а оборотной левая (если держать книгу закрытой, то титульная обложка перед нами, а корешок справа). То есть взгляд на лицо книги другой, для примера возьми в книжком мангу, там традиционно RTL.

С остальными правками я согласен, а вот "левые" и "правые" страницы я бы оставил, потому что это понятнее всего. Одна страница слева, другая справа.

В списке так и не поставили дефисы и точки, поэтому они подняли бунт и пришли ко мне. Кстати, может такой большой список делать через таблицу для читаемости?

css/break-after/index.md

solarrust · 2025-01-07T11:05:11Z

css/break-after/index.md

+
+## Устаревшие свойства
+
+Свойство `page-break-after` является устаревшим и было заменено на `break-after`. Для улучшения поддержки, используйте оба свойства, они почти всегда совпадают. Исключение в примере.


Нужно чуть больше пояснить пример кода

css/break-after/demos/print-me/index.html

Co-authored-by: Alena Batitskaia <[email protected]>

github-actions · 2025-01-07T19:22:23Z

Превью контента из 8c0c2ee опубликовано.

Inventoris

Классно, предлагаю несколько улучшений.

Inventoris · 2025-01-14T12:22:36Z

css/break-after/index.md

+
+## Кратко
+
+Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойством `break-after`.  Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать.


Да, было бы неплохо сказать об обоих в самом начале. Может лучше так? Мы ведь в самом начале говорим «Когда вам нужно управлять», так что вторую часть можно опустить, а в конце чуть упростить.

Suggested change

Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойством `break-after`. Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать.

Когда вам нужно управлять разбиением контента по страницам на печати, воспользуйтесь свойствами `break-after` и `page-break-after`. Пишите их вместе для улучшения поддержки.

Inventoris · 2025-01-14T12:27:04Z

css/break-after/index.md

+- `auto` — стандартное значение, разрыв по страницам будет происходить автоматически
+- `avoid` — позволит избежать разрыва страницы, весь контент блока с этим свойством будет на одной странице
+- `always` — разобьёт текстовый контент по страницам. Но если контент находится в разных колонках, то разрыв будет происходить по тексту, а не по колонке
+- `all` — контент разобьётся по страницам, независимо от контента
+- `avoid-page` — после вашего блока не будет разрыва страницы
+- `page` — после вашего поля будет разрыв на страницы
+- `left` — если следующая страница будет *левой* или на обратной стороне при двусторонней печати, то разрыв состоится
+- `right` — если следующая страница будет *правой* или на лицевой стороне при двусторонней печати, то разрыв состоится
+- `recto` — сделает следующую страницу *правой* (если на языке страницы пишут слева направо, если справа налево — *левой*), для этого между элементами будет вставлено один или два разрыва
+- `verso` — сделает следующую страницу *левой* (если на языке страницы пишут слева направо, если справа налево — *правой*), для этого между элементами будет вставлено один или два разрыва
+- `avoid-column` — следующая колонка (например, для таблиц) не будет перенесена на следующую страницу
+- `column` — следующая колонка (например, для таблиц) будет перенесена на следующую страницу
+- `avoid-region` — после основного поля не будет разрыва страницы
+- `region` — после основного поля будет обязательный разрыва страницы


В списке так и не поставили дефисы и точки, поэтому они подняли бунт и пришли ко мне. Кстати, может такой большой список делать через таблицу для читаемости?

Inventoris · 2025-01-14T12:29:03Z

css/break-after/index.md

+
+## Устаревшие свойства
+
+Свойство `page-break-after` является устаревшим и было заменено на `break-after`. Для улучшения поддержки, используйте оба свойства, они почти всегда совпадают. Исключение в примере.


Давай уберем лишнее?

Suggested change

Свойство `page-break-after` является устаревшим и было заменено на `break-after`. Для улучшения поддержки, используйте оба свойства, они почти всегда совпадают. Исключение в примере.

Свойство `page-break-after` устарело и его заменили на `break-after`. Для улучшения поддержки используйте их вместе, они почти всегда совпадают. Исключение в примере.

Inventoris · 2025-01-14T12:32:27Z

css/break-after/index.md

+
+## Как понять
+
+Чаще всего не требуется принудительно разбивать контент по страницам, чтобы не считать [верхние](/css/orphans/) и [нижние висячие строки](/css/widows/). В этом случае, можно указать «мягкие» переносы контента на следующую страницу при помощи значения `page`.


Suggested change

Чаще всего не требуется принудительно разбивать контент по страницам, чтобы не считать [верхние](/css/orphans/) и [нижние висячие строки](/css/widows/). В этом случае, можно указать «мягкие» переносы контента на следующую страницу при помощи значения `page`.

Чаще всего не требуется принудительно разбивать контент по страницам, чтобы не считать [верхние](/css/orphans/) и [нижние висячие строки](/css/widows/). В этом случае можно указать «мягкие» переносы контента на следующую страницу при помощи значения `page`.

Inventoris · 2025-01-14T12:36:47Z

css/break-after/index.md

+
+При помощи свойств `break-after` и `page-break-after` со значением `avoid-column` удобно работать с таблицами, чтобы на печати одна из колонок не оказалась не на той странице.
+
+Так же, если дизайнер хочет превратить распечатанный сайт в книгу с разворотами, можно управлять контентом и таким образом. Убедитесь, что страница или контентный блок имеет правильное значение атрибута [lang](/html/global-attrs/#lang).


Я чуть запутался тут, каким «таким образом»? 🤔

Suggested change

Так же, если дизайнер хочет превратить распечатанный сайт в книгу с разворотами, можно управлять контентом и таким образом. Убедитесь, что страница или контентный блок имеет правильное значение атрибута [lang](/html/global-attrs/#lang).

Также, если дизайнер хочет превратить распечатанный сайт в книгу с разворотами, можно управлять контентом и таким образом. Убедитесь, что страница или контентный блок имеет правильное значение атрибута [lang](/html/global-attrs/#lang).

Inventoris · 2025-01-14T12:37:53Z

css/break-after/demos/print-me/index.html

+    function makeUnDecorated() {
+      allConfigBtns.forEach(item => {
+        item.classList.remove('active')
+      });


Suggested change

});

})

Добавляет статью про break-after

98f9771

furtivite requested review from skorobaeus, solarrust and Inventoris as code owners January 2, 2025 15:24

furtivite self-assigned this Jan 2, 2025

github-actions bot added css Контент по CSS дока Справочный материал labels Jan 2, 2025

solarrust changed the title ~~Добавляет статью про break-after и page-break-after~~ Добавляет статью про break-after и page-break-after Jan 7, 2025

solarrust reviewed Jan 7, 2025

View reviewed changes

Добавляет правки по ревью от @solarrust

8c0c2ee

Co-authored-by: Alena Batitskaia <[email protected]>

Inventoris reviewed Jan 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Добавляет статью про `break-after` и `page-break-after` #5622

Добавляет статью про `break-after` и `page-break-after` #5622

furtivite commented Jan 2, 2025 •

edited by solarrust

Loading

solarrust left a comment

solarrust Jan 7, 2025

solarrust Jan 7, 2025

furtivite Jan 7, 2025

Inventoris Jan 14, 2025

solarrust Jan 7, 2025

furtivite Jan 7, 2025

Inventoris Jan 14, 2025

solarrust Jan 7, 2025

github-actions bot commented Jan 7, 2025

Inventoris left a comment

Inventoris Jan 14, 2025

Inventoris Jan 14, 2025

Inventoris Jan 14, 2025

Inventoris Jan 14, 2025

Inventoris Jan 14, 2025

Inventoris Jan 14, 2025


		## Кратко

		Когда вам нужно управлять разбиением контента по страницам на печати, стоит воспользоваться свойством `break-after`. Свойство не является обязательным, поэтому, если управлять контентом не требуется, его можно не писать.


		## Устаревшие свойства

		Свойство `page-break-after` является устаревшим и было заменено на `break-after`. Для улучшения поддержки, используйте оба свойства, они почти всегда совпадают. Исключение в примере.

	Свойство `page-break-after` является устаревшим и было заменено на `break-after`. Для улучшения поддержки, используйте оба свойства, они почти всегда совпадают. Исключение в примере.
	Свойство `page-break-after` устарело и его заменили на `break-after`. Для улучшения поддержки используйте их вместе, они почти всегда совпадают. Исключение в примере.


		## Как понять

		Чаще всего не требуется принудительно разбивать контент по страницам, чтобы не считать [верхние](/css/orphans/) и [нижние висячие строки](/css/widows/). В этом случае, можно указать «мягкие» переносы контента на следующую страницу при помощи значения `page`.


		При помощи свойств `break-after` и `page-break-after` со значением `avoid-column` удобно работать с таблицами, чтобы на печати одна из колонок не оказалась не на той странице.

		Так же, если дизайнер хочет превратить распечатанный сайт в книгу с разворотами, можно управлять контентом и таким образом. Убедитесь, что страница или контентный блок имеет правильное значение атрибута [lang](/html/global-attrs/#lang).

Добавляет статью про break-after и page-break-after #5622

Are you sure you want to change the base?

Добавляет статью про break-after и page-break-after #5622

Conversation

furtivite commented Jan 2, 2025 • edited by solarrust Loading

Описание

Чек-лист

solarrust left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 7, 2025

Inventoris left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Добавляет статью про `break-after` и `page-break-after` #5622

Добавляет статью про `break-after` и `page-break-after` #5622

furtivite commented Jan 2, 2025 •

edited by solarrust

Loading