Writing CSS for print
Sometimes, writing CSS is a great way to design something that will exist primarily in print form.
The saying goes "If the only tool you have is a hammer, you will start treating all your problems like a nail.". Maybe I'm guilty. I still think that for a recent project, CSS was just what I needed.
The project involved designing a poster with this layout:
The inner rectangles represent images that all have the same dimensions. The poster was going to be printed in A3 format.
I designed the poster by writing CSS and checked progress against a print preview which was using the A4 default.
The printing company needed a PDF version of the poster. When it came to saving the PDF in A3 format, the layout got messed up. The design hadn't scaled: the font sizes and spacings were smaller.
px
The layout didn't scale because font sizes and spacings were styled in px.
It's expected that an absolute length unit like the pixel won't scale: when going from A4 to A3, the pixel size of the page (at 72 DPI) increases from 594x840 to 840x1189, so any fixed font size or spacing will be smaller relatively to the page.
em / rem
Using a relative length unit like em or rem solves part of the problem. Once all values use em / rem, the layout can be controlled by setting the font-size on the parent or base html element.
It's an improvement, but isn't perfect, as the font size still needs to be adjusted for each page size (16px for A3, 11px for A4, 8px for A5, etc.).
vh / vw
The solution came from another group of relative units: vh / vw.
- 1vh = 1% of the viewport height
- 1vw = 1% of the viewport width
Given the project's layout is determined by the columns' width, vw was more appropriate.
Defining the base font-size in vw and all other sizes relatively to it with em / rem just works.
html { font-size: 1.4vw} h1 { font-size: 0.9rem margin: 4rem 0}...
Plot twist
For my project there was no need to save the PDF in another size than the default. Saving the webpage as a PDF with a pixel size of 594x840 (A4), and then printing it on an A3 sheet of paper would not have deteriorated the quality of the print. PDF files have a size in pixels but it turns out that it's misleading to say they have a resolution: any text or vector graphic is rendered at the desired output resolution, and images in a PDF maintain their own resolution.
That said, when saving a PDF in a larger size is required, the above method works.
Nailed it.