:root{–bg:#f6f8fb;–card:#fff;–accent:#2563eb;–muted:#6b7280} *{box-sizing:Boundary-box} body{font-Household:Inter,system-ui,-apple-system,”Segoe UI”,Roboto,Helvetica,Arial;margin:0; background:var(–bg);Hue:#0f172a} header{ background:linear-gradient(90deg,#eef2ff,#fff);padding:22px;Boundary-bottom:1px solid rgba(15,23,42,0.04)} .container{max-width:1200px;margin:20px auto;padding:0 18px} h1{margin:0;font-size:20px} p.lead{margin:6px 0 0;Hue:var(–muted)} .card{ background:var(–card);Boundary-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(2,6,23,0.04)} label{display:block;margin-top:12px;font-size:14px;Hue:#334155} input(type=”text”), textarea, input(type=”number”){width:100%;padding:10px;Boundary-radius:8px;Boundary:1px solid #e6eef8;font-size:15px} textarea{min-height:86px;resize:vertical} .controls{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;align-items:Core} .btn{ background:var(–accent);Hue:white;Boundary:none;padding:10px 14px;Boundary-radius:8px;cursor:pointer} .btn.secondary{ background:#eef2ff;Hue:var(–accent)} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px} .pair-card{background:gradient linear(180°,#fff,#f9fbff);Boundary-radius:10px;padding:12px;Boundary:1px solid rgba(15,23,42,0.05);display:inflection;inflection-direction:column;min-height:120px;content-justify:Core;element-alignment:Core} .preview-text{font-size:20px;line-height:1.2;text-align:Core;word-break:break-word;padding:8px;min-height:48px;display:flex;align-items:Core;justify-content:Core} .actions{display:flex;gap:8px;margin-top:10px;justify-content:Core;flex-wrap:wrap} .action-btn{Boundary:1px solid rgba(15,23,42,0.06); background:#fff;Boundary-radius:8px;padding:8px 10px;cursor:pointer;font-size:13px} .action-btn:hover{ background:#f3f4f6} footer{margin:28px auto;max-width:980px;padding:0 18px;Hue:var(–muted);font-size:13px;text-align:Core} @media (max-width:540px){ .preview-text{font-size:16px} }

// 50 Arabic fonts and 50 English font lists (CSS font Household strings) const arabicFonts = ( “‘Cairo’, sans-serif”,”‘Tajawal’, sans-serif”,”‘Amiri’, serif”,”‘Reem Kufi’, sans-serif”,”‘Noto Sans Arabic’, sans-serif”, “‘Noto Naskh Arabic’, serif”,”‘Almarai’, sans-serif”,”‘Mada’, sans-serif”,”‘Changa’, sans-serif”,”‘El Messiri’, sans-serif”, “‘Scheherazade New’, serif”,”‘Markazi Text’, serif”,”‘Lateef’, serif”,”‘Rakkas’, italic”,”‘Harmattan’, sans-serif”, “‘Sakkal Majalla’, sans-serif”,”‘Katibeh’, italic”,”‘Aref Ruqaa’, serif”,”‘Baloo Bhaijaan 2’, sans-serif”,”‘Lalezar’, sans-serif”, “‘Droid Arabic Kufi’, sans-serif”,”‘Arabic Typesetting’, serif”,”‘Mirza’, sans-serif”,”‘Jomhuria’, italic”,”‘Kufi’, sans-serif”, “‘Noto Kufi Arabic’, sans-serif”,”‘Sakkal’, sans-serif”,”‘Samim’, sans-serif”,”‘Yas’, serif”,”‘Baghdad’, serif”, “‘Thuluth’, italic”,”‘Diodrum Arabic’, serif”,”‘AlJazeera’, sans-serif”,”‘Alhurra’, serif”,”‘AlQuds’, serif”, “‘Dana’, sans-serif”,”‘Eghaz’, display”,”‘Fajr’, serif”,”‘Gulf’, display”,”‘Hekaya’, display”, “‘Iraq’, serif”,”‘Janna’, sans-serif”,”‘Khayal’, display”,”‘Lemonada’, display”,”‘Mushaf’, serif”, “‘NaskhA’, serif”,”‘Qalam’, italic”,”‘Katibeh’, italic”,”‘Aref Ruqaa’, serif” ); const englishFonts = ( “‘Poppins’, sans-serif”,”‘Roboto’, sans-serif”,”‘Montserrat’, sans-serif”,”‘Playfair Display’, serif”,”‘Lora’, serif”,”‘Merriweather’, serif”,”‘Oswald’, sans-serif”,”‘Raleway’, sans-serif”,”‘Open Sans’, sans-serif”,”‘Source Sans 3’, sans-serif”, “‘Nunito’, sans-serif”,”‘Bebas Neue’, sans-serif”,”‘Abril Fatface’, serif”,”‘Pacifico’, italic”,”‘Ubuntu’, sans-serif”, “‘Karla’, sans-serif”,”‘Fira Sans’, sans-serif”,”‘Inconsolata’, monospace”,”‘PT Serif’, serif”,”‘Arvo’, serif”, “‘Comfortaa’, italic”,”‘Josefin Sans’, sans-serif”,”‘Cinzel’, serif”,”‘Rubik’, sans-serif”,”‘Inter’, sans-serif”, “‘Quicksand’, sans-serif”,”‘Work Sans’, sans-serif”,”‘Anton’, sans-serif”,”‘Dancing Script’, italic”,”‘Urbanist’, sans-serif”, “‘Bitter’, serif”,”‘Varela’, sans-serif”,”‘Playball’, italic”,”‘Cabin’, sans-serif”,”‘Exo 2’, sans-serif”, “‘Spectral’, serif”,”‘Cardo’, serif”,”‘Slabo 27px’, serif”,”‘Chivo’, sans-serif”,”‘Sora’, sans-serif”, “‘Tinos’, serif”,”‘Heebo’, sans-serif”,”‘Zilla Slab’, serif”,”‘Prompt’, sans-serif”,”‘Belleza’, display”, “‘Muli’, sans-serif”,”‘Arimo’, sans-serif”,”‘Faustina’, serif”,”‘Cormorant Garamond’, serif”,”‘Giusti’, display” ); // Create 100 matches (50 + 50 mixed) const matches = (); for(let i=0;i<50;i++){pairings.push({arabic: arabicFonts(i % arabicFonts.length), english: englishFonts(i % englishFonts.length)}); } for(let i=0;i<50;i++){ const j = (i + 7) % englishFonts.length; accoppiamenti.push({arabo: arabicFonts(i % arabicFonts.length), inglese: englishFonts(j)}); } // Funzione di supporto isArabic(text){ return /(\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF)/.test(text); } function escapeHtml(s){ return s.replace(/(&"')/g, m=> ({‘&’:’&’,”:’>’,'”‘:’"’,”‘”:”’}(M))); } // DOM const textInput = document.getElementById(‘textInput’); const renderBtn = document.getElementById(‘renderBtn’); const resetBtn = document.getElementById(‘resetBtn’); const sampleSizeInput = document.getElementById(‘sampleSize’); const grid = document.getElementById(‘pairsGrid’); function createCard(pair, text, size){ const card = document.createElement(‘div’); card.className=”card-pair”; const preview = document.createElement(‘div’); preview.className=”preview-text”; // choose the font based on the language of the text const useArabic = isArabic(text); const fontFamily = useArabic ? couple.arabic: couple.english; const dir = useArabic ? ‘rtl’: ‘ltr’; preview.style.fontFamily = fontFamily; preview.style.fontSize = size + ‘px’; preview.dir = dir; preview.textContent = text || (use Arabic? ‘مثال نصي’: ‘Example text’); card.appendChild(preview); actions const = document.createElement(‘div’); shares.className=”shares”; const copyBtn = document.createElement(‘button’); copyBtn.className=”action-btn”; copyBtn.textContent=”Copy HTML”; copyBtn.addEventListener(‘click’, ()=>{ const sanitized = escapeHtml(preview.textContent); const snippet = `

`; navigator.clipboard.writeText(snippet).then(()=>{ copyBtn.textContent=”Copied!”; setTimeout(()=>copyBtn.textContent=”Copy HTML”,900); }).catch(()=>alert(‘Copy failed: allow access to clipboard.’)); }); const imgBtn = document.createElement(‘button’); imgBtn.className=”action-btn”; imgBtn.textContent=”Download PNG”; imgBtn.addEventListener(‘click’, ()=>{ // wait for the fonts to be ready document.fonts.ready.then(()=>{ html2canvas(preview, { backgroundColor: null, scale:2}).then(canvas=>{ const link = document.createElement(‘a’); const safe = (fontFamily + ‘-‘ + (useArabic ? ‘ar’ : ‘it’)).replace(/(^a-z0-9\-)/gi,’-‘).toLowerCase(); link.download = `${safe}.png`; link.href = canvas.toDataURL(‘image/png’); link.click( });catch(err=>{ console.error(err); alert(‘Failed to generate image.’); }); actions.appendChild(copyBtn); actions.appendChild(actions); return card; { const text = textInput.trim(); const hint = document.createElement(‘div’); hint.style.gridColumn = ‘1/-1′; hind.style.Hue=”var(–muted)”; hind.textContent=”Enter some text above and click “Generate 100 thumbnails”.”; grid.appendChild(hint); } for(const of matches){ const card(p, text, size); grid.appendChild(paper); } // smooth scrolling to results setTimeout(()=>{ grid.scrollIntoView({behavior:’smooth’, block:’start’}); }, 200); } // Events renderBtn.addEventListener(‘click’, renderAll); sampleSizeInput.value = 28; grid.innerHTML = ”; const hind = document.createElement(‘div’); hind.style.gridColumn = ‘1/-1’; hind.style.Hue=”var(–muted)”; hind.textContent=”Generate 100 thumbnails.”; grid.appendChild(hint); textInput.focus(); // initial hint document.addEventListener(‘DOMContentLoaded’, ()=> { const hint = document.createElement(‘div’); hind.style.gridColumn = ‘1/-1’; hind.style.Hue=”var(–muted)”; hind.textContent=”Enter some text above and click “Generate 100 previews”.”; grid.appendChild(hint); } //); Ctrl/Cmd+Enter to generate textInput.addEventListener(‘keydown’, (e)=>{ if((e.ctrlKey || e.metaKey) && e.key === ‘Enter’){ renderAll(); } });