Thanks, Adam and James for your feedback. I want to convert my pdf resume to a "print-friendly" responsive HTML page. The problem with the pdf file is that it downloads first and then loads in the browser which then shows it to the viewer and by that time 2 to 3+ seconds pass away. So having a print-friendly resume as you people have will be good.
There are varying opinions about what exactly constitutes "print-friendly". But this is what I specifically did on mine that I believe helps:
Responsive design is generally a must. Because the whole point of responsive design is to gracefully accommodate varying (and potentially unknown-at-programming-time) viewports. So if you're incorporating responsive design, you're probably already a long way toward having something that's reasonably "print-friendly".
Make minimal use of colors - especially, background colors. They can make things unreadable when you print.
This is even more important for background images.
If you still feel compelled to use various colors and images (really, just... don't), you also need to understand that there is no way to actually control whether the user will actually print those out. That's entirely controlled by the print settings on the client, and you can't force such things into the print view.
Use the CSS page break properties to ensure that there aren't any nasty/unnatural page breaks when you go into print view. Although you can't control the exact dimensions that someone else will use when printing your page, you can get a pretty good view for how most people will see it printed by simply pulling up your own page in print-preview mode.
Use CSS @media to hide items that shouldn't be there in the print view. There can be a lot of detritus on the page that looks fine in the browser, but just doesn't work right in print view. For example, on my page, I have that little text effect that keeps spelling out different titles after my name. But in print view, this just freezes at some point, and that frozen text looks illogical. So I hide that entirely in print view. You can do that like this:
Please help, I also want to make my resume: harshrathod.dev/static/docs/resume... print-friendly. What should I do?
In terms of print-friendliness I would say that it already is. It only uses 1 page and has minimal colour.
Thanks, Adam and James for your feedback. I want to convert my pdf resume to a "print-friendly" responsive HTML page. The problem with the pdf file is that it downloads first and then loads in the browser which then shows it to the viewer and by that time 2 to 3+ seconds pass away. So having a print-friendly resume as you people have will be good.
There are varying opinions about what exactly constitutes "print-friendly". But this is what I specifically did on mine that I believe helps:
@media
to hide items that shouldn't be there in the print view. There can be a lot of detritus on the page that looks fine in the browser, but just doesn't work right in print view. For example, on my page, I have that little text effect that keeps spelling out different titles after my name. But in print view, this just freezes at some point, and that frozen text looks illogical. So I hide that entirely in print view. You can do that like this:Then, whenever you want something to be hidden in the print view, you just add the
hidden-print
class to the element.I don't think this is an exhaustive list, but these things go a long way toward making your content "print-friendly".