CODEWITHSUNDEEP
htmlcssgoogle-chromeprinting
Nazar Vynnytskyi
Nazar Vynnytskyi

Reputation: 4737

@media Print text-shadow under Chrome

When I add the css rule "text-shadow" for text it does not shown in @media print (save as PDF) and it does not work specially under Chrome.

It works excellent under IE11 but under Chrome - not! It makes me very -very disappointed!

Here is the simple text-shadow example:

.item { text-shadow: 4px 4px 1px #ccc; }

So the question is how to force print "text-shadow" under Chrome? In my case it also should be multiple shadows, something like that:

 .item { text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0px -1px 0 #fff; }

White border around a text.

Upvotes: 2

Views: 1613

Answers (2)

spacorum
spacorum

Reputation: 505

The solution provided by Nazar doesn´t seem to work on Chrome version 51.0.2704.103 m, I´m afraid. I can see the text-shadow using the debug menu "Rendering > Emulate media" and enabling the print mode. But when trying to print (actually saving as PDF) the shadows are not visible anymore. Also, I had to add this to make the text visible in the print preview:

-webkit-transform: translate3d(0,0,0) !important;

Upvotes: 0

Nazar Vynnytskyi
Nazar Vynnytskyi

Reputation: 4737

The solution is -webkit-filter: drop-shadow(4px 4px 1px #ccc).

Here is the example:

@media print {
  /* CSS only for Chrome */
  @media print and (-webkit-min-device-pixel-ratio:0) {
    .item { -webkit-filter: drop-shadow(4px 4px 1px #ccc); }
  }
}

And if you need multiple text-shadows use it:

.item {
  -webkit-filter: drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff);
}

Here is the final CSS:

@media print {
  .item {
    -webkit-filter: drop-shadow(4px 4px 1px #ccc);
    text-shadow: 4px 4px 1px #ccc;
  }
}

Upvotes: 4

Related Questions