Export & Generated Code

Live Preview

Generated CSS

${textInput.value.replace(/\n/g, '
')}

`; document.getElementById('css-output').textContent = style; } // --- UTILITY FUNCTIONS --- function showNotification(message) { notification.textContent = message; notification.classList.remove('opacity-0'); setTimeout(() => notification.classList.add('opacity-0'), 2000); } copyCssBtn.addEventListener('click', () => { navigator.clipboard.writeText(document.getElementById('css-output').textContent).then(() => showNotification('CSS copied!')); }); // --- PDF GENERATION --- async function generatePdfReport() { downloadPdfBtn.disabled = true; downloadPdfBtn.textContent = 'Generating...'; const reportHtml = `

Typography Specimen

Generated on: ${new Date().toLocaleDateString()}

Live Preview

${textInput.value.replace(/\n/g, '
')}

CSS Properties

font-family	'${styleState.fontFamily}', serif;
font-size	${styleState.fontSize};
font-weight	${styleState.fontWeight};
color	${styleState.fontColor};
text-shadow	${styleState.textShadow};

`; const pdfTemplate = document.getElementById('pdf-template'); pdfTemplate.innerHTML = reportHtml; pdfTemplate.classList.remove('invisible'); try { const { jsPDF } = window.jspdf; const canvas = await html2canvas(pdfTemplate.querySelector('.pdf-report-container'), { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(), pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('FontStyle_Report.pdf'); } catch (e) { console.error('PDF Generation Error:', e); } finally { downloadPdfBtn.disabled = false; downloadPdfBtn.textContent = 'Download Style PDF'; pdfTemplate.classList.add('invisible'); pdfTemplate.innerHTML = ''; } } downloadPdfBtn.addEventListener('click', generatePdfReport); // --- START --- initialize(); });