Some sites manage to disable various printing options (including layout, so you cannot choose between landscape and portrait any more, or force landscape when portrait works better or vice versa).
2. Go into the Stylus extension and click on “Write new style”.
3. Put the following code in:
​​​@page {
 size: auto;
}
4. Give it a name (I called mine “Fix Orientation”) and save it.
5. Reload the page you’re trying to print and the print dialogue should now have the “Layout” option and you should always get it for any page you print from now on.
Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.
I reconfigured the OHRA Mijn Zorg site to force re-enabling of layout by adding @page { size: auto !important; } for https://mijn.ohrazv.nl/ (click the Save button to save this change permanently):
The HTML page is interesting because just a minority of it is HTML. The rest is a truckload of CSS and embedded fonts. It is interesting to see how it was built, as the CSS and HTML is very well structured.
An online tool that reduces HTML to basic tags and attributes. Removes scripts, CSS, and other non-basic elements like , , etc… Also, corrects errors and formats the HTML doc or a fragment.
In my case, I had to scale up (by a 25% so a factor 1.25) instead of scale down.
What I observed so far in recent Chrome versions is:
The wrapping div is still needed, otherwise the outer size and inner size of the frame mismatches
The wrapping div and the wrapped iframe need to have the same dimensions (so unlike the Stack Overflow answers, no need to scale the width/height of the div; keep the same values as the iframe)
The div uses class calendar_wrap.
The iframe uses class calendar_iframe.
This is part of my CSS:
body {
margin: 0; /* override browser setting for body `margin: 8px;` */
overflow: hidden; /* remove scroll bars; does not work for iframes */
}
/* ... */
iframe {
border-width: 0; /* override browser setting for iframe `border-width: 2px; */
height: 100vh;
width: 50vw;
overflow: hidden; /* remove scroll bars; does not work for iframes */
}
/* wrap and iframe zoom as per https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe */
.calendar_wrap {
float: left;
height: 70vh;
width: 35vw; /* calc(35vw / 1.25); */
padding: 0;
background-color: blue;
}
.calendar_iframe {
float: left;
width: 35vw;
-ms-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
-webkit-transform: scale(1.25);
transform: scale(1.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* ... */
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Generate HTML Div table grids for websites in just a few easy steps. Set the options then select the desired size. Adjust the options in the interactive editors
Free online interactive HTML Table and structured div grid styler and code generator. Select a style from the gallery and adjust the settings to get the HTML and CSS codes.