An effective way of archiving a webpage is to create a PDF from the HTML. PDF format allows consolidation of any extraneous filesΒ  associated with a webpage (images and CSS for examples) into a single document. This is useful when trying to embed views of your webpages within a web application using the ViewerJs plugin for example.Β  While the PDF may look good in Acrobat viewer, issues with formatting or CSS styles may cause display problems in the PDF when viewing the PDF in ViewerJs.Β  The CSS from that initial html page may cause the the text or other elements to render hidden or in some other fashion that is undesirable.

Recently this problem cropped up in an html page where the text was defined as the following and would not display in the PDF when viewed through ViewerJS.

.ask {
font: bold italic 13px 'Helvetica', 'Sans-Serif';
color: #1a6e8a;
}
.askBig {
font: bold italic 18px 'Helvetica', 'Sans-Serif';
background: #fff url('../images/speak2.png') no-repeat top left;
padding-left: 24px;
color: #1a6e8a;
}

When you are creating a PDF from a webpage, it is usually best to save the generated webpage from a web browser (Firefox).Β  If you download the complete webpage (which is probably the default ‘Save As’ option in Firefox) you can edit any css files causing problems and then use the ‘Create PDF from webpage’ option in Acrobat Pro to create the PDF.Β  Below is css code that was changed in order for the html text to appear in ViewerJs after being converted to a PDF.

.ask {
font-size: 13px;
}
.askBig {
font-size: 18px;
background: #fff url('../images/speak2.png') no-repeat top left;
padding-left: 24px;
}