درود،
مشکلی که گفتی خیلی وقت‌ها توی متون فارسی، مخصوصاً وقتی Justify استفاده می‌کنی، پیش میاد و دلایل خاص خودش رو داره. چون مرورگرها به طور پیش‌فرض برای متن‌های چپ به راست (LTR) بهینه شدن و برای متون راست به چپ (RTL) مثل فارسی، Justify همیشه نتیجه خوبی نمی‌ده.
✍️ چرا فاصله‌های عجیب می‌افته؟
مرورگرها موقع Justify کردن، فاصله بین کلمات رو زیاد می‌کنن تا خط کاملاً پر بشه. ولی توی متون فارسی به‌خاطر:
- استفاده از فونت نامناسب
- شکست اشتباه کلمات فارسی
- وجود نویسه‌های نامرئی یا space نامناسب (مثل U+200C)
این مشکل تشدید میشه.
✅ راه‌حل
1. استفاده از فونت بهینه برای فارسی
فونت مناسب خیلی تاثیر داره. فونت‌هایی مثل:
- IRANSans (یا نسخه‌های رایگان مثل Vazir)
- Vazirmatn
- Tanha
- Sahel
- Shabnam
👈 با فونت‌های انگلیسی مثل Arial یا Tahoma معمولاً مشکل بیشتر میشه.
2. استفاده از text-align: justify با text-justify: inter-word
text { text-align: justify; text-justify: inter-word; }
inter-word باعث میشه فقط بین کلمات فاصله داده بشه نه بین حروف. (در برخی مرورگرها بهتر جواب میده)
3. جلوگیری از جدا شدن حروف یا کلمات خاص
اگر بعضی حروف یا کلمات در فارسی از هم جدا می‌شن، باید از نیم‌فاصله (Zero-Width Non-Joiner) استفاده کنی:
- بجای Space از
U+200C استفاده کن
مثلاً به‌جای می رود بنویس می‌رود
در HTML:
می‌رود
4. استفاده از hyphenation (تجربه‌ای)
در بعضی حالت‌ها می‌تونی از این استفاده کنی (در برخی مرورگرها کار می‌کنه):
.text { hyphens: auto; -webkit-hyphens: auto; direction: rtl; text-align: justify; }
اگر با Elementor کار می‌کنی…
در Elementor بخش استایل متن، بجای فقط justify حتماً کلاس اختصاصی بده و در CSS شخصی این موارد رو تست کن:
.justify-fix { text-align: justify; text-justify: inter-word; direction: rtl; font-family: "Vazirmatn", sans-serif; line-height: 2; word-spacing: normal; letter-spacing: normal; }
