Disappearance of box shadow observed after converting webpage to PDF using shortcut key 'Ctrl + P'

Question

Disappearance of box shadow observed after converting webpage to PDF using shortcut key 'Ctrl + P'

Currently, I am developing a webpage where I have added a box shadow to an element using the following CSS

.pill-shap {
    width: 100%;
    height: 147px;
    border-radius: 100px;
    box-shadow: 0px 5px 5px 1px rgba(49, 49, 49, 0.3);
    display: flex;
    padding: 0;
}

The box shadow appears perfectly on the screen in the browser. However, when attempting to save the webpage as a PDF by pressing Ctrl + P, the box shadow mysteriously vanishes in both the print preview and the final PDF document.

I've experimented with adjusting the box-shadow properties but unfortunately haven't had any success. How can I make sure that the box shadow remains visible in the printed PDF version?

screenshot of boxes in chrome

screenshot of boxes in print view

Any guidance or assistance would be highly appreciated!

Edit: I have verified it's not working in both Chrome and Firefox

html css

Answer 1

Answer №1

Every web browser's printing engine has its unique ways of converting HTML CSS text into PDF vectors. The programmers behind Chromium have dedicated countless hours experimenting with various methods and permutations to achieve the desired results.

While I won't delve into suggesting specific styles, it is worth noting that Chromium's capabilities enable it to generate outputs that may not always align perfectly with PDF standards. Nevertheless, it gets the job done.

https://i.sstatic.net/GP34u77Q.png

Why do some websites disable text shadows when printing? The primary reason is the significant strain it puts on system resources.

A seemingly insignificant 20-byte text without fonts can consume a whopping 3MB of memory during the rendering process.

https://i.sstatic.net/6m6Ee3BM.png

I deliberately adjusted the outer boundary to illustrate why this poses a challenge in PDF production.

To create a shadow effect, multiple images at varying opacities need to be layered to mimic a realistic shadow. While compression can alleviate the issue post-construction, each additional shadow increases memory usage during both writing and reading processes.

You might think this doesn't concern you, but the use of text shadows should be avoided as it adversely affects visually impaired individuals who rely on screen readers. They interpret shadows as multiple overlapping descriptions of the same text.

HHHEEELLLLLLOOOWWW   WWWOOORRRLLLDDD

If you require a box shape with text overlay, opt for a single repeatable image serving as the background. By using the same JPEG image at maximum quality, storage efficiency increases significantly after repeated use.

This amounts to 28.4 KB (29,155 bytes), only slightly larger than an individual image with overlays of translucent colors.

https://i.sstatic.net/LJGNhYdr.png

1 img = 25,947 bytes

https://i.sstatic.net/fSOoUq6t.jpg

https://i.sstatic.net/Jf1tUkJ2.png

Answer 2

Every web browser's printing engine has its unique ways of converting HTML CSS text into PDF vectors. The programmers behind Chromium have dedicated countless hours experimenting with various methods and permutations to achieve the desired results.

While I won't delve into suggesting specific styles, it is worth noting that Chromium's capabilities enable it to generate outputs that may not always align perfectly with PDF standards. Nevertheless, it gets the job done.

https://i.sstatic.net/GP34u77Q.png

Why do some websites disable text shadows when printing? The primary reason is the significant strain it puts on system resources.

A seemingly insignificant 20-byte text without fonts can consume a whopping 3MB of memory during the rendering process.

https://i.sstatic.net/6m6Ee3BM.png

I deliberately adjusted the outer boundary to illustrate why this poses a challenge in PDF production.

To create a shadow effect, multiple images at varying opacities need to be layered to mimic a realistic shadow. While compression can alleviate the issue post-construction, each additional shadow increases memory usage during both writing and reading processes.

You might think this doesn't concern you, but the use of text shadows should be avoided as it adversely affects visually impaired individuals who rely on screen readers. They interpret shadows as multiple overlapping descriptions of the same text.

HHHEEELLLLLLOOOWWW   WWWOOORRRLLLDDD

If you require a box shape with text overlay, opt for a single repeatable image serving as the background. By using the same JPEG image at maximum quality, storage efficiency increases significantly after repeated use.

This amounts to 28.4 KB (29,155 bytes), only slightly larger than an individual image with overlays of translucent colors.

https://i.sstatic.net/LJGNhYdr.png

1 img = 25,947 bytes

https://i.sstatic.net/fSOoUq6t.jpg

https://i.sstatic.net/Jf1tUkJ2.png

Disappearance of box shadow observed after converting webpage to PDF using shortcut key 'Ctrl + P'

Answer №1

Similar questions

Methods for creating overlapping background images in breadcrumbs

`Creating a HTML Table with Checkbox Options and PHP Variables`

In HTML, a text input field can be converted into a multi-line field

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

jQuery slider - display unlimited images

Utilizing HTML5/CSS3: Exploring the Possibility of Using Pseudo Elements to Generate Nested Tags without the Need for Javascript

Tips for ensuring uniform button height across all cards

How can I send data to a Python script from a web application?

The Bootstrap 4 DatePicker is malfunctioning and not functioning properly

Ensure images are aligned horizontally with their captions positioned underneath

Ensuring consistent height for the initial div across separate columns (Bootstrap 4)

I aim to utilize vanilla JavaScript in order to remove the parent element of the button being clicked when the user interacts with it

What is the reason that the larrow image is not set against a yellow background?

Error with Angular: URL return error - The server could not find the requested URL

Tips on extracting values from HTML utilizing a CSS selector in instances where only class and style attributes are present. The class in question is generic and may be utilized elsewhere as well

"Utilize the CSS inheritance feature to inherit properties from parent

Reading custom CSV files in PHP, with separate echoes for specific rows and columns

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

Footer being covered by main content div

Scrolling up with CSS3 news headlines auto feature