How I Built a Free Arabic Calligraphy Generator with HTML, CSS & JavaScript

Source: Dev.to

Introduction

Arabic calligraphy is one of the most beautiful art forms in the world. I wanted to create a simple web tool that lets anyone generate Arabic calligraphy from English text — no design skills needed. In this post, I’ll share how I built the Arabic Calligraphy Generator using just HTML, CSS, and vanilla JavaScript.

Challenges

• Right-to-Left (RTL) text rendering — Arabic reads from right to left
• Font loading — Arabic calligraphy fonts are large files
• Translation — Converting English input to Arabic script
• Export options — Users need to download their creations

Implementation

Rendering

• HTML5 Canvas for rendering the calligraphy
• Vanilla JavaScript (no frameworks) to handle input, translation, and drawing
• Google Fonts for Arabic typefaces
• Canvas API for PNG/JPG export

Important CSS

.arabic-text {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Naskh Arabic', serif;
}

Export Function

function exportAsImage(format) {
  const canvas = document.getElementById('calligraphy-canvas');
  const link = document.createElement('a');
  link.download = `calligraphy.${format}`;
  link.href = canvas.toDataURL(`image/${format}`);
  link.click();
}

Lessons Learned

• Start simple — launched with 3 fonts, now it has 11.
• Performance matters — Arabic fonts are heavy; lazy loading helps.
• User feedback is gold — Real users found bugs I never imagined.

Live Demo

You can check out the live tool here: Arabic Calligraphy Generator

Future Plans

• More calligraphy styles (Diwani, Maghrebi)
• Custom color options
• Social sharing features

Conclusion

Thanks for reading! If you have questions about building multilingual web tools, drop a comment below.