I'm looking to control how something appears when printed from the browser to a 2.4"x4" label.
Currently, when I use a word processing application like Pages (Apple's version of Microsoft Word), I can set my document size to 2.4" x 4" and hit print and I know all of the content will fit on the label. I'm trying to achieve the same thing but in the browser.
I don't know for sure, but I'm thinking when I print from the browser currently it is including a lot of the white space, and trying to scale it all to fit on the label, which distorts the content.
I'm fairly new to front end web development, so I'm looking for some guidance on how to approach defining a printable area. I'd rather it all happen inside the browser, but I considered maybe having the site generate a PDF of the correct dimensions as I think that'll handle printing similarly to Pages.
Hope this makes sense!
While there are styling capabilities that cater to paged formatting, the web is built around continuous (paged-less) documents. Because of this, paged formatting is troublesome. For example, specifying the document page dimensions from the document isn't something you can do. Instead, the printer dialog provides a choice of page sizes and the rendering engine tries to fit your content into pages of that size.
CSS has a module for paged media which includes: page-break-after, page-break-before, and page-break-inside for telling the engine how block elements should break across pages; @page sections for specifying CSS that applies only to paged environments; and :blank, :first, :left, and :right psuedo-elements for creating rules tied to certain pages.