RealObjects Support

The Bootstrap style sheets contain specific styles for print output. Since PDFreactor produces paged output (such as PDFs), it evaluates styles inside the "@media print {...}" rules not not inside "@media screen {...}" rules. Since CSS frameworks like Bootstrap heavily focus on browser output, the styles might not always look as expected in print or PDF.

We have observed that Bootstrap's print styles for example disable the styling of links and append the link’s URL to the link text. This is a consequence of PDFreactor evaluating these print styles, where browsers do not.

Furthermore, Bootstrap usually contains responsive styles. This means that different styles are applied depending on the viewport width. For an A4 page, PDFreactor’s viewport is only about 794px wide according to the CSS standard resolution. In Bootstrap, such a small viewport is usually associated with a mobile device and it will use appropriate styles, such as converting columns to full width.

To get output similar to a browser’s, it is best to override the "width" media feature value of PDFreactor so that it applies the same styles as the browser. This can be done with the "mediaFeatureValues" configuration property like this:

config.setMediaFeatureValues(
    new MediaFeatureValue()
        .setMediaFeature(MediaFeature.WIDTH)
        .setValue("2480px")
);