Include way to test print styling (in Responsive Design Mode)
Categories
(DevTools :: Responsive Design Mode, enhancement, P5)
Tracking
(Not tracked)
People
(Reporter: martijn.personal+bugzilla, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:69.0) Gecko/20100101 Firefox/69.0
Steps to reproduce:
Design well functioning print stylesheets where concepts like columns and page breaks are very important. Then trying to get a browser to tell me what the final product will look like.
Actual results:
There is no way for the browser to get me anything close to an accurate picture of what I am designing. Instead I have to (on macOS) File » Print… » PDF » Open PDF in Preview (4 clicks) over and over.
Expected results:
I would like some sort of rendering mode, possibly within Responsive Design Mode, that would let me define a paper size and print margins. I would expect this mode to than remove “screen” media CSS and apply “print”. It should include depiction of page breaks and other print supported styling.
Some use-cases of the top of my head would be: presentational slides, notes meant for index card size printing, one-page documents such as invoices and booking confirmations.
We see HTML being used for these things, and it would be amazing if developers were given an easier time designing their print CSS versions.
|
||
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
Agreed that this would be a useful feature to add to Firefox. There are a few addons at addons.mozilla.org that offer this capability. Here's two:
https://addons.mozilla.org/en-US/firefox/addon/preview-print-button/
https://addons.mozilla.org/en-US/firefox/addon/print-preview-/
|
||
Comment 2•5 years ago
|
||
(In reply to Martijn from comment #0)
I would like some sort of rendering mode, possibly within Responsive Design Mode, that would let me define a paper size and print margins. I would expect this mode to than remove “screen” media CSS and apply “print”. It should include depiction of page breaks and other print supported styling.
As of Firefox 68, there is a print icon in the Rules panel toolbar that toggles print styles for the page. So in combination with RDM, the only way to do this is to have the DevTools toolbox open while in RDM and toggle print styles from there:. See https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#View_media_rules_for_Print
I do agree that it would more convenient to have this same functionality somewhere in RDM though.
Thumbs up here. There currently aren't any browsers with solid print debugging, as it stands Firefox's dev tools toggle is the easiest to access and work with. That said, the hardest element to debug is page breaks and none do that. Any headroads into this space would be very useful.
| Comment hidden (advocacy) |
|
||
Updated•2 years ago
|
| Comment hidden (advocacy) |
Description
•