Chrome Print Styles – vertical space weirdness bugs

I recently worked on a fairly elaborate print stylesheet. Printing from the chrome browser had some patches of vertical white space not seen with other browsers. The way I tested (from a mac, windows is almost the same) was to

  • go to web page
  • top menu > print
  • either print (without changing defaults)
  • or PDF > save as PDF – I found that actually printing and saving as PDF following this method yielded identical pages. I only tested on one printer.)

This post had some suggestions that helped.

The things that helped the most were

Remove (display: none) :before and :afters. These showed up when printing from Chrome but not from other browsers. These pseudo elements (:before, ::before, :after, ::after) were taking up space. These are often used in popular frameworks such as bootstrap for clearfixes.

The other advice that helped a lot was to look at other media queries. I was looking at my browser window at normal width but the print styles were using extra small screen size rules. Other browsers were not printing with extra small screen rules. Once I made my browser skinny I could see where many of the problems were. By the way, chrome and other browsers’ developer tools have settings for inspecting for print styles.

Web Colors and Icons Explained

I am frequently asked to explain my job as a professional Front-End Software Engineer/UI/UX Developer/Designer. If my listeners are still with me and are extremely polite, they request “Everything You Always Wanted to Know About Web Design (But Were Afraid to Ask Because it Might Be Boring) [the Mobile Edition, in 2 minutes or less].” Below is a distillation of two crucial topics, Colors and Icons.


Have you ever wondered why so many websites use the same colors? The consortium for web standards Colors Committee defines acceptable colors by working closely with browser makers, popular frameworks, and sports drink manufacturers. Just like other technologies and fashions, a color can get discontinued and become unsupported. Once that happens, the color becomes invisible in all browsers.

It’s important to please everyone. One user abhors amber; another loathes lilac. This brings most sites quite logically to the mathematical middle-of-the-road. At Yodlr we engineered the background color to appear Gray within the USA but Grey elsewhere.

I used the colors and shapes of Yodlr’s existing logo as a base. I was able to convince management to shell out the extra money needed for purple, a particularly expensive license because it uses both red and blue and is associated with royalty.


Creating icons for uncommon buttons is difficult. At Yodlr we needed new icons to show when participants were viewing a presentation and for our “Raise your Hand” feature. Some of the more challenging icons I have created in the past were for “Deodorant”, “Existentialism”, “Hot Pastrami” and “Cold Pastrami”.

A common but little talked about problem with shapes and icons is the dreaded “It Reminds Me Of”, or its acronym IRMO, which I just made up. IRMO occurs when you show someone your work and they say

“It reminds me of

  • a skunk,”
  • “our competitor’s logo,” or
  • an icon already in use that means something completely different.

You can’t argue with IRMO. (No, it looks nothing like a chandelier!) Sometimes you’re looking at your work and realize it resembles private body part/s. Experts agree that Body-part IRMO is more widely-spread than previously thought but generally goes unreported because of the stigma. If you experience Body-part IRMO, experts advise, hide your work and go back to the drawing board.