Printing with CSS across different browsers

It's turning out to be more challenging than I expected.

I'm working on a web application that needs to print some pages on A4 paper. These pages are specifically formatted for printing and not for display in the app. This means I don't have to create different CSS styles for various media types, like color schemes or layouts. All I need is one CSS style for printing purposes.

The core CSS framework I'm using is Bootstrap V3, but I've removed all of its print-specific rules. I also have a secondary CSS file to override some Bootstrap styles, and that's it.

However, I'm facing an issue:

  • When viewing the page on Chrome and Safari, they look identical;
  • But when printed, the results are drastically different, particularly in font size with Safari displaying much smaller text.

Can anyone provide guidance on ensuring consistency between the two browsers' print output?

htmlcsstwitter-bootstrap

Answer №1

Many debugging tools offer the option to debug in a specific media type. For example, when working with print styles, you can configure the debugger to use CSS media = print to easily adjust the styles as needed.

In the past, I encountered similar issues with certain dt tables and successfully resolved them by incorporating additional CSS resets into my print stylesheet.

It seems like defining the font and font-size explicitly in your print CSS could be a potential solution. 

@media print {
    html, body {
       font: Arial;
       font-size: 12px;
    }
}

Without more details from your end, it's challenging for me to provide further recommendations, but this is a good starting point.

Answer №2

When conducting tests using both Chrome and Safari, it is important to verify whether the same printing engine is being utilized for preview. This is due to the fact that Chrome has a built-in print engine which can result in errors. To prevent this issue, consider using the CTRL+SHIFT+P shortcut instead. I experienced numerous issues with Chrome's built-in print engine.

Answer №3

When opting for a font-size in points for printing purposes, you are more likely to achieve a consistent outcome. Pixels, on the other hand, are better suited for screens. Points serve as a print unit of measurement...consider using font-size: 12pt;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My DIV elements are not responding to the widths I set for them. What could be the issue?

Recently, I've been delving into the world of Flex to experiment with some unique layouts. However, I encountered an issue where my divs were not recognizing widths as expected. I attempted to set the first div of each row to 5% width so they would ...

htmlcssflexbox

Converting CSS into jQuery

I am exploring ways to create a collapsible section with arrow icons (right and down arrows) in jQuery or JavaScript. Can anyone provide guidance on how to convert my CSS styling into jQuery code? Below is the jQuery approach I have attempted: $(document ...

javascriptjqueryhtmlcss

What is the best way to blur the background image without impacting the content displayed on top?

Is there a way to blur the background image without affecting the content above it? I'm having trouble achieving this as blurring the parent element also blurs the content. Any suggestions on how to fix this issue? I've tried a few steps but none ...

htmlcssbootstrap-4

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Currently, I am attempting to utilize Angular in order to retrieve data from a link upon clicking a button. As a newcomer to Angular with only 2 days experience, my knowledge is quite limited. What I aim to achieve is triggering the loading of JSON data w ...

htmlangulartypescript

What method can be used to obtain a parallel vector on a plane that has been struck by an intersecting ray?

Issue at hand: https://i.sstatic.net/H5g5M.jpg Given parameters: intersect, n, p. With p representing a random point in the space, and N as the normal of the plane. Desired result: w Approach attempted in my shader code: "vec3 n = normalize(faceNormal ...

htmlmaththree.jswebglshader

Specific phrase enclosed within div element

How can I concatenate three strings together when one of them is enclosed within a strong tag? The result is not what I expected. Can you identify the issue here? Result: There is no Colors for <strong>blah</strong> in the database. Expecte ...

javascripthtmlreactjs

Activate text-entry fields after a button has been pressed on polymer 1.0

I am currently developing a project focused on creating a list of doctors using the Polymer 1.0 framework. Within the doctor-list, I have integrated a Vaadin grid called doctors-grid.html to display data sourced from a JSON file. Upon double-clicking on a ...

javascripthtmljsonpolymer

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

Creating an email in Gmail with a pre-filled HTML body

Currently, I am developing a Django web application and seeking a way to enable my app to send emails via Gmail. I have explored creating a hyperlink that opens the compose window in Gmail, as well as prepopulating fields such as "to," "cc," "bcc," and bod ...

pythonhtmldjangogmailhtml-email

Tips on concealing and deactivating the fullscreen option in flowplayer

Could someone please assist me in resolving this issue? I've been attempting to hide the fullscreen button from the flowplayer, but so far, I haven't found a solution. Below is my JavaScript code: <script> $f("player", "flowplayer/flowpla ...

javascripthtmlflowplayer

Struggling to retrieve CSS property from a child element?

Check out this HTML snippet: <div id="ctr" class="faden-slider-container"> <div class="conteneur-image" ></div> <div class="conteneur-image" ></div> <div class="conteneur-image" ></div> </div> ...

javascriptangularjshtml

Create original identifiers for dynamically generated material

I have developed a custom invoice tool that has the capability to dynamically add rows. Here is the code snippet responsible for generating new rows: $("#addrow").click(function(){ $(".item-row:last").after('<tr class="item-row"><td> ...

javascriptphpjqueryhtmlajax

Modifying an HTML attribute dynamically in D3 by evaluating its existing value

I'm facing a seemingly simple task, but I can't quite crack it. My web page showcases multiple bar graphs, and I'm aiming to create a button that reveals or conceals certain bars. Specifically, when toggled, I want half of the bars to vanish ...

javascripthtmld3.js

Transfer groups between divisions

In my HTML structure, I have two main divs named Group1 and Group2. Each of these group divs contains at least two inner divs, all with the class .grp_item. Currently, the grp_item class is set to display:none, except for one div in each group that has a c ...

javascriptjqueryhtmlswap

accept html elements within a textarea box

I am currently facing an issue with my text editor, TinyMCE, that I use on my website to allow users to input long descriptions. Whenever I attempt to submit the form, I receive an error message: A potentially dangerous Request.Form value was detected fro ...

c#htmlasp.net

What is the best way to combine MVVM, offline storage, and Knockout.js in a project?

Although I have experience with implementing Mvvm using Knockout.js, my goal now is to incorporate this framework with cross-browser support for Firefox and Chrome along with HTML5 offline storage capabilities. Specifically, I am looking to bind HTML obje ...

htmlmvvmknockout.jsoffline-storage

Problem Alert: Click Event Not Functioning on Generated Links

Take a look at these two code snippets. Despite other jQuery functions in the same JS file working fine on the UL element, nothing seems to be happening with these. Is there something obvious that I am missing? <ul id="activityPaganation" class="paga ...

javascriptjqueryhtml

Concealing tooltip when button is clicked using jQuery

I am facing an issue where the tooltip does not hide on button click. Below is the code for the button in question: <button class="btn btn-outline-inverse ajax_addtocart additems ...

javascriptjqueryhtml

Finding the image source of a clicked image

Is it possible to retrieve the image src after clicking on another image? $(document).ready(function() { $('img.getimage').click(function() { alert($(this).attr('src')); }); }); .sinistra { width: 150px; } .getimage { wi ...

jquerycssonclick

Adjusting image size within floating containers

I am working on a design with two floating divs, one on the left and one on the right, both nested within a main div. Each floating div contains an image that needs to be resized to the maximum size possible without differing sizes. This is what I curren ...

cssautoresize