First letter is always black when printing with MDL from Firefox

Question

I have tables in which I want to represent negative numbers as red text. The problem is that in the print preview the color is not applied to the first letter.

I have CSS rules in a media print block. I have tried to put the number in a span and applied the redText class to both the span and the td itself. I have tried to apply the color to the class element and every subsequent element.

@media print {

  .redText, .redText * {

    color: #f44336 !important;

  }

}

The html is:

<td class="textRight band0Bchange_ue_04 redText">

  <span class="redText">-1,566</span>

</td>

This is the HTML in the regular view where the color is rendered correctly. I am not sure whether is possible to inspect the elements in the print preview.

Edit: The issue is caused by the Material Design library. I have put the relevant html and css into a jsFiddle. This works well. Once I add material.min.css the print breaks with the behaviour as described above.

https://jsfiddle.net/goldrydigital/8fzby8aq/2/

I have added a print preview on the jsfiddle.

https://jsfiddle.net/goldrydigital/8fzby8aq/6/

Here the problem doesn't display. The problem is only visible when I use the actual print function on Firefox.

Answer 1

Please check, may be possible you have written first letter CSS for print or main style sheet.

.redText::first-letter {
    color: #000000;
}

I tried in codepen also it is working fine as you provided the code in question section.

First letter is always black when printing with MDL from Firefox

Sign up