htmlcsspdfuiwebviewpage-break-inside

page-break-inside html tag not working

I am building an html webpage in a UIWebView on iOS 11. I print that webpage with UIPrintFormatter and UIPrintPageRenderer (generate PDF).

The tag page-break-inside: avoid; is not honoured and container-row elements still break inside when printing. Breaking does not seem to happen always, most of the times it works fine. I saw the container-row break inside in several places but never within text. Breaking inside seems to happen regardless whether a custom font is used or not.

Is something wrong with how I build the divs and their associated css? How can I prevent the container-row from breaking at all?

whole page: https://jsfiddle.net/2fj13tt7

body:

<body>
  <div class="doc">
    <div class="container-row">
      <div class="date">
        <span>1. July 2017</span>
      </div>
      <div class="container leftSide">
        <div class="item">Item C</div>
        <p>Test 123</p>
      </div>
    </div>
    <div class="container-row">
      <div class="container rightSide">
        <div class="item">Item B</div>
        <p>Some Text</p>
      </div>
    </div>
    <div class="container-row">
      <div class="container rightSide">
        <div class="item">Item A</div>
        <img class="image" src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <!-- plus 100 more "container-row" -->
  </div>
</body>

css:

    @font-face {
      font-family: 'Liberation Sans';
      src: url('LiberationSans-Regular.ttf') format("truetype");
    }
    @font-face {
      font-family: 'LiberationSans-Bold';
      src: url('LiberationSans-Bold.ttf') format("truetype");
    }

    @media print {
      .container-row {
        page-break-inside: avoid;
      }
    }

    body {
      font-family: 'Liberation Sans', sans-serif;
      background-color: transparent;
      margin: 0 !important;
      padding: 0 !important;
    }

    .container-row {
      display: block;
      float: left;
      width: 100%;
      font-family: Liberation Sans, sans-serif;
      font-size: 10px;
    }

    .date {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .date span {
      padding: 5px;
      border-radius: 7px;
    }

    .container {
      max-width: 75%;
      word-wrap: break-word;
      margin: 10px 10px 0px 10px;
      overflow: hidden;
    }

    .leftSide {
      float: left;
      border-top-left-radius: 13px;
      border-top-right-radius: 13px;
      border-bottom-right-radius: 13px;
    }

    .rightSide {
      float: right;
      border-top-left-radius: 13px;
      border-top-right-radius: 13px;
      border-bottom-left-radius: 13px;
    }

    .item {
      font-family: 'LiberationSans-Bold', sans-serif;
      margin: 7px 10px 1px 10px;
    }

    .container p {
      margin-top: 0px;
      margin-left: 10px;
      margin-bottom: 7px;
      margin-right: 10px;
      padding: 0px;
    }

    .image {
      width: 100%;
      margin: 5px 0px -5px;
    }

e.g. enter image description here red part is the bottom of container-row the rest of the container-row is on the previous page.

Solution

  • Solved the problem by adjusting the css as follows:

    .container-row {
  display: inline-block; /* should prevent breaking */
  float: left;
  width: 100%;
  font-family: Liberation Sans, sans-serif;
  font-size: 10px;
}

.container {
  max-width: 75%;
  margin: 10px 10px 0px 10px;
  overflow: hidden;
}

.container p {
  margin-top: 0px;
  margin-left: 10px;
  margin-bottom: 7px;
  margin-right: 10px;
  padding: 0px;
  word-wrap: break-word;
}