printing part of a page using css
This page is mainly about printing_part_of_a_page_using_css
2. If there isn't a specific block which contains the content you would like to print, then you might have to edit the HTML to add it in.
3. Make sure the block has an ID associated with it. This will make sure that only this portion of the page prints.
4. Select the block and press the '+' button in the style editor to add a custom rule for that element in the inspector stylesheet
5. Add the following CSS rules
@media print{
*{
visibility:hidden;
}
#id-to-print {
visibility:visible;
position: absolute;
left: 0;
top: 0;
}
#id-to-print *{
visibility: visible !important;
}
}
You can force the page to render in print layout by choosing...
'Emulate css media type > print'
...from dev tools menu > more tools
Last modified: May 8th, 2024