Question

The following CSS affects whether a page prints in portrait or landscape by default.

@page {
   size: landscape;
}

I realize that this only works on a very limited set of browsers, and that the user can override it. That’s okay; I’m just trying to provide a good default.

This works fine as a static value in CSS, but I’d like to switch dynamically between portrait & landscape based on on user choices. Is it possible to use JavaScript to change this value?

Answer 1

One simple way is to create a separate style for @page and change it:

var cssPagedMedia = (function () {
    var style = document.createElement('style');
    document.head.appendChild(style);
    return function (rule) {
        style.innerHTML = rule;
    };
}());

cssPagedMedia.size = function (size) {
    cssPagedMedia('@page {size: ' + size + '}');
};

cssPagedMedia.size('landscape');