How to reduce the font size when printing

[damithc]

Looks like MarkBind V4 has a bigger default font size for printing. Is there a way to adjust the main.css to reduce the font size when printing?

MarkBind V3:

MarkBind V4:

[tlylt]

For normal body text, doing something like this should work (adjust 0.9rem to any other desired value) to apply the change when print:

@media print {
    body {
        font-size: 0.9rem;  /* Reduce font size when printing */
    }
}

[damithc]

Nice, managed to reduce size of body and headings using that technique. Thanks @tlylt
Any idea how to do the same for images? Otherwise images look too big compared to the text. transform: scale(0.7) makes the image smaller but it still takes the same screen area as the original image.

[tlylt]

Any idea how to do the same for images? Otherwise images look too big compared to the text. transform: scale(0.7) makes the image smaller but it still takes the same screen area as the original image.

If the images already have a defined width, the CSS zoom property could be used to make the images smaller and re-adjust the layout

zoom and scale work differently:
with zoom, the area allocated decreases by the zoom value,
with scale, the area allocated does not change.

So can try something like:

@media print {
   img {
       zoom: 0.8;  /* Reduce image size when printing */
   }
}

The caveat is that zoom is not supported on all browsers, in particular not available on firefox.

See example:
originally the images defined with width=700px (e.g. I have 3 images, 2 with <pic src="static/bookmark.jpg" width="700px"/>, while the last one does not have width: <pic src="static/bookmark.jpg" />) were stacked on top of each other. When the image is zoomed to 0.5 and opened in printing mode, the second image flows up to fill the spot.

[damithc]

The zoom trick worked for my use case. Thanks again @tlylt