Need help with some CSS print and screen

HTML & CSS
1

I am homebrewing a scanner server and have the scanner functioning for scanning. I am now adding a copy function and since it is a page all of its own I want to just put the css in the HEAD section so I can use php variables there more easily. My goal is to copy a document trying to preserve close to the original size.

I am in no way familiar with CSS but the PHP comes easy it seems.

After working Google for a while and doing some extrapolating I have come up with the following:

 <style>
 @media screen
 {
    @page
    {
     width: 80%;
   }
 }
 .image {
     width: 70%;
 }

 @media print
 {
    @page
    {
     size: <?php echo $printsize; ?> <?php echo $orientation; ?>;
     margin: <?php echo $marginoverride; ?>;
     padding: <?php echo $padding; ?>;
   }
 }
 .image {
     width: <?php echo $widthinches; ?>;
     height: <?php echo $heightinches; ?>;
    margin: 0;
    padding: 0;
 }
 </style>

if the php seems foreign to you here is the same without the variables

 <style>
 @media screen
 {
    @page
    {
     width: 80%;
   }
 }
 .image {
     width: 70%;
 }

 @media print
 {
    @page
    {
     size: letter portrait;
     margin: 0.5cm;
     padding: 0;
   }
 }
 .image {
     width: 1600;
     height: 1900;
    margin: 0;
    padding: 0;
 }
 </style>

So I have a couple of questions, assuming this is all good…

How do I decorate the image so that the image shows on on screen and the print attributes apply?

SInce I know little of coding CSS I am at a loss.

Also if someone could be so kind as to give me an example of how to hide the “home” or “back” link from printing while showing it on screen too.

Thanks in advance

oops one more question … do the .image parts need to be nested in the screen and print sections?

2

Any css rule that you want to apply to all media can be applied globally by not putting it within a media query.
Use queries to target only specific media types.

/* Global CSS rules here, applies to all media */

@media screen {
    /* Rules for screen only */
}

@media print {
    /* Rules for print only */
}

You can easily hide elements for specific media types with display: none
I don;t see the html, so guessing at class names:-

@media print {
    .home, .back { display: none }
}

Or you may have something more general like a utility class:-

@media print {
    .noprint { display: none }
}

or the elements to hide may have a common parent…

@media print {
    nav { display: none }
}
3 Likes
3

Thanks, but seems beyond me . I guess I need to learn a new language or something . I do not even get the concepts. CSS has always confused me.

is it possible to use the NO PRINT css in the HEAD or must it be in separate CSS? I have read so many conflicting coments on this.

I am going about this a brand new way.

I will be using an existing page for this . I want to hide everything on the page except for the jpg image . I want to calculate the print size in php and pass tghat along to the css and this is why I want it in the head section of the html not in separate css.

So if an image appears in a table and i “display : none” is that inherited by the image inside the table, even if the image has specific print attributes like size?

I keep trying different things nothing seems to work. At opresent I get a blank page printed despite the image having a specific size in the css.

4

You can apply styles to classes in the head if you want.

Yes, the thing to remember about CSS is its Cascading nature where properties are inherited from parent elements.

5

So I did this, I put a hidden iframe on the page. And print from there. The problem is even loading the hidden page diorectly I still can not control the print size. Even loading this page directly causes it to print postage stamp size and ignores margins.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@media screen
{
   @page
   {


    width: 70%;

  }

img {
    max-width: 70%
}
}

@media print
{
   @page
   {
    size: letter portrait; !important;
    margin: 0.5cm  0.5cm  0.5cm  0.5cm !important;
    padding: 0 !important;

    }

   body  
    { 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px !important;
    }

    html
    {
        background-color: #FFFFFF !important;
        margin: 0px !important;  /* this affects the margin on the html before sending to printer */
    }



img {
    width: 7.86cm !important;
    height: 7.66cm !important;
}


}

</style>
</head>
<body>

<img src ='filemanager/userfiles/Scan1523901058.jpg'/>


 <script type="text/javascript">
      window.onload = function() { window.print(); }
 </script>
</body>

</html>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.