How to avoid page breaks inside content sections in output PDF generated from HTML using Expo.Print api on iOS

Hi! I use Expo.Print to generate PDF from HTML. On Android everything works fine, but on iOS the output PDF has page breaks inside content sections, even that I use

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

or

display: inline-block;

or

display: inline-table;

Does anyone know how to avoid page breaks in output PDF on iOS? What webview engine does Expo use in Print api on iOS?

Here is a snack you can test on iOS test-expo-print - Snack

The result PDF looks like this

Hey @serhiipalash,

I just opened up your Snack to try a couple different ways of fixing it. After deleting the height field in the CSS for .section, it seems to work as it should for iOS.

Let me know if that fixes it for you, as well!

Hi @charliecruzan!
Thank you for trying to fix it, but this template is only for testing the bug and .section block (gray) in it to see that the table is broken in two parts because of not enough space on first page. Of course, when you remove height from .section, table has enough space to fit on first page and there are no page breaks.

In our template we have different content blocks like “images”, “profile info”, “table with statistics” and they all go one after another. The problem is that “images” block has dynamic height and we can’t measure does it make the next block broken or not. So, we need some CSS rules to make each block in content unbreakable. If table is split in two parts with page brake, it should be placed on start of the next page.

On Android everything works as expected with CSS rule break-inside: avoid;, content blocks are not broken. But on iOS I didn’t find how to do the same.

Ohhhh I see what you mean now. Sorry about that, silly misunderstanding on my part. Looking into this and will get back to you!

@serhiipalash, I passed the htmlString (after adding break-inside: avoid; to the table’s CSS) to the markupFormatterIOS parameter instead of to the html parameter, and it worked correctly on iOS.

Not sure why that issue happens in the first place, so thanks for bringing it up and we’ll be looking into it!

@charliecruzan yes, there are no page breaks if you add CSS-rule break-inside: avoid; and do like this

onPress={() => Expo.Print.printAsync({
  markupFormatterIOS: htmlString,
})}
  1. The problem is that you can’t pass custom width and height for page, when you use markupFormatterIOS property instead of html. Page is always in A4 size. This does nothing
onPress={() => Exoo.Print.printAsync({
  markupFormatterIOS: htmlString,
  height: 842,
  width: 595,
})}
  1. Another problem is that you can’t use property markupFormatterIOS in Expo.Print.printToFileAsync method. This makes Expo.Print not fully compatible with other Expo Apis on iOS. In our case we have two connected users, one user creates a pdf-document with his credentials and then sends it to another user email with Expo.MailComposer. We need a file uri of created PDF to attach it to email.

P.S. I think we need an issue in Expo GitHub on this post topic because I created this post in hope that someone already faced this problem and can help me with CSS-rules he used, but now I see that it’s just not possible to resolve this bug at the moment. Should I create an issue or maybe you already have an internal task about this bug in your task tracker?

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.