2

I'm trying to set up online invitations. One of the means of sending said invitations is by print. Unfortunately, though I have the invitations looking like I want on the web page, when I go to print, the result is quite different. Here is a sample set of invitations. The invitations are placed on a 2x2 grid, with the text overlaid in HTML and placed at certain percentages from the top and left of the images. When I go to print, there are three things that don't come out right. In order of weirdness:

  1. The text color is different. To be specific, it's always black, no matter what color is specified in CSS.
  2. The text overflows the image, even though there's some JavaScript that's supposed to adjust the text size to fit the image.
  3. The invitations do not appear on a 2x2 grid.

Some notes about the CSS: all rules are applied within an @media all block, and there is an @page {size: landscape} block to make the page print in landscape, as suggested here. Bootstrap is being used; I can dispense with it if needed. HTML and body are tags are set to height and with 100%.

Community
  • 1
  • 1
Ashley Strout
  • 6,107
  • 5
  • 25
  • 45
  • You are going to need to use @media print {} and add a whole bunch of CSS to get it to look the same. https://www.tutorialspoint.com/css/css_printing.htm – sn3ll Mar 23 '17 at 20:58

1 Answers1

1

If you're just printing directly from your browser, you may need a print stylesheet. There's a large difference between CSS for the Web, and CSS for print.

I found the following SmashingMagazine link to be really helpful in explaining the difference and getting started with a Style sheet for printing: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

I don't think your custom javascript for adjusting the text-size will run when you go to print, so you may need to make that modification in your print stylesheet too.

FiddlyDigital
  • 31
  • 4