`page-break-after: избежать`, когда разрыв происходит на полях - PullRequest
Новая
       4

`page-break-after: избежать`, когда разрыв происходит на полях

1 голос
/ 20 июня 2019

При печати из Chrome я бы хотел избежать разрыва страницы между заголовком и следующим абзацем.

Я достиг этого для большинства документов с: 

h1 {
   page-break-inside: avoid;
   page-break-after: avoid;
}

... и это перемещает кучу разрывов страниц, заставляя разрыв произойти перед заголовком, когда это необходимо.

Однако, похоже, что это не работает, когда разрыв происходит в пределах поля заголовка.

Я могу воспроизвести так: 

<html>
   <head>
     <style>
         h1 {
           border-style: solid;
           margin: 30px;
           page-break-inside: avoid;
           page-break-after: avoid;
         }
         p {
           background-color: grey;
         }
     </style>
   </head>
   <body>
     <h1>Lorem ipsum dolor sit amet</h1>
     <p>... consectetur adipiscing elit (etc)...</p>
     (Repeat to fill a page)
</html>

... сокращать / удлинять текст абзаца, пока print-preview не покажет нежелательный разрыв страницы:

screenshot of unwanted page break

Спецификация CSS говорит, что этого не должно происходить:

В обычном режиме разрывы страниц могут происходить в следующих местах:

1) В вертикальном поле между блоками уровня блока. Когда не принужден здесь происходит разрыв страницы, используются значения соответствующих 'margin-top' и свойства 'margin-bottom' установлены в '0'. Когда принудительная страница Здесь происходит перерыв, используется значение соответствующего 'margin-bottom' свойство установлено в '0'; соответствующее используемое значение 'margin-top' может либо устанавливается на «0», либо сохраняется.

...

  • Правило A: Разрыв в (1) разрешен только в том случае, если «разрыв страницы» и свойства page-break-before всех элементов, генерирующих блоки что встречаются на этом поле позволяют это, когда хотя бы один из них имеет значение «всегда», «влево» или «вправо», или когда все они 'Авто'.

Это работает как надо? Или ошибка в CSS Chrome? Или недоразумение с моей стороны?

Можно ли как-то обойти это?

1 Ответ

0 голосов
/ 25 июня 2019

Первое (простое и безопасное) решение: Добавьте элемент section / div вокруг h1 и первого абзаца и установите для него значение page-break-inside: avoid. Например: 

    <body>
       <div class="headline">
          <h1>A sample title</h1>
          <p>First paragraph bla bla blac....</p>
       </div>
       <p>Second paragraph...</p>
    </body>

с CSS: 

    .headline {
        page-break-inside: avoid;
    }

Второе решение: с небольшим изменением HTML и семантики section может сделать что-то вроде: 

  <body>
    <div class="page">
      <section>
        <h1>
          A Simple Title
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        ...
        <h1>Second title</h1>
        <p>Lorem....</p>
    </section>
  </body>

С помощью CSS: 

body {
  font: sans-serif;
}
.page {
  padding: 1em;
}
section {
  page-break-before: always;
}
section > p + h1 {
  page-break-before: always;
  page-break-after: avoid;
}
section > h1* + p {
  page-break-before: avoid;
}

Вы можете увидеть пример здесь: https://codesandbox.io/s/test-print-avoid-page-break-after-title-l4kbq

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...