Text2Scribble

Transform Digital Text into Authentic Handwritten Documents

Features • Getting Started • Usage • Shortcuts • Contributing • License

Privacy First | 100% Client-Side | No Server Required

---

About

Text2Scribble is a powerful browser-based application that transforms digital text into authentic handwritten documents. Create high-quality, realistic handwritten output that looks like it was written with a pen on paper—perfect for assignments, notes, letters, or creative projects.

Your Privacy Matters: All processing happens locally in your browser. Your text never leaves your device or touches any server.

Key Features

Scribble Style Presets

Choose from 4 unique handwriting styles, each with distinct characteristics:

Style	Description
Clean Doodle	Neat and legible handwriting with minimal variation
Rough Sketch	Quick, energetic strokes with visible imperfections
Artistic Scribble	Elegant, flowing handwriting with artistic flair
Child-like Scribble	Playful, irregular handwriting with larger variations

Advanced Variation Controls

• Randomness Slider: Adjust the jitter/variation intensity from 0-100%
• Stroke Density: Choose between Light, Medium, or Heavy ink density
• Adaptive Mode: Automatically adjusts variations based on text length for optimal readability
• Per-Word Variations: Each word gets unique rotation, translation, scale, and pressure simulation

Handwriting & Typography

• Multiple Fonts: Choose from 4 curated handwriting fonts (Homemade Apple, Liu Jian Mao Cao, Long Cang, Caveat)
• Custom Fonts: Upload your own .ttf or .otf font files for personalized handwriting
• Typography Control: Fine-tune font size (8-30pt), word spacing, letter spacing, and vertical alignment
• Custom Ink Colors: Select from preset colors (Blue, Black, Dark Blue, Red) or choose any custom color

Paper & Effects

• Paper Styles: Toggle between ruled paper, blank sheets, or upload custom background textures
• Margin Control: Show or hide the red left margin line
• Realism Effects:
  • Shadows: Adds subtle depth to ink strokes
  • Ink Bleed: Simulates pen ink absorption into paper
  • Pressure Simulation: Varies opacity per word for natural pen pressure effect

Multi-Language Support

• RTL Language Detection: Automatic support for Arabic, Hebrew, and other right-to-left languages
• Script Detection: Recognizes Chinese, Japanese, Korean, Hindi, and more
• Emoji Support: Full emoji rendering with fallback fonts

Productivity Tools

• Live Preview: Real-time rendering as you type
• Auto-Save: Automatic draft saving to local storage
• Undo/Redo: Full history support with keyboard shortcuts
• Export Options: Generate high-resolution PNG images (Normal, High, Ultra)
• Batch Actions: Copy to clipboard or download all pages at once
• Performance Optimized: Preview virtualization for long documents

UI Showcase

Light Mode

Dark Mode

Getting Started

Prerequisites

You need a modern web browser. No backend, database, or complex setup required!

Installation

1️⃣ Clone the repository

git clone https://github.com/RishiBuilds/text2scribble.git
cd text2scribble

2️⃣ Run the application

Since this is a static web app, you can open index.html directly. For the best experience (avoiding CORS issues), use a local server:

Using npx (Recommended)

npx serve

Using Python

# Python 3
python -m http.server 8000

Using VS Code

Install the "Live Server" extension and click "Go Live"

3️⃣ Access the App

Open your browser and navigate to http://localhost:8000 (or the port shown in your terminal)

That's it! Start converting text to handwriting!

📖 Usage Guide

1️⃣ Entering Text

• Click anywhere on the virtual paper to focus the input
• Type or paste your text—multi-page content is handled automatically
• Monitor real-time stats (characters, words, lines) at the bottom

2️⃣ Customizing Scribble Style

• Scribble Style: Select from Clean Doodle, Rough Sketch, Artistic, or Child-like
• Stroke Density: Adjust ink weight (Light, Medium, Heavy)
• Randomness: Use the slider to control variation intensity (0-100%)
• Adaptive Mode: Toggle on for automatic optimization based on text length

3️⃣ Customizing Appearance

Use the sidebar controls to personalize your handwriting:

• Handwriting Options: Change font family or upload custom fonts
• Page & Text Options: Adjust font size (8-30pt) and ink color
• Spacing Options: Fine-tune vertical position, word spacing, and letter spacing

4️⃣ Exporting

1. Click the Generate Image button
2. Review generated pages in the Output section (shows scribble style used)
3. Download as PNG or Copy to clipboard

---

Keyboard Shortcuts

Boost your productivity with these shortcuts:

Shortcut	Action
Ctrl + Enter	Generate Image
Ctrl + S	Download All / Save
Ctrl + Z	Undo last change
Ctrl + Y / Ctrl + Shift + Z	Redo change

---

Creating Custom Fonts

Want to use your actual handwriting?

1. Visit Calligraphr
2. Download their template and fill it with your handwriting
3. Scan/upload the template to generate a .ttf file
4. In Text2Scribble, select Upload your handwriting font and choose your file

Now you have a digital version of your own handwriting!

Tech Stack

Component	Technology
Core	HTML5, CSS3, Vanilla JavaScript (ES6+)
Styling	CSS Variables, Flexbox/Grid, Glassmorphism
Rendering	html2canvas for DOM-to-Image conversion
Storage	Browser localStorage for state persistence
Variations	Seeded PRNG for consistent handwriting variations

---

Project Structure

text2scribble/
├── css/
│   ├── main.css              # Base layout, scribble styles, and typography
│   └── ui-controls.css       # Components, buttons, toasts, and switches
├── images/
│   ├── app_ui_dark.png       # Dark theme interface
│   └── app_ui_light.png      # Light theme interface
├── index.html                # Main application structure
├── script.js                 # Core logic, variation engine, and rendering
├── favicon.ico               # Application icon
└── text2scribble-output.png  # Sample output image

Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

How to Contribute

1. Fork the project
2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

Contribution Ideas

• Add new scribble style presets
• Add new handwriting fonts
• Improve multi-language support
• Improve mobile responsiveness
• Fix bugs and improve performance
• Enhance documentation

---

License

Distributed under the MIT License. See LICENSE for more information.

---

Support

If you find this project helpful, please consider:

⭐ Star this repo if it helps you!
Report bugs or suggest features

---

Made with ❤️ by RishiBuilds

Back to Top