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.
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
The first two made me find the last one, which is best as it has a CSS demo button (that also works on the WayBack link), a list of examples, and even better, answers the above questions with the “border-style” list below.
I rephrased their list into a table emphasising the clock-wise order:
The number of values determine the sides affected; thinking clock-wise is easiest to get it:
# values
affected sides
example
top
right
bottom
left
1
all: top, right, bottom, left
solid
solid
solid
solid
solid
2
top & bottom, right & left
none solid
none
solid
none
solid
3
top, right & left, bttom
dotted none solid
dotted
none
solid
none
4
top, right, bottom, left
double dotted solid none
double
dotted
solid
none
Their list:
The border-style property may be specified using one, two, three, or four values.
When one value is specified, it applies the same style to all four sides.
When two values are specified, the first style applies to the top and bottom, the second to the left and right.
When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
Each value is a keyword chosen from the list below.
then it continues with a table showing the outcome of the various line style values you can put in:
<line-style>
Describes the style of the border. It can have the following values:
none
Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden
Like the none keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highestpriority: if any other conflicting border is set, it won’t be displayed.
dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width.
dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
Displays a border with a carved appearance. It is the opposite of ridge.
ridge
Displays a border with an extruded appearance. It is the opposite of groove.
inset
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset
Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
The Wiert Corner - irregular stream of stuff 