Editing Pocket WebApps/Rune converter


= Pocket Web App - Runes converter Documentation =
This document provides an overview of the Pocket Runes web application, a simple, client-side tool for converting English text into the Younger Futhark runic alphabet. The application is designed to be lightweight and efficient, with all core functionality handled in vanilla JavaScript.

=== 1. Overview and Key Features ===
The app's primary purpose is to provide a real-time translation from a user's input into a runic script. It has a clean, focused user interface with the following key features:

* '''Real-time Translation:''' As a user types in the input box, the runic translation is rendered instantly in the output area.
* '''Younger Futhark Alphabet:''' The app uses the Younger Futhark runic alphabet for all conversions. It handles both lowercase and uppercase Latin letters, along with common numbers and punctuation.
* '''Image Export:''' The translated runic text can be saved as a high-quality PNG image with a transparent background, suitable for use in other projects or documents.

=== 2. Core Functionality ===
The application's logic is driven by a single JavaScript file. The process involves listening for input events, performing the translation, and updating the output in the DOM.

==== The <code>runesMap</code> Data Structure ====
The heart of the translation logic is a JavaScript object called <code>runesMap</code>. This object serves as a dictionary, mapping each character from the English alphabet (and other common symbols) to its corresponding runic character. This approach allows for quick and efficient lookups without complex conditional statements.
 <code>const runesMap = {
     'a': 'ᚬ', 'b': 'ᛒ', 'c': 'ᛣ', 'd': 'ᛏ', 'e': 'ᚬ', 'f': 'ᚠ', 'g': 'ᚴ',
     'h': 'ᚼ', 'i': 'ᛁ', 'j': 'ᛁ', 'k': 'ᛣ', 'l': 'ᛚ', 'm': 'ᛘ', 'n': 'ᚾ',
     'o': 'ᚬ', 'p': 'ᛔ', 'q': 'ᛣ', 'r': 'ᚱ', 's': 'ᛋ', 't': 'ᛏ', 'u': 'ᚢ',
     'v': 'ᚠ', 'w': 'ᚠ', 'x': 'ᛋ', 'y': 'ᛁ', 'z': 'ᛋ',
     
     // Mapping for uppercase letters
     'A': 'ᚬ', 'B': 'ᛒ', 'C': 'ᛣ', 'D': 'ᛏ', 'E': 'ᚬ', 'F': 'ᚠ', 'G': 'ᚴ',
     'H': 'ᚼ', 'I': 'ᛁ', 'J': 'ᛁ', 'K': 'ᛣ', 'L': 'ᛚ', 'M': 'ᛘ', 'N': 'ᚾ',
     'O': 'ᚬ', 'P': 'ᛔ', 'Q': 'ᛣ', 'R': 'ᚱ', 'S': 'ᛋ', 'T': 'ᛏ', 'U': 'ᚢ',
     'V': 'ᚠ', 'W': 'ᚠ', 'X': 'ᛋ', 'Y': 'ᛁ', 'Z': 'ᛋ',
     
     // Mapping for numbers and punctuation
     '1': 'ᛏ', '2': 'ᚢ', '3': 'ᚦ', '4': 'ᚠ', '5': 'ᚱ', '6': 'ᚴ', '7': 'ᚼ',
     '8': 'ᚾ', '9': 'ᛁ', '0': 'ᛋ',
     ' ': ' ', // Space
     '.': ':', ',': ':', '!': '.', '?': '.', "'": '.', '"': '.'
 };</code>

==== The <code>save as PNG</code> Function ====
To enable the image export feature, the app uses the <code>html2canvas</code> library. When the "Save as PNG" button is clicked, a temporary <code>div</code> element is created, populated with the runic text, and then converted to a canvas. This canvas is then saved as a PNG. The <code>backgroundColor: null</code> option is crucial for generating a transparent image.
 <code>// This is a snippet of the event listener for the save button.
 saveButton.addEventListener('click', () => {
     // A temporary, off-screen div is created with the runic text.
     const tempDiv = document.createElement('div');
     tempDiv.textContent = output.textContent;
     tempDiv.style.color = '#036';
     tempDiv.style.fontFamily = 'serif';
     tempDiv.style.fontSize = '100px'; 
     tempDiv.style.padding = '20px';
     tempDiv.style.backgroundColor = 'transparent'; 
     tempDiv.style.whiteSpace = 'pre';
     tempDiv.style.position = 'absolute';
     tempDiv.style.left = '-9999px';
 
     document.body.appendChild(tempDiv);
 
     // html2canvas converts the div to an image.
     html2canvas(tempDiv, {
         backgroundColor: null // This option ensures a transparent background.
     }).then(canvas => {
         // The canvas is converted to an image data URL.
         const image = canvas.toDataURL('image/png');
         const link = document.createElement('a');
         link.href = image;
         link.download = 'runes.png';
         link.click();
         
         // The temporary div is removed from the DOM.
         document.body.removeChild(tempDiv);
     });
 });</code>

=== 3. Usage and Technologies ===
To use the app, simply open the HTML file in a web browser. The interface consists of a text input box and an output area.

The app is built with the following technologies:

* '''HTML5:''' Provides the basic document structure.
* '''CSS3:''' Styles the interface for a clean, modern look.
* '''JavaScript:''' Powers all of the application's interactive logic.
* '''<code>html2canvas.js</code>:''' An external library used specifically for the HTML-to-PNG conversion feature.