DEV Community


Discussion on: Rejected by Facebook

bytebodger profile image
Adam Nathaniel Davis Author • Edited

There are varying opinions about what exactly constitutes "print-friendly". But this is what I specifically did on mine that I believe helps:

  1. 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".
  2. Make minimal use of colors - especially, background colors. They can make things unreadable when you print.
  3. This is even more important for background images.
  4. 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.
  5. 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.
  6. 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:
@media print {
    .hidden-print {
        display: none !important;
Enter fullscreen mode Exit fullscreen mode

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".

Forem Open with the Forem app