1

I am currently working on my resume and trying to have some neat looking circles on it made up of lines.

So I used a repeating-linear gradient, and it works, like it shows up on the browser and on the print screen when you hit CTRL + P, but when you actually save it as a PDF the circle doesn't appear in the PDF file.

I've tried this on Google Chrome, Firefox, Microsoft Edge, and none of these browsers work.

I'm just wondering if maybe there is something I'm doing wrong or if there is a work around to this.

Below is how I set up an example for you to test out, I just made a div in HTML and applied some classes to it in CSS. Try it for yourself, see if you can get the circle made of lines to save to a PDF. I'd appreciate any help in figuring this out.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Striped Circle</title>

        <style>
            .circle {
                position: absolute;
                width: 300px;
                height: 300px;
                border-radius: 50%;
            }

            .circle-1 { /* Top Left */
                background-color: transparent;
                background-image: repeating-linear-gradient(135deg,
                #333 0 4px, /* [color] [start-point] [end-point] */
                transparent 4px 10px);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="circle circle-1"></div>
    </body>
</html>
Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
Andrew V
  • 11
  • 3

1 Answers1

0

Whether or not backgrounds are to be printed is an option in the browser.

When you have selected Print and Save to PDF, select more settings and select the background graphics. You should then see the striped circle OK.

enter image description here

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Yea I tried that, I made sure the "Background Graphics" was checked, and the striped circle does appear on my print screen, but when I save as a PDF file, the striped circles are mysteriously gone. I'm not sure if it's a PDF rendering problem or what but none of the modern browsers seem to like repeating linear gradient lol – Andrew V Feb 28 '21 at 04:10
  • It saved to pdf from the print screen ok for me. What browser/OS are you on? – A Haworth Feb 28 '21 at 06:31
  • I'm on Windows 10, using Google Chrome as my main browser, and Adobe Acrobat DC as my PDF software. I've discovered that if I scan and use OCR to make the PDF word searchable the circles will appear but any modification made in the file and they disappear again. Or not even that, if I just close the PDF and re-open it without making any changes the circles go invisible again. But it works just fine if opened in a browser, just looks kinda wonky in my PDF software haha – Andrew V Feb 28 '21 at 15:45
  • I'm also in Windows 10, Chrome. Using Adobe Acrobat Reader DC (free version) and I'm seeing the stripes OK after I've saved to PDF file via Chrome Print so it does seem as you say as if it's the version of Acrobat you have which is objecting to the stripes, or to Chrome's pdf format. – A Haworth Feb 28 '21 at 16:10