eqtyper.html

---
layout: default
title: Plain Text Equation Typer
description: Type equations using plain text, then paste them anywhere (even sites that don't support math formatting such as Discord, Facebook, WhatsApp, etc).
categories: [tools]
---
<style>
        body {
            zoom: 125%;
        }
        
        table, tr, td {
            border: none;
        }

        textarea {
            opacity: 0;
        }

        #textbox {
            width: 100%;
        }
        
        button {
            font-family: inherit;       
        }
        
        .inserter {
            font-weight: bold;
            font-family: Arial, sans-serif;
        }
    </style>
    <table>
        <tr>
            <td>
                <button id="copier" width="50%">Copy</button>
                <button id="clearer" width="50%">Clear</button>
            </td>
            <td>
                <input type="text" name="textbox" id="textbox" placeholder="Enter equation here" spellcheck="false">
            </td>
        </tr>
        <tr>
            <td><b>Subscripts</b></td>
            <td>
                <button class="inserter" title="Subscript 1">₁</button>
                <button class="inserter" title="Subscript 2">₂</button>
                <button class="inserter" title="Subscript 3">₃</button>
                <button class="inserter" title="Subscript 4">₄</button>
                <button class="inserter" title="Subscript 5">₅</button>
                <button class="inserter" title="Subscript 6">₆</button>
                <button class="inserter" title="Subscript 7">₇</button>
                <button class="inserter" title="Subscript 8">₈</button>
                <button class="inserter" title="Subscript 9">₉</button>
                <button class="inserter" title="Subscript 0">₀</button>
                <button class="inserter" title="Subscript Minus">₋</button>
            </td>
        </tr>
        <tr>
            <td>
                <b>Superscripts</b>
            </td>
            <td>
                <button class="inserter" title="Superscript 1">¹</button>
                <button class="inserter" title="Superscript 2">²</button>
                <button class="inserter" title="Superscript 3">³</button>
                <button class="inserter" title="Superscript 4">⁴</button>
                <button class="inserter" title="Superscript 5">⁵</button>
                <button class="inserter" title="Superscript 6">⁶</button>
                <button class="inserter" title="Superscript 7">⁷</button>
                <button class="inserter" title="Superscript 8">⁸</button>
                <button class="inserter" title="Superscript 9">⁹</button>
                <button class="inserter" title="Superscript 0">⁰</button>
                <button class="inserter" title="Superscript Minus">⁻</button>
            </td>
        </tr>
        <tr>
            <td>
                <b>Math/Greek</b>
            </td>
            <td>
                <button class="inserter" title="Plus/Minus">±</button>
                <button class="inserter" title="Square Root">√</button>
                <button class="inserter" title="Not Equal To">≠</button>
                <button class="inserter" title="Less Than or Equal To">≤</button>
                <button class="inserter" title="Greater Than or Equal To">≥</button>
                <button class="inserter" title="Approximately Equal To">≈</button>
                <button class="inserter" title="Theta">θ</button>
                <button class="inserter" title="Alpha">α</button>
                <button class="inserter" title="Pi">π</button>
                <button class="inserter" title="Degree">°</button>
                <button class="inserter" title="Division">÷</button>
                <button class="inserter" title="Multiplication">×</button>
                <button class="inserter" title="Infinity">∞</button>
            </td>
        </tr>
        <tr>
            <td>
                <b>Arrows</b>
            </td>
            <td>
                <button class="inserter" title="Left Arrow">←</button>
                <button class="inserter" title="Right Arrow">→</button>
                <button class="inserter" title="Left-Right Arrow">↔</button>
            </td>
        </tr>
        <tr>
            <td>
                <b>Logic</b>
            </td>
            <td>
                <button class="inserter" title="Element of">∈</button>
                <button class="inserter" title="Not an Element of">∉</button>
                <button class="inserter" title="Exists">∃</button>
                <button class="inserter" title="Does Not Exist">∄</button>
                <button class="inserter" title="For All">∀</button>
                <button class="inserter" title="Negation">¬</button>
                <button class="inserter" title="Superset">⊃</button>
                <button class="inserter" title="Subset">⊂</button>
                <button class="inserter" title="Subset or Equal To">⊆</button>
                <button class="inserter" title="Superset or Equal To">⊇</button>
                <button class="inserter" title="Perpendicular">⊥</button>
                <button class="inserter" title="Logical OR">∨</button>
                <button class="inserter" title="Logical AND">∧</button>
                <button class="inserter" title="Turnstile">⊢</button>
                <button class="inserter" title="Entails">⊨</button>
                <button class="inserter" title="XOR">⊕</button>
                <button class="inserter" title="Equivalent">≡</button>
            </td>
        </tr>
    </table>
    <p>
        This is a simple tool that allows you to type equations using only special characters, 
        which are supported by almost any app or website 
        (such as Twitter/X, Discord, Facebook, WhatsApp, Zoom, etc). 
        Just type your equation in the text box above 
        (clicking the special character buttons when needed) 
        and then click the "Copy" button to copy the equation to your clipboard. 
        You can then paste it anywhere you like.
    </p>
    <textarea id="copyarea" aria-hidden="true"></textarea>
    <script>
        let textfield = document.getElementById("textbox")
        let buttons = document.querySelectorAll(".inserter")
        let copybtn = document.getElementById("copier")
        let clearbtn = document.getElementById("clearer")
        buttons.forEach(btn => {
            btn.addEventListener("click", _e => {
                textfield.value += btn.innerText
                textfield.focus()
            })
        })
        copybtn.addEventListener("click", _e => {
            /* navigator.clipboard.writeText(textfield.value)
                .then(() => alert("copied!"))
                .catch(err => alert("Error: ", err)) */
            let ta = document.getElementById("copyarea")
            ta.value = textfield.value
            ta.focus()
            ta.select()
            ta.setSelectionRange(0, 99999)
            document.execCommand("copy")
            textfield.focus()
        })
        clearbtn.addEventListener("click", _e => {
            textfield.value = ""
            textfield.focus()
        })
    </script>