Currently, I am working on setting up online invitations and one of the options for sending them out is through print. However, despite having the invitations perfectly designed on the web page, the outcome after printing is not what I expected. You can view a sample set of invitations here. The invitations are arranged in a 2x2 grid format with text overlaid using HTML at specific percentages from the top and left of the images. Unfortunately, there are three main issues that arise when attempting to print:
- The text color appears different during printing, always turning out black regardless of the specified CSS color.
- Text overflows from the image, even though there should be JavaScript adjusting the text size to fit within the image boundaries.
- The invitations do not display on a 2x2 grid format as intended.
Some important details about the CSS setup: all styling rules are applied within an @media all block and there is an extra @page {size: landscape} block included to ensure the page prints in landscape mode as suggested in this resource. Bootstrap framework is being utilized; however, it can be removed if necessary. Both the HTML and body tags are set to a height and width of 100%.