{"id":65,"date":"2026-03-15T08:17:01","date_gmt":"2026-03-15T08:17:01","guid":{"rendered":"https:\/\/tools.sanepo.com\/?post_type=tool&#038;p=65"},"modified":"2026-03-15T08:17:07","modified_gmt":"2026-03-15T08:17:07","slug":"text-to-ascii-art-converter-online","status":"publish","type":"tool","link":"https:\/\/tools.sanepo.com\/id\/features\/text-to-ascii-art-converter-online\/","title":{"rendered":"Text to ASCII Art Converter Online"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <!-- Load Figlet Engine via unpkg CDN -->\n    <script src=\"https:\/\/unpkg.com\/figlet@1.8.0\/lib\/figlet.js\"><\/script>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n        .wp-nt-wrapper {\n            \/* Tool Specific Variables *\/\n            --nt-success: #10b981;\n            --nt-danger: #ef4444;\n            --nt-radius-lg: 16px;\n            --nt-radius-md: 12px;\n            --nt-radius-sm: 8px;\n            --nt-canvas-bg: #1b1b29;\n            --nt-ascii-color: #8bb4ff;\n\n            font-family: 'Inter', system-ui, -apple-system, sans-serif;\n            width: 100%;\n            margin: 30px auto;\n            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);\n            border: 1px solid var(--border-color);\n            border-radius: var(--nt-radius-lg);\n            box-shadow: var(--card-shadow);\n            padding: 32px;\n            box-sizing: border-box;\n            line-height: 1.5;\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            color: var(--text-primary);\n        }\n\n        .wp-nt-wrapper * {\n            box-sizing: border-box;\n            transition: var(--transition);\n        }\n\n        \/* Header *\/\n        .wp-nt-header {\n            text-align: center;\n            margin-bottom: 32px;\n        }\n\n        .wp-nt-header h2 {\n            margin: 0 0 8px 0;\n            font-size: 1.75rem;\n            font-weight: 700;\n            letter-spacing: -0.025em;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n        }\n\n        .wp-nt-header p {\n            margin: 0;\n            font-size: 0.95rem;\n            opacity: 0.8;\n            color: var(--text-secondary);\n        }\n\n        \/* Settings Grid (Replaces wp-nt-grid) *\/\n        .wp-nt-settings {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 20px;\n            margin-bottom: 24px;\n            background: var(--glass-bg);\n            padding: 20px 24px;\n            border-radius: var(--nt-radius-md);\n            border: 1px solid var(--border-color);\n            box-shadow: var(--card-shadow);\n        }\n\n        .wp-nt-form-group {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .wp-nt-label {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            font-weight: 600;\n            font-size: 0.85rem;\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            opacity: 0.8;\n            margin-bottom: 12px;\n            color: var(--text-primary);\n        }\n\n        .wp-nt-char-count {\n            color: var(--accent-color);\n            font-weight: 700;\n            opacity: 1;\n            font-size: 0.85rem;\n            letter-spacing: normal;\n        }\n\n        \/* Modern Input & Select *\/\n        .wp-nt-input, .wp-nt-select {\n            width: 100%;\n            padding: 10px 12px;\n            border-radius: var(--nt-radius-sm);\n            border: 1px solid rgba(0,0,0,0.1);\n            background-color: var(--glass-bg);\n            font-family: inherit;\n            font-size: 0.95rem;\n            color: inherit;\n            outline: none;\n            appearance: none;\n        }\n\n        .wp-nt-input:focus, .wp-nt-select:focus {\n            border-color: var(--accent-color);\n            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);\n        }\n\n        .wp-nt-select {\n            cursor: pointer;\n            background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n            background-repeat: no-repeat;\n            background-position: right 12px center;\n            background-size: 16px;\n        }\n\n        \/* Canvas Display Area *\/\n        .wp-nt-canvas-container {\n            position: relative;\n            background: var(--nt-canvas-bg);\n            border-radius: var(--nt-radius-lg);\n            padding: 24px;\n            min-height: 250px;\n            overflow-x: auto;\n            border: 1px solid rgba(0,0,0,0.1);\n            box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);\n        }\n\n        \/* Custom Scrollbar *\/\n        .wp-nt-canvas-container::-webkit-scrollbar { height: 8px; }\n        .wp-nt-canvas-container::-webkit-scrollbar-track {\n            background: rgba(255, 255, 255, 0.05);\n            border-radius: 0 0 12px 12px;\n        }\n        .wp-nt-canvas-container::-webkit-scrollbar-thumb {\n            background: rgba(255, 255, 255, 0.2);\n            border-radius: 4px;\n        }\n\n        .wp-nt-ascii-display {\n            margin: 0;\n            color: var(--nt-ascii-color);\n            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;\n            font-size: 14px;\n            line-height: 1.2;\n            white-space: pre;\n        }\n\n        .wp-nt-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            color: #a0a0ba;\n            font-size: 0.9rem;\n            display: none;\n            font-weight: 500;\n        }\n\n        \/* Action Bar *\/\n        .wp-nt-action-bar {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            background: var(--glass-bg);\n            padding: 16px 24px;\n            border-radius: var(--nt-radius-md);\n            border: 1px solid var(--border-color);\n            margin-top: 24px;\n            box-shadow: var(--card-shadow);\n            backdrop-filter: blur(5px);\n        }\n\n        .wp-nt-btn-group {\n            display: flex;\n            gap: 12px;\n        }\n\n        \/* Buttons *\/\n        .wp-nt-btn {\n            background: transparent;\n            color: inherit;\n            border: 1px solid var(--border-color);\n            padding: 10px 24px;\n            border-radius: var(--nt-radius-sm);\n            cursor: pointer;\n            font-weight: 500;\n            font-size: 0.95rem;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            box-shadow: none;\n        }\n\n        .wp-nt-btn:hover {\n            background: rgba(0,0,0,0.05);\n            transform: translateY(-2px);\n        }\n\n        .wp-nt-btn-primary {\n            background: var(--accent-color);\n            color: #ffffff;\n            border: none;\n        }\n\n        .wp-nt-btn-primary:hover {\n            background: var(--accent-hover);\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);\n        }\n\n        .wp-nt-btn:active {\n            transform: translateY(1px);\n        }\n\n        \/* Notification Toast *\/\n        .wp-nt-toast {\n            position: fixed;\n            bottom: 30px;\n            left: 50%;\n            transform: translateX(-50%) translateY(20px);\n            background: var(--nt-success);\n            color: white;\n            padding: 12px 24px;\n            border-radius: 30px;\n            font-size: 0.875rem;\n            font-weight: 600;\n            opacity: 0;\n            visibility: hidden;\n            transition: var(--transition);\n            z-index: 9999;\n            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);\n        }\n\n        .wp-nt-toast.show {\n            opacity: 1;\n            visibility: visible;\n            transform: translateX(-50%) translateY(0);\n        }\n\n        \/* Mobile Responsiveness (Super Important) *\/\n        @media (max-width: 600px) {\n            .wp-nt-wrapper {\n                padding: 20px 16px;\n                margin: 20px auto;\n            }\n            .wp-nt-header h2 {\n                font-size: 1.4rem;\n            }\n            .wp-nt-settings {\n                grid-template-columns: 1fr;\n                gap: 16px;\n                padding: 16px;\n            }\n            .wp-nt-action-bar {\n                flex-direction: column;\n                gap: 16px;\n                text-align: center;\n                padding: 16px;\n            }\n            .wp-nt-btn-group, .wp-nt-action-bar > button {\n                display: flex;\n                width: 100%;\n                gap: 12px;\n            }\n            .wp-nt-btn {\n                flex: 1;\n                padding: 10px;\n                font-size: 0.85rem;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .wp-nt-select {\n                font-size: 0.85rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"wp-nt-wrapper\">\n    <div class=\"wp-nt-header\">\n        <h2>\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 7V4h16v3\"\/><path d=\"M12 4v16\"\/><path d=\"M9 20h6\"\/><\/svg>\n            Figlet Text Generator\n        <\/h2>\n        <p>Transform plain text into stunning ASCII art instantly.<\/p>\n    <\/div>\n\n    <!-- Adapted wpnt-settings for the Inputs -->\n    <div class=\"wp-nt-settings\">\n        <div class=\"wp-nt-form-group\">\n            <label class=\"wp-nt-label\" for=\"nt-text-input\">\n                Your Text\n                <span class=\"wp-nt-char-count\" id=\"nt-char-count\">12\/50<\/span>\n            <\/label>\n            <input type=\"text\" id=\"nt-text-input\" class=\"wp-nt-input\" placeholder=\"Type something cool...\" maxlength=\"50\" value=\"SANEPO TOOLS\">\n        <\/div>\n        \n        <div class=\"wp-nt-form-group\">\n            <label class=\"wp-nt-label\" for=\"nt-font-select\">\n                Figlet Font Style\n            <\/label>\n            <select id=\"nt-font-select\" class=\"wp-nt-select\">\n                <!-- Standard Fonts -->\n                <option value=\"Standard\" selected>Standard<\/option>\n                <option value=\"Slant\">Slant<\/option>\n                <option value=\"Ghost\">Ghost<\/option>\n                <option value=\"Doom\">Doom<\/option>\n                <option value=\"3D-ASCII\">3D-ASCII<\/option>\n                <option value=\"ANSI Shadow\">ANSI Shadow<\/option>\n                <option value=\"Cybermedium\">Cybermedium<\/option>\n                <option value=\"Banner3\">Banner 3<\/option>\n                <option value=\"Block\">Block<\/option>\n                <option value=\"Star Wars\">Star Wars<\/option>\n                <option value=\"Graffiti\">Graffiti<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n\n    <div class=\"wp-nt-canvas-container\" id=\"nt-canvas-wrapper\">\n        <div class=\"wp-nt-loader\" id=\"nt-loader\">Fetching Font&#8230;<\/div>\n        <pre id=\"nt-ascii-display\" class=\"wp-nt-ascii-display\"><\/pre>\n    <\/div>\n\n    <!-- Adapted wpnt-action-bar -->\n    <div class=\"wp-nt-action-bar\">\n        <button class=\"wp-nt-btn\" onclick=\"clearInput()\">\n            <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><polyline points=\"3 6 5 6 21 6\"><\/polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"><\/path><\/svg>\n            Clear\n        <\/button>\n\n        <div class=\"wp-nt-btn-group\">\n            <button class=\"wp-nt-btn\" onclick=\"copyASCII(true)\" title=\"Copy with Discord\/Slack formatting\">\n                <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg>\n                Copy as Code\n            <\/button>\n            <button class=\"wp-nt-btn wp-nt-btn-primary\" onclick=\"copyASCII(false)\">\n                <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\n                Copy Art\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div id=\"nt-toast\" class=\"wp-nt-toast\">Copied to clipboard!<\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const inputEl = document.getElementById('nt-text-input');\n        const selectEl = document.getElementById('nt-font-select');\n        const displayEl = document.getElementById('nt-ascii-display');\n        const loaderEl = document.getElementById('nt-loader');\n        const countEl = document.getElementById('nt-char-count');\n        \n        let debounceTimer;\n\n        \/\/ Core Render Function\n        function renderFiglet() {\n            const text = inputEl.value || '';\n            const font = selectEl.value;\n\n            \/\/ Update Char Count\n            countEl.textContent = `${text.length}\/${inputEl.maxLength}`;\n\n            if (text.trim() === '') {\n                displayEl.textContent = 'Type something cool...';\n                return;\n            }\n\n            \/\/ Show loading state gracefully\n            displayEl.style.opacity = '0.3';\n            loaderEl.style.display = 'block';\n\n            \/\/ Check if Figlet is loaded before trying to use it\n            if (typeof figlet !== 'undefined') {\n                figlet(text, font, function(err, result) {\n                    loaderEl.style.display = 'none';\n                    displayEl.style.opacity = '1';\n\n                    if (err) {\n                        console.warn('Figlet rendering error:', err);\n                        displayEl.textContent = 'Error loading font. Please try another one.';\n                        return;\n                    }\n                    displayEl.textContent = result;\n                });\n            } else {\n                loaderEl.style.display = 'none';\n                displayEl.style.opacity = '1';\n                displayEl.textContent = 'Error: Figlet library failed to load. Check your internet connection.';\n            }\n        }\n\n        \/\/ Debouncer for Performance\n        function handleInput() {\n            clearTimeout(debounceTimer);\n            debounceTimer = setTimeout(renderFiglet, 300); \/\/ Wait 300ms after user stops typing\n        }\n\n        \/\/ Safe Initialization with Polling\n        function initApp() {\n            \/\/ Check if library is already loaded\n            if (typeof figlet !== 'undefined') {\n                \/\/ Gunakan base url dari unpkg untuk sinkronisasi library dan font\n                figlet.defaults({ fontPath: 'https:\/\/unpkg.com\/figlet@1.8.0\/fonts' });\n                renderFiglet();\n            } else {\n                \/\/ Polling mechanism: wait for CDN script to load async in sandboxed environments\n                let attempts = 0;\n                let checkInterval = setInterval(function() {\n                    if (typeof figlet !== 'undefined') {\n                        clearInterval(checkInterval);\n                        figlet.defaults({ fontPath: 'https:\/\/unpkg.com\/figlet@1.8.0\/fonts' });\n                        renderFiglet();\n                    } else if (attempts >= 20) { \/\/ Max wait ~2 seconds\n                        clearInterval(checkInterval);\n                        displayEl.textContent = 'Error: Figlet library takes too long to load. Please refresh the page.';\n                    }\n                    attempts++;\n                }, 100);\n            }\n        }\n\n        \/\/ Expose Global Functions for Buttons\n        window.copyASCII = function(asCodeBlock) {\n            let textToCopy = displayEl.textContent;\n            if (textToCopy === 'Type something cool...' || textToCopy.includes('Error loading') || textToCopy.includes('takes too long')) return;\n\n            \/\/ Smart Copy feature for Discord\/Slack\n            if (asCodeBlock) {\n                textToCopy = \"```text\\n\" + textToCopy + \"\\n```\";\n            }\n\n            \/\/ Fallback Copy Method (iFrame \/ Cross-browser safe)\n            const textArea = document.createElement(\"textarea\");\n            textArea.value = textToCopy;\n            document.body.appendChild(textArea);\n            textArea.select();\n            \n            try {\n                document.execCommand('copy');\n                showToast(asCodeBlock ? \"Copied as Code Block!\" : \"Art Copied!\");\n            } catch (err) {\n                alert(\"Failed to copy text.\");\n            }\n            \n            document.body.removeChild(textArea);\n        };\n\n        window.clearInput = function() {\n            inputEl.value = '';\n            inputEl.focus();\n            renderFiglet();\n        };\n\n        function showToast(message) {\n            const toast = document.getElementById('nt-toast');\n            toast.textContent = message;\n            toast.classList.add('show');\n            setTimeout(() => {\n                toast.classList.remove('show');\n            }, 2500);\n        }\n\n        \/\/ Event Listeners\n        inputEl.addEventListener('input', handleInput);\n        selectEl.addEventListener('change', renderFiglet);\n\n        \/\/ Start App\n        initApp();\n    });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Figlet Text Generator Transform plain text into stunning ASCII art instantly. Your Text 12\/50 Figlet Font Style StandardSlantGhostDoom3D-ASCIIANSI ShadowCybermediumBanner 3BlockStar WarsGraffiti Fetching Font&#8230; Clear Copy as Code Copy Art Copied to clipboard!<\/p>\n","protected":false},"featured_media":0,"template":"","meta":[],"class_list":["post-65","tool","type-tool","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tools.sanepo.com\/id\/wp-json\/wp\/v2\/tool\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.sanepo.com\/id\/wp-json\/wp\/v2\/tool"}],"about":[{"href":"https:\/\/tools.sanepo.com\/id\/wp-json\/wp\/v2\/types\/tool"}],"wp:attachment":[{"href":"https:\/\/tools.sanepo.com\/id\/wp-json\/wp\/v2\/media?parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}