Problem with save as PDF from a Bootstrap HTML page

[jpbond13]

Hello,

i've used to save as PDF some HTML pages, and from now, the display of the PDF rendering as changed. It was working fine with bootstrap pages, but now, the display is always as "mobile resolution rendering", and not in function of the actual resolution.

See that page for example :

and see what it looks like after a save as PDF :

PDF rendering is now by default as a mobile resolution... not respecting the bootstrap grid...

Tested on Firefox and Chrome browsers and the last Adobe Acrobat 20.0 version

Thanks for your help

[jpbond13]

the only solution i found is to change the HTML code :

if the page has the bootstrap grid code : <div class="col-12 col-md-6">, the grid applied in this new Adode Acrobat version is col-12, like a mobile resolution !!!
So i've changed the HTML code by <div class="col-6"> and it works like it was before...

what a mess...

[ls_rbls]

I think you should be able to work around this if you choose "Save As Other" --->> "Optimized PDF".

You'll notice that the PDF Optimizer settings may default to "Mobile" instead of Acrobat's "Default".

It also has an option to customize these settings manually, such as page in landscape versus portrait

[jpbond13]

Sorry i'm French and i'm not sure i've used the right words for my explaination...

When i convert my web page in a PDF document, i use the print option (CTRL+P for example) and choose the Adobe PDF printer to do it. In that case, i don't have any "save as Other" options, "Optimized PDF", Mobile ou Default choice...
And about lanscape vs portrait, and to be more precise about my usage, i've created a website with an invoice part. The invoice is in HTML, and i convert this HTML page as PDF by this way, because it's easier for me to control web aspect thant PDF rendering directly. Everything was perfectly sized, in portrait format and worked well before the Adobe Acrobat update. That's why i try to understand what king of changes or parametrers i can control to refind my previous rendering after conversion

Best regards

[jpbond13]

there is no issue then ?

[ls_rbls]

I appologize for this late reply.

I try to research more about this but couldn't find any relevant information to your particular inquiry.

However, in terms of rendering HTML to PDF I was able to test this scenario using  "File"--->>>"Create"--->>> "PDF from Web Page" instead.

You may need to get support directly from the creators of Bootstrap as I am not sure if this directly related with Adobe Acrobat.

https://getbootstrap.com/docs/4.0/getting-started/introduction/#reboot

See the section in that link about how to use Reboot to correct inconsistencies among different browsers.

[jpbond13]

However, in terms of rendering HTML to PDF I was able to test this scenario using "File"--->>>"Create"--->>> "PDF from Web Page" instead.

>> i can't find this option in my web brower (Firefox)... What browser do you use ?

[ls_rbls]

This is in Adobe Acrobat Pro DC (paid subscription, full desktop version PDF viewer and editor.)

If you don't have Adobe Acrobat Pro I don't think we can help you in this forum with the Bootstrap program and how it interacts or renders PDFs, specially when it comes to using different web browsers with PDF viewing capabilities. You may have to address this question with their support website.

That said, I don't have Adobe Acrobat 2020. There are some functionalities of Adobe Acrobat Pro DC that doesn't exist in that version.

My best guess would be to open a support ticket with Adobe Customer Care directly or if you suspect this may be a bug (or lack of a feature in your product) then you can use the Feature Request | Bug Report Form 

[jpbond13]

ok i understood. I have Acrobat Pro DC, i tried what you explain, and same problem. I hope a futur update will correct this problem

[ls_rbls]

Hey!

So I did a little more research in the Bootstrap support documentation:

• https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template

I think that you're referring to the cascading style sheets(CSS) and also how the implementation of HTML 5  should be considered with the HTML template that you're currently using.

See this reference taken from the link above:

Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

So, this is what I found:

• Solution #1 - 

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">​

• Solution #2 -

  /* From  https://getbootstrap.com/docs/4.5/getting-started/introduction/
  See this section :
  
  HTML5 doctype
  Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
  */
  
  
  <!doctype html>
  <html lang="en">
    ...
  </html>​

Review the starter template that they provide and how to incorporate JavaScript components.

The information below is also  from their support documentation:

"Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

"

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>