我如何使用 HTML、CSS 和 JavaScript 构建免费阿拉伯书法生成器

Source: Dev.to

Introduction

阿拉伯书法是世界上最美的艺术形式之一。我想创建一个简单的网页工具，让任何人都能从英文文本生成阿拉伯书法——无需设计技能。在本文中，我将分享如何仅使用 HTML、CSS 和原生 JavaScript 构建阿拉伯书法生成器。

Challenges

• Right-to-Left (RTL) text rendering — 阿拉伯语从右向左书写
• Font loading — 阿拉伯书法字体文件体积较大
• Translation — 将英文输入转换为阿拉伯文字
• Export options — 用户需要下载他们的作品

Implementation

Rendering

• HTML5 Canvas 用于渲染书法
• Vanilla JavaScript（无框架）处理输入、翻译和绘制
• Google Fonts 提供阿拉伯字体
• Canvas API 用于 PNG/JPG 导出

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 — 最初只上线了 3 种字体，现在已经有 11 种。
• Performance matters — 阿拉伯字体很大，惰性加载很有帮助。
• User feedback is gold — 真正的用户发现了我从未想象到的 bug。

Live Demo

你可以在这里查看在线工具：Arabic Calligraphy Generator

Future Plans

• 更多书法风格（如 Diwani、Maghrebi）
• 自定义颜色选项
• 社交分享功能

Conclusion

感谢阅读！如果你对构建多语言网页工具有任何疑问，欢迎在下方留言。