To print your slides in Articulate Storyline 360, add the following script to a JavaScript trigger:
if (document.location.href.indexOf('html5') < 0) { GetPlayer().printSlide() } else { if(!window.hasPrintStyle){ window.hasPrintStyle = true; var css = "@media print {div.controls.grid-row.inflexible,div.area-secondary.cs-left.inflexible,header.header-primary.centered-title.extended-height,div.presentation-wrapper:after {display:none !important; visibility:hidden !important;}}"; head = document.head || document.getElementsByTagName('head')[0]; style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } window.print(); }
Note: This only works in HTML5 in the Classic Player. For Flash, use the SWF package described here: https://elearningbrothers.com/printing-slides-articulate-storyline-2/
If the above code doesn’t work for you in the latest update of Storyline, try this instead:
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();
Things to keep in mind when using the code above:
#1 – This code expects that the content will be printed in Landscape mode. This gives you the best & fullest output. If you want to adjust that at all, take a look at
@page {size: A4 landscape;
#2 – Depending on the browser that you’re using, the size of the content may be too big and extend off of the page. I found that this happened in Edge the most often. If you want to adjust that at all, take a look at
#slide { transform: scale(1.3) !important; }
You will most likely need to change the scale to something smaller like 1.2
Big thanks to Tyler at Articulate for the help on this!