Hello, my dears. I have a question. How do I do that so that the text is in the middle and not at the top in the print preview, and I can't even manage the line spacing. Am I doing something wrong or is it something to do with osclass itself?


<style>
             
             @media print {
#print {
    min-height: 10em;
    display: table-cell;
    vertical-align: top;
    position: relative;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
     }
             
          .centered {
  position: relative;
  vertical-align: top;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}
          </style>
         
          <script>
             
        function printDiv(print){
              var restorepage = document.body.innerHTML;
              var printcontent = document.getElementById('print').innerHTML;

              document.body.innerHTML = printcontent;
                 
              window.print();
                 
              document.body.innerHTML = restorepage;

}
</script>
         
          <details>
          <summary><h1></h1></summary><button onclick="printDiv('print')">Print</button><div id='print'>
             
              <p><center><div><h1><?php echo osc_item_category() ; ?></h1></div></center></p>
              <p style="line-height: 150%"><center><div><font size="5" style="display:table-cell; vertical-align:middle; font-weight:bold;"><?php echo osc_item_title(); ?></font></div></center></p>
              <p></p>
              <p class="centered" style="line-height: 150%"><center><div><p><span><font  size="5" style="display:table-cell; vertical-align:middle; font-weight:bold;text-align: end; position: relative;"><?php echo osc_item_formated_price(); ?></font></span></p></div></center>

Easiest way is to use display flex and auto margins. But not sure how much is supported with print.

That does not work. I would like it to be like in the picture. So the text is there in the red area with line spacing.

There are various techniques to centralize content but not going to test it here

Thanks for this information, but how could I implement this using CSS? I've already tried a few things.

Check this:
https://blog.logrocket.com/15-ways-implement-vertical-alignment-css/

Thanks, I'll try it.

I once did it like this, so the line spacing is visible on the website, but not in the print preview.

I don't understand why @media print doesn't include it, maybe I'm missing something.

<style type = "text/css">
 @media print {
  .centre {
    line-height: 5.5em ;
    margin:0 ;
    font-size: 12pt;
  }
}   
          centre {
         
 line-height: 5.5em;
         
}
     
             
          </style> <details>
          <summary><h1></h1></summary><button onclick="printDiv('print')">Print</button><div id='print'>
              <img src="https://haushaltgeraete-chemnitz.com/Sale-banner.png" alt="" width="500" height="600"><br>
              <centre class="centre"><p style=“line-height: 200%“><center><div><h1><?php echo osc_item_category() ; ?></h1></div></center></p></centre>
              <centre class="centre"><p style=“line-height: 200%“><center><div><font size="5"><?php echo osc_item_title(); ?></font></div></center></p></centre><br>
              <p></p><br>
              <centre class="centre"><p style=“line-height: 200%“ ><center><div><p style=“line-height: 200%“><span><font size="5" ><?php echo osc_item_formated_price(); ?></font></span></p></div></center></p></centre><br><?php if( osc_count_item_meta() >= 1 ) { ?>
      <div id="custom_fields">
        <div class="meta_list">
          <?php while ( osc_has_item_meta() ) { ?>
            <?php if(osc_item_meta_slug()!='festpreis') if(osc_item_meta_slug()!='evp') { ?>
              <div class="meta">
                  <strong></strong> <centre class="centre"><p style=“line-height: 200%“><center><span><?php echo osc_item_meta_value(); ?></span></center></p></centre><br>
              </div>
            <?php } ?>
          <?php } ?>
        </div>
      </div>
    <?php } ?>
              </div>
</details>

Media query may not support everything.

Yes, that is possible, what can I do about it? does anyone have an idea?

No plan to invest time in these, pretty sure there are more focused forums on such topic.
Printing is very limitted in these days.

I was able to solve it easily using tables as a distance, it looks very good.
I would like to thank everyone who gave me tips here.

Now my osc_item_meta_value just needs a QR code, but that's another topic.

If you would like to have it for your A4 A4 display, perhaps for your business/store, here is the code.


<style type = "text/css">
 @media print {
  .centre {
    line-height: 9.5em ;
    margin:auto;
    font-size: 12pt;
    content:"10";
  }
}   
          centre {
         
 line-height: 5.5em;
         
}
           
 @page{
    size:5.5in 2in;
    marks:crop;
    bleed:0.125in;
    margin:0.55in;
}           
           
     
             
          </style>
              <script>
             
        function printDiv(print){
              var restorepage = document.body.innerHTML;
              var printcontent = document.getElementById('print').innerHTML;

              document.body.innerHTML = printcontent;
                 
              window.print();
                 
              document.body.innerHTML = restorepage;

}
</script>
          <details>
          <summary><h1></h1></summary><button onclick="printDiv('print')">Print</button><div class="centre" id='print'>
              <img src="https://haushaltgeraete-chemnitz.com/Sale-banner.png" alt="" width="500" height="600"><br>
              <centre class="centre"><p style=“line-height: 200%“><center><div><h1><?php echo osc_item_category() ; ?></h1></div></center></p></centre>
              <table height=50><tbody><tr><td></td></tr></tbody></table>
              <centre class="centre"><p style=“line-height: 200%“><center><div><font size="5"><?php echo osc_item_title(); ?></font></div></center></p></centre><br>
               <table height=20><tbody><tr><td></td></tr></tbody></table>
              <center><p><?php if(function_exists('prt_tag_item')) { prt_tag_item(osc_item_id()); } ?></p></center><br>
              <table height=50><tbody><tr><td></td></tr></tbody></table>
              <centre class="centre"><p style=“line-height: 200%“ ><center><div><p style=“line-height: 200%“><span><font size="8" ><?php echo osc_item_formated_price(); ?></font></span></p></div></center></p></centre>
              <br><table height=100><tbody><tr><td></td></tr></tbody></table>
                  <?php if( osc_count_item_meta() >= 1 ) { ?>
      <div id="custom_fields">
        <div class="meta_list">
          <?php while ( osc_has_item_meta() ) { ?>
            <?php if(osc_item_meta_slug()!='festpreis') if(osc_item_meta_slug()!='evp') { ?>
              <div class="meta">
                  <strong></strong> <table><tbody><tr><td></td></tr></tbody></table><centre class="centre"><p style=“line-height: 200%“><center><span><h1><?php echo osc_item_meta_value(); ?></h1></span></center></p></centre><br>
              </div>
            <?php } ?>
          <?php } ?>
        </div>
      </div>
    <?php } ?>
              </div>
</details>