When Printed, the Text's Color in the Div Element Alters

I created a div with white text color, and now I'm facing an issue.

By using CSS media queries, I set the text color to be white for printing purposes.

@media print {
     .myid_print_duo_name
     {
         z-index: 2;
         position: absolute;
         left: 0px;
         top: 330px;    
         width: 303px;
         height: 28px;
         line-height: 28px;     
         text-align: center;    
         color: white !important; 
         font-weight: bold;
         font-size: 20px;
         font-family: "Times New Roman";     
     }

 }

Despite setting the color to white, the text appears slightly darker in my print preview.

I initially thought it was fine, but upon printing, the result is noticeably darker. Why is this happening?

htmlcssmedia-queriesmedia

Answer №1

MDN Documentation: By including the following rule, you can override the default printer settings of the user.

@media print {
  .myid_print_duo_name { /* Replace class_name with * to target all elements */
    -webkit-print-color-adjust: exact;
            color-adjust: exact; /* Non-Webkit Browsers */
  }
}

Answer №2

Give this CSS a try, it could potentially be beneficial for your needs.

@media print {
     .custom_print_id_name{ -webkit-print-color-adjust: exact; color:#fff !important;}
}

Answer №3

Certain web browsers come equipped with a unique feature known as print-color-adjust, which can alter the appearance of colors when printing, making some darker and others lighter. To address this issue, consider including the following lines in your CSS:

-webkit-print-color-adjust: exact;
        print-color-adjust: exact;

This valuable tip was sourced from Smashing's official website:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When creating a dynamic page number using JavaScript during a print event, the height of an A4 page is not taken into

While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...

javascripthtmlcssprint-preview

How can I trigger a drop-down menu to appear when an image is clicked on in the exact same location

As part of my website development project, I am working on a page that displays a list of customers in rows. Each customer row includes different fields such as priorities assigned by the MD and CEO. Depending on the priority value, an image is displayed. ...

javascriptasp.nethtmltoggle

Tips for concealing non-selected categories in the product tree when a single category is chosen

When navigating through the shopping cart, users will encounter a product category tree structured as follows: Category1 Subcategory11 Subcategory12 ... Category2 Subcategory21 Subcategory22 ... Category3 Subcategory31 Subcategory32 ... ...

jquerycssasp.net-mvcjquery-uijquery-plugins

What is the best way to smoothly transition in an image that is dynamically set using Angular?

I am using Angular to set a background image for my page, but the current loading behavior is not visually appealing as the image loads from top to bottom. I would like to implement a fade-in effect or load the image from a blurry view to enhance the user ...

javascripthtmlcssangularjs

Tips on applying array values as styles to a div element

I have a list of numbers stored in an array and an equal number of div elements. I need to assign each value from the array to a corresponding div. var xList = [265, 152, 364] var yList = [125, 452, 215] All div elements have the same class name. function ...

javascripthtmlcssarrays

I seem to be having trouble getting my style to work properly with Material UI's makeStyles

I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...

cssbootstrap-4material-uimaterial-table

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

Using AJAX and Perl to dynamically update HTML content

Currently, I am attempting to dynamically update a div on my website using ajax and perl. The current implementation I have sort of works but needs improvement. HTML: <h2 id="cpu">--</h2> JS/ajax call: $.ajax({ type: 'GET&apos ...

javascriptjqueryhtmlajaxperl

Experiencing a problem when attempting to activate the html5 mode feature in AngularJS to eliminate the #

I've been scouring through various sources like stackoverflow and the web, but I haven't found a clear answer to my question. Can someone please help me out? Here's what I'm struggling with: In my AngularJS application, I enabled &apos ...

javascriptangularjshtmltomcat7angular-ui-router

Arrangement of layers while adjusting browser size

As I resize my browser window, the blue buttons shift below the logo on the left, aligning with the text "Welcome Bart" even though they belong to separate layers. I would like the text "Welcome Bart" to also move downwards so that they are not on the same ...

htmlcss

Is there a more efficient approach to styling with CSS?

Here is the CSS I am currently using: .navbar-inverse .nav > li > youtube-dialog > a { color: #999999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); padding: 10px 15px 10px; display: block; text-decoration: none; /*underline*/ } ...

htmlcss

Managing content in two separate divs at the same time using AJAX

I am curious to know how I can achieve a functionality where editing the text field on the left will automatically update the text field on the right. I have a feeling that it involves using AJAX, and I would like to implement it as well. Can anyone guid ...

htmlajaxformsjquery

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

htmlcssfontswebfonts

I am experiencing an issue where the CSS code is not appearing in the Chrome Debugger when I inspect an element

I recently wrote some CSS code to remove default browser styles: /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } ​ /* Remove default padding */ ul[class], ol[class] { padding: 0; } ​ /* Remove default margin */ body, h ...

htmlcss

Is there a way I could customize this design to include buttons that smoothly navigate to the following section?

I'm attempting to create a Web Page that scrolls horizontally. Currently, the template relies on J Query and CSS to manage width but users must still manually drag the scroll bar at the bottom of the page. Is there a way to incorporate arrows or click ...

javascriptjquerycsslayout

Comparing background-color using .css() in jQuery/Js

I've been experimenting with creating angled divs on a webpage, where each basic panel is separated by an angled break. The idea is to have the background-image of one div flow smoothly into the background-color of the next div. Since I couldn't ...

javascriptjqueryhtmlcssregex

Is it Possible for IE9 to Coexist with Rounded Corners and CSS Background Gradients?

Encountering an odd issue in IE9 while attempting to display a background gradient. The approach involves applying multiple classes to a container element. <div class="gradient corners"></div> Here is the CSS being used: .gradient { backgro ...

htmlcssinternet-explorer-9conditional-comments