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.

Links

• Text 2 Runes - Version 1 - A very simple conversion outputting the A character as ᚨ
• Text 2 Runes - Version 2 - Extended from 'version 1' with html2canvas.js library to be able to save as PNG image file.

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 runesMap Data Structure

The heart of the translation logic is a JavaScript object called runesMap. 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.

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
     '.': ':', ',': ':', '!': '.', '?': '.', "'": '.', '"': '.'
 };

The save as PNG Function

To enable the image export feature, the app uses the html2canvas library. When the "Save as PNG" button is clicked, a temporary div element is created, populated with the runic text, and then converted to a canvas. This canvas is then saved as a PNG. The backgroundColor: null option is crucial for generating a transparent image.

// 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);
     });
 });

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.
• html2canvas.js: An external library used specifically for the HTML-to-PNG conversion feature.