After many hours/days trying to work out how to print my Storyline piece, I am disappointed to find that the printing margin is off the page. Picture attached. It is resolved if you change print settings to a certain % of scale but I want the slide to fit in an A4 piece of paper.
I'm curious as to how you are printing this slide. If this is a Javascript code you are executing, can you share the code you are using so the community can help you troubleshoot?
Since I'm not very knowledgeable in Javascript, I'll leave it for our community members to chime in.
I do want to point out, however, that this is likely browser-dependent. I've used the same code above in a project (only changing it to transform: scale(1.2) !important; instead of 1.3), and it worked perfectly in Chrome, but it was outside of the margins when using Edge.
4 Replies
Hi, Katriese, and welcome to E-Learning Heroes! ✨
Thank you for reaching out!
I'm curious as to how you are printing this slide. If this is a Javascript code you are executing, can you share the code you are using so the community can help you troubleshoot?
Hi,
I used this video by Owen and followed most of the instructions. Specifically:
The Javascript is:
var styles = `@media print {
body, * { visibility: hidden; }
html, body { overflow: hidden; transform: translateZ(0); }
#slide {
transform: scale(1.3) !important;
}
#wrapper {
transform: scale(1) !important;
}
#slide,
#wrapper {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
#frame {
overflow: visible !important;
}
.slide-transition-container {
overflow: visible !important;
}
@page {size: A4 landscape;max-height:99%; max-width:99%}
.slide-container, .slide-container * {
visibility: visible !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
#outline-panel {
display: none !important;
}
}
}`
var stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerText = styles;
document.head.appendChild(stylesheet);
window.print();
Hi, Katriese.
Thank you for sharing the code!
Since I'm not very knowledgeable in Javascript, I'll leave it for our community members to chime in.
I do want to point out, however, that this is likely browser-dependent. I've used the same code above in a project (only changing it to transform: scale(1.2) !important; instead of 1.3), and it worked perfectly in Chrome, but it was outside of the margins when using Edge.
Thanks, I have a sneaky suspicion this is the case. I will change the code to the above suggestion and see if that helps.