Chrome not printing out text shadow @media print

Question

I have just modified some td's in a table because I am using a split colored backgrounds and my problem is that when I use a half white and half brown background, the text is not visible unless I set a text-shadow

enter image description here

This is how it looks when printed out on Safari. As you can see the text has a border shadow. This is all set in my code bellow.

border-radius: 5px;
border:1px;
border-color:#000;
-webkit-text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-webkit-print-color-adjust: exact;
font-family: Arial, Helvetica, sans-serif;
font-size:40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #000;
width: 80px; 
height: 80px;
vertical-align: -52px;
font-weight: bold;
-webkit-print-color-adjust: exact;
}

When I try and print it out on Chrome, All Works the same a safari apart from the text shadow. Should be read mlk.

Has anyone been faced to this problem before?

enter image description here

Community · Accepted Answer · 2017-05-23 10:27:59Z

Try something like this @media Print text-shadow under Chrome. see snippet below.

.shadow {
  border-radius: 5px;
  border: 1px;
  border-color: #000;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  text-align: center;
  border-style: solid;
  padding: 0px;
  color: #fff;
  width: 80px;
  height: 80px;
  vertical-align: -22px;
  font-weight: bold;
  background: linear-gradient(to right, #ffffff 0%,#ffffff 48%,#752201 52%,#752201 100%);
}
/*
     this is the part you are interested in
*/
@media print {
  @media print and (-webkit-min-device-pixel-ratio: 0) {
    .shadow {
      -webkit-filter: drop-shadow(-1px 0 black) drop-shadow(0 1px black) drop-shadow(1px 0 black) drop-shadow(0 -1px black);
    }
  }
  /*
  additional print specific css styling can go  here
  */
}

<div class='shadow'>mlk</div>

Collectives™ on Stack Overflow

Chrome not printing out text shadow @media print

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related