fix issues with overflowing fit-text when exporting to pdf #3191 #3120

css/print/pdf.scss

@@ -96,10 +96,6 @@ html.print-pdf {
 		min-height: auto !important;
 	}
 
-	.reveal .r-fit-text {
-		white-space: normal !important;
-	}
-
 	.reveal img {
 		box-shadow: none;
 	}

js/controllers/print.js

@@ -110,9 +110,7 @@ export default class Print {
 				slide.style.top = top + 'px';
 				slide.style.width = slideWidth + 'px';
 
-				// Re-run the slide layout so that r-fit-text is applied based on
-				// the printed slide size
-				this.Reveal.slideContent.layout( slide )
+				this.Reveal.slideContent.layout( slide );
 
 				if( slide.slideBackgroundElement ) {
 					page.insertBefore( slide.slideBackgroundElement, slide );
@@ -219,6 +217,9 @@ export default class Print {
 
 		pages.forEach( page => pageContainer.appendChild( page ) );
 
+		// Re-run JS-based content layout after the slide is added to page DOM
+		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
+
 		// Notify subscribers that the PDF layout is good to go
 		this.Reveal.dispatchEvent({ type: 'pdf-ready' });
 

js/controllers/slidecontent.js

@@ -186,15 +186,14 @@ export default class SlideContent {
 	}
 
 	/**
-	 * Applies JS-dependent layout helpers for the given slide,
-	 * if there are any.
+	 * Applies JS-dependent layout helpers for the scope.
 	 */
-	layout( slide ) {
+	layout( scopeElement ) {
 
 		// Autosize text with the r-fit-text class based on the
 		// size of its container. This needs to happen after the
 		// slide is visible in order to measure the text.
-		Array.from( slide.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
+		Array.from( scopeElement.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
 			fitty( element, {
 				minSize: 24,
 				maxSize: this.Reveal.getConfig().height * 0.8,