Font Specimen Sheet Generator
This is a preview of your specimen sheet. Use the "Configuration" tab to make changes.
1. Sample Content
2. Select Fonts
No fonts selected. Please select some fonts in the "Configuration" tab.
'; return; } activeFonts.forEach(font => { const block = document.createElement('div'); block.className = `font-specimen-block ${font.cssClass}`; block.style.fontFamily = font.family; block.innerHTML = `
${font.name}
${font.category}
${specimenData.headline || 'Headline Preview'}
${specimenData.body || 'Body text preview...'}
${alphabet}
`;
previewPane.appendChild(block);
});
}
// --- EVENT HANDLERS ---
function handleGenerateLayout() {
readConfig();
renderDashboard();
switchTab(0); // Switch to dashboard to show result
}
async function generatePdf() {
downloadPdfBtn.textContent = 'Generating...';
downloadPdfBtn.disabled = true;
try {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
// Get the element to capture
const elementToCapture = document.getElementById('specimen-sheet-preview');
// Use html2canvas to render the element
const canvas = await html2canvas(elementToCapture, {
scale: 2, // Higher scale for better quality
useCORS: true,
logging: false,
backgroundColor: '#ffffff' // Ensure background is white
});
const imgData = canvas.toDataURL('image/png');
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = doc.internal.pageSize.getHeight();
// A4 page size in points (595.28 x 841.89)
// Add some margin
const margin = 40;
const contentWidth = pdfWidth - (margin * 2);
const contentHeight = pdfHeight - (margin * 2);
const imgProps = doc.getImageProperties(imgData);
const imgRatio = imgProps.height / imgProps.width;
let finalImgWidth = contentWidth; // Fit to width
let finalImgHeight = finalImgWidth * imgRatio;
// The content can be very tall, so we need to handle multi-page
let heightLeft = finalImgHeight;
let position = margin; // Top margin for first page
// Add first page
doc.addImage(imgData, 'PNG', margin, position, finalImgWidth, finalImgHeight);
heightLeft -= (pdfHeight - (margin * 2)); // Subtract visible area
// Add new pages if needed
while (heightLeft > 0) {
position = -heightLeft - margin; // Move canvas "up"
doc.addPage();
doc.addImage(imgData, 'PNG', margin, position, finalImgWidth, finalImgHeight);
heightLeft -= (pdfHeight - (margin * 2));
}
doc.save("Font-Specimen-Sheet.pdf");
} catch (error)
{
console.error("PDF generation failed:", error);
alert("Could not generate PDF. Please try again.");
} finally {
downloadPdfBtn.textContent = 'Download Specimen Sheet as PDF';
downloadPdfBtn.disabled = false;
}
}
// --- INITIALIZATION ---
function initialize() {
// Initial setup
renderConfig();
renderDashboard();
switchTab(0);
// Event Listeners
tabs.forEach((tab, index) => tab.addEventListener('click', () => switchTab(index)));
prevBtn.addEventListener('click', () => switchTab(currentTab - 1));
nextBtn.addEventListener('click', () => switchTab(currentTab + 1));
generateLayoutBtn.addEventListener('click', handleGenerateLayout);
downloadPdfBtn.addEventListener('click', generatePdf);
}
initialize();
});