// preview area const previewDiv = document.createElement('div'); previewDiv.className = 'preview-area'; previewDiv.innerHTML = ` <div class="sample-label"> <span>🔤 မြန်မာစာမူ</span> <i style="font-size:0.65rem;">(preview)</i> </div> <div class="burmese-preview" style="font-family: '$font.name', 'Noto Sans Myanmar', 'Padauk', 'Pyidaungsu', sans-serif;"> $escapeHtml(font.sampleText) </div> <div class="install-note">✓ Android Unicode render test</div> `;

.info-panel h3 font-size: 1.25rem; font-weight: 600; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 8px; color: #1a472a;

.burmese-preview font-size: 1.5rem; line-height: 1.45; word-break: break-word; text-align: center; padding: 0.5rem 0.2rem; font-weight: normal; transition: all 0.1s ease;

/* preview area with Burmese sample */ .preview-area background: #fefcf5; border-radius: 1.2rem; padding: 1rem; margin: 1rem 0 1.2rem; border: 1px solid #e9e3d5; box-shadow: inset 0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.02);

@media (max-width: 680px) body padding: 1rem; .font-name font-size: 1.4rem; .burmese-preview font-size: 1.2rem; .button-group flex-direction: column;

.btn-primary:hover background: #0f5a37; transform: scale(0.97); box-shadow: 0 1px 3px rgba(0,0,0,0.1);

.hero .badge display: inline-block; background: #e9ecef; backdrop-filter: blur(4px); padding: 0.3rem 1rem; border-radius: 40px; font-size: 0.85rem; font-weight: 600; color: #2c6e49; margin-top: 0.75rem; border: 1px solid rgba(44, 110, 73, 0.2);

<div class="info-panel"> <div class="install-steps"> <h3>📱 How to install TTF on Android</h3> <ul class="step-list"> <li><span class="step-num">1</span> Download the <strong>.ttf</strong> font file (tap "Download TTF")</li> <li><span class="step-num">2</span> Open <strong>Settings → Display → Font size & style</strong> (varies by device)</li> <li><span class="step-num">3</span> Select <strong>"My Fonts"</strong> or <strong>"Download fonts"</strong> → tap ➕ icon</li> <li><span class="step-num">4</span> Browse to <strong>Downloads folder</strong> → select the .ttf file → apply</li> <li><span class="step-num">5</span> Alternative: use apps like <strong>iFont</strong> or <strong>zFont</strong> for easy installation</li> </ul> <div class="warning"> ⚡ Tip: After installing, restart apps (Messenger, Viber, browser) to see new Burmese rendering. </div> </div> <div class="compatibility"> <h3>🤖 Android Compatibility</h3> <p style="margin-bottom: 12px;">✅ Works on Android 5.0 (Lollipop) to Android 14+<br>✅ Supports Myanmar Unicode complex rendering & stacking<br>✅ No root needed, system font installer works</p> <p style="font-size:0.85rem; color:#3a674a;">📦 All fonts are standard OpenType TTF, tested with Samsung, Xiaomi, Pixel, Oppo, Vivo, Realme.</p> </div> </div> <footer> ⚡ Myanmar Unicode Fonts — Free for personal & commercial use. Fully compatible with Zawgyi-One transition.<br> All TTF files are sourced from open-licensed Burmese Unicode projects (Pyidaungsu, Noto Sans Myanmar, Masterpiece). </footer> </div>