Here is a snippet of code
<div class="row">
<div class="col-sm-12 visible-print">
Content (display in full width when printed)
</div>
<div class="col-sm-6 hidden-print">
Content (same as above but only half width when viewed on screen)
</div>
<div class="col-sm-6 hidden-print">
Other content (not meant for printing)
</div>
</div>
I am seeking a function that can determine if the page is being printed or viewed on screen, in order to make styling decisions. The code provided is intended as Pseudocode.
<div class="row">
<div class="{{inPrintMode() ? 'col-sm-12' : 'col-sm-6'}}">
Content (full width for print, half width for screen)
</div>
<div class="col-sm-6 hidden-print">
Other content (not to be printed)
</div>
</div>
Is there a function available for this purpose? I am using bootstrap and Angular
Clarification: I want to style the page differently based on whether it's viewed on a screen or printed on paper. I apply class="visible-print" to elements meant for print only, and class="hidden-print" to elements meant for the screen only. Elements without these classes are displayed on both paper and screen.
I am looking for guidance on how to develop a function, like 'inPrintMode()' in this example, that detects whether the user is viewing the page on screen or printing it, returning a boolean value.
For more information on visible-print and hidden-print, please refer to: Hide a div in a page and make it visible only on print bootstrap 3 MVC 5
Thank you in advance for any assistance.