The goal is to format a long page for printing by inserting page breaks. The obvious choice would be this CSS property. The topic has an example with columns, using some dev tools, e.g. Chrome DevTools, it can be easily converted to page break with two changes:
change break-before property value to “page”
disable property “column-width” for tag “article”
By copying the abovementioned example to the local machine and playing with it a bit I found out that by adding “position: absolute” to the element of interest or adding a parent div with the same property breaks printing.
Then I built a simple example in Bubble, added a couple of elements with IDs to control them in CSS (with a simple HTML Bubble element - the app is on a free plan), printing didn’t work. Quick research with the same DevTools revealed parent elements with “position: absolute” properties. It was “.bubble-r-line .bubble-r-box”. Disabling the property completely broke the whole page and hid almost everything in print preview.
The question is if there’s any way to insert page breaks without ruining everything on the page?
My understanding of the page-break css properties is that they do not work on absolute positioned elements, which is exactly how every buble element is positioned, so that ruins a lot of things.
I’m planning to experiment with a sparate ‘print’ formatted page, when I do all the layout to fit a pinted page, without relying on the CSS rules to do it for me.
Might not be a perfect solution, but I have some confidence it might do just enough
I’ve done some more testing on this one, and having tried different PDFing tools, some work and respect page-break-before/after and others do not. The clincher seems to be the rendering engine.
Select PDF (via the Bubble plugin or just on its own) seems to be the only one that faithfully respects page break and layouts, but only if you use the webkit rendering engine (not webkit2, webkit restricted or Blink)
My guess here is that most rendering is done with webkit2 (webkit restricted) or blink and therefore fails.
As you will not be ale to control the end user’s environment, sending to something like selectPDF for download then printing might be your best bet.
Personally, I have never trusted printing from a browser, so I think most users who see a download PDF option for printing will use that instead of just printing from the browser.
Hi @SJL, thank you for taking time and doing the research and sorry for the delayed reply!
I agree with you about printing directly from the browser, what I actually meant was printing to PDF, but that doesn’t change anything by default, it still doesn’t respect page breaks.
There’re many services like selectPDF, long time ago I used one of these and since then try to avoid them if possible. First of all, it adds a dependency to a 3rd party service, in the case it’s temporary or permanently down the printing feature goes down as well. Second, all info must be publicly accessible because obviously the printing service doesn’t have access to the data. Sometimes (and more often than not) info to be printed contains private information.
The problem in my case is the resulting PDF will contain charts, tables and text blocks, all mixed with different content depending on the current user and while text and tables can be split into several pages, split charts look awful. Also without page breaks it’s impossible to have separate section cover pages.
So this is just an idea maybe it’ll put you on the right path. Im not sure if this will work but would be a place I’d start.
But display the data in a repeating group
have 1 cell, full list.
Include your contents and underneath have a group with a CSS page break html element.
Use conditionals to show it, if it’s visible hide the contents for that cell.
The conditional to show the html element with css page break would be something like, page width is 842 ( which is A4 paper screen height) (may need to do like 825)
That would handle the first page break but you’ll need something for all of the heights, maybe modulo calculation can help you here? For example to do alternating row colors it’s modulo 2 is 1, maybe you can do something similar to calc?
Or go long form and have it display 8421, 8422, 842*3, etc but that would be a long annoying conditional.
This may not work, but it’s an idea. Alternatively you could put a dynamic sized group in there using css that is 842 - current cell height but if that cell is over 842 it wouldn’t fix it. Basically having each cell on its own page.
Thanks for the reply, but I’m not sure this can help, I see two problems:
RGs require one type for the content, I must compose a doc consisting of multiple types including some tables which are RGs themselves.
Many fields are dynamic and pulled from the user’s account, the element height cannot be predicted or adjusted.
I think Bubble in its current state is incapable of providing good printing functionality due to the reasons described in my original post. For a platform that boasts about so many things it shouldn’t be so much complicated and now it’s plainly impossible.
I gave up on the whole print/PDF from browser idea, as it was just not possible to get something that worked. My requrements were a little different, and I’ve settled with docxtoPDF, where I’m filling a template with the text I want and having that PDFed.
It’s a paid plugin, and it’s not particularly cheap (although it is inexpensive), but it does allow much better control of what gets created.
For something like this, however, you will need to convert things like graphs into images before sending them to docxtoPDF, which takes a bit of fiddling with JS - I did this with canvas elements a long time ago, and could dig up the code, but it’s definitely another hurdle to get through.
There’s a great thread! I have been struggling for years to find a solution for page breaks. I’ve tried many plugins and never really found a solid solution.
I’m investigating Integromat at the moment but having trouble connecting and sending over lists of data.
DocxtoPDF looks good, but in a startup world when you have absolutely no money, it’s actually quite expensive. I suppose it all relative.
I did a bit of digging, and it’s been a long time since I worked on the project, so I couldn’t find anything converting canvas elements to images, but I did find something for base64 images.
This was for a Drupal project, so it won’t be 1 for 1:
function myfunction_save_as_image_callback (){
global $user;
if($_POST['imgBase64'] != NULL) :
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
//saving with user name and id in the file name
$fileName = $user->name . '-' . $user->uid . '-myimage.png';
file_put_contents( 'public://pictures/' . $fileName, $fileData);
else:
drupal_goto('');
endif;
drupal_exit();
}
I will be looking at implementing it for canvas elements in my current bubble site, but it might be a while off.
If you can’t wait, there are a few solutions on the web and they’re fairly similar, so I have faith should work reasonably well.
