متن‌آرایی آنلاین — بنویس، استایل بده، عکس بگیر ⚡

اجرا: fontwow.github.io

ابزار وب متن‌آرایی، مخصوص موبایل — متن بنویس، فونت و استایل انتخاب کن، و خروجی عکس بگیر یا کپی کن.

بدون نصب، بدون حساب کاربری، کاملاً رایگان و سمت کاربر (client-side). هیچ داده‌ای به سرور فرستاده نمی‌شود و همه‌چیز (طرح‌های ذخیره‌شده، تنظیمات، فونت‌های دلخواه) در localStorage مرورگر خودت می‌ماند.

• ده‌ها فونت آماده، دسته‌بندی‌شده بر اساس زبان: فارسی، عربی، انگلیسی، ژاپنی، کره‌ای، چینی، روسی، هندی و بیشتر
• آپلود فونت دلخواه خودت (فرمت‌های ttf / otf / woff / woff2) — به‌صورت محلی بارگذاری و در گالری فونت‌هایت ذخیره می‌شود
• فرم «پیشنهاد فونت» در بخش حمایت مالی، برای درخواست اضافه‌شدن فونت جدید

• بولد، ایتالیک، زیرخط
• سایه، دورخط با ضخامت قابل تنظیم
• شفافیت متن

• چند استایل پیش‌فرض: ساده، جعبه‌ی رنگی، زیرخط ضخیم، قاب، شیشه‌ای (glass)

• افکت گرادیان (چند گرادیان رنگی) و افکت نئون روی متن
• تب «قالب‌ها» با پیش‌نمایش زنده‌ی پس‌زمینه: ترکیب‌های آماده‌ی فونت + رنگ + جعبه + پس‌زمینه + افکت برای شروع سریع

• افزودن لایه‌های متن مستقل روی بوم (دکمه‌ی ＋ Aa)
• افزودن لایه‌ی عکس/استیکر دلخواه از گالری گوشی (دکمه‌ی ＋ کنار آیکون عکس)
• جابجایی با کشیدن (drag)، چرخش با دستگیره‌ی چرخش، تغییر اندازه (برای لایه‌ی عکس)، ویرایش متن با دابل‌کلیک، حذف با ✕

• اندازه‌ی فونت، فاصله‌ی حروف، فاصله‌ی خطوط
• چیدمان متن (راست / وسط / چپ) و حاشیه
• نسبت ابعاد خروجی: آزاد، استوری ۹:۱۶، مربعی ۱:۱، پست عمودی ۴:۵، لندسکیپ ۱۶:۹

• رنگ متن دلخواه
• پس‌زمینه: رنگ ساده، گرادیان، قالب‌های آماده به تفکیک دسته، یا آپلود عکس دلخواه خودت
• فیلتر روی عکس پس‌زمینه: روشنایی، کنتراست، بلور، سیاه‌وسفید

• خروجی PNG با کیفیت بالا (خروجی همیشه تمیز است — هیچ عنصری از رابط کاربری داخل عکس نمی‌افتد)
• کپی مستقیم عکس در کلیپ‌بورد
• کپی متن ساده
• ذخیره‌ی طرح‌ها در گالری داخل برنامه برای استفاده‌ی بعدی

• تم تیره‌ی بنفش با پس‌زمینه‌ی متحرک (aurora) و انیمیشن‌های SVG — لوگو، تب‌ها، شیت‌ها، اسلایدرها و نوتیفیکیشن‌ها همه انیمیشن دارند
• رنگ تم قابل انتخاب — کل رابط کاربری (دکمه‌ها، درخشش‌ها، اسلایدرها، لوگو) با رنگ انتخابی شما هماهنگ می‌شود
• تمام آیکون‌ها SVG دست‌ساز هستند؛ هیچ کتابخانه‌ی UI اضافه‌ای استفاده نشده
• احترام به prefers-reduced-motion برای کاربرانی که انیمیشن نمی‌خواهند

از آیکون تنظیمات در بالای صفحه قابل دسترسی است:

• رنگ تم برنامه — انتخاب از ۸ رنگ آماده
• زبان برنامه — چندزبانه؛ فعلاً فارسی و English پشتیبانی می‌شوند. با تغییر زبان، جهت صفحه (RTL/LTR) هم به‌صورت خودکار عوض می‌شود
• ارتباط با ما و لینک مخزن متن‌باز
• بازگردانی تنظیمات به حالت پیش‌فرض

تمام متن‌های رابط کاربری در فایل src/strings.js نگه‌داری می‌شوند و بر اساس کلیدهای مشترک بین زبان‌ها تعریف شده‌اند. برای افزودن زبان جدید:

1. یک آبجکت جدید با کد زبان (مثلاً ar) به STRINGS در src/strings.js اضافه کن و همه‌ی کلیدهای موجود در fa/en را برایش ترجمه کن.
2. دکمه‌ی انتخاب زبان مربوطه را در بخش تنظیمات (src/App.jsx) اضافه کن.
3. اگر زبان جدید راست‌به‌چپ است، آن را در منطق تعیین dir (در src/App.jsx) لحاظ کن.

انتخاب زبان کاربر در localStorage (کلید fontwow_app_settings_v1) ذخیره و در بازدیدهای بعدی بازیابی می‌شود.

npm install
npm run dev      # سرور توسعه
npm run lint     # لینت با oxlint
npm run build    # ساخت نسخه‌ی نهایی در dist/
npm run preview  # پیش‌نمایش نسخه‌ی buildشده

خروجی build با گیت‌هاب اکشن به‌صورت خودکار روی GitHub Pages منتشر می‌شود.

src/
  App.jsx      رابط کاربری اصلی و منطق برنامه
  App.css      استایل‌ها و انیمیشن‌ها (design tokens)
  icons.jsx    مجموعه آیکون‌های SVG دست‌ساز + لوگوی متحرک
  fonts.js     تعریف فونت‌ها، دسته‌بندی‌ها، پس‌زمینه‌ها و قالب‌ها
  strings.js   متن‌های چندزبانه (فارسی/انگلیسی)
  index.css    توکن‌های طراحی و استایل‌های پایه
  main.jsx     نقطه‌ی ورود React

عنصر بوم (.stage-inner) مستقیماً با html-to-image به PNG تبدیل می‌شود. هیچ عنصر تزئینی یا UI نباید داخل این عنصر رندر شود وگرنه وارد عکس خروجی کاربر می‌شود. تمام افکت‌های ظاهری (aurora، درخشش، قاب) به‌صورت sibling خارج از آن پیاده شده‌اند.

• React 19 + Vite
• html-to-image برای تبدیل طرح به PNG
• فونت‌ها از Google Fonts
• بدون هیچ کتابخانه‌ی UI یا آیکون — همه‌چیز CSS و SVG خالص

منتشر شده تحت مجوز GPL-3.0 — استفاده، تغییر و توسعه‌ی آزاد، با رعایت شرایط این مجوز.