وقتی متن فارسی در صفحه به‌هم‌ریخته دیده می‌شود، اولین علت الزاماً فایل فونت نیست. جهت متن، کاراکترهای ورودی، عرض ستون، ارتفاع خط و زمان دریافت فونت هرکدام می‌توانند روی نتیجه اثر بگذارند. نسخهٔ قبلی این مقاله یک نسخهٔ مشخص از وزیرمتن را راه‌حل عمومی معرفی می‌کرد و می‌گفت مشکلات تقریباً حل شده‌اند. چنین نتیجه‌ای به بررسی متن و محیط واقعی نیاز دارد. راه بهتر این است که نشانهٔ مشکل را دقیق ثبت کنیم و بعد سراغ عامل مرتبط برویم.
برای مثال، جابه‌جایی پرانتز کنار یک نام انگلیسی معمولاً به مسئلهٔ متن دوجهته مربوط است؛ تغییر فونت لزوماً آن را حل نمی‌کند. شکستن عنوان طولانی به سه خط ممکن است به عرض و اندازهٔ قلم مرتبط باشد. مربع خالی به احتمال وجود نداشتن glyph اشاره می‌کند. این نشانه‌ها یکسان نیستند و نسخهٔ یکسانی هم ندارند. در یک گزارش فنی، screenshot همراه با متن دقیق و مرحلهٔ بارگذاری از عبارت کلی «فونت فارسی مشکل دارد» سودمندتر است.
کاراکتر، شکل و نمایش را جدا بررسی کنید
کد کاراکتر در متن با شکل نمایش آن در فونت فرق دارد. دو رشته ممکن است ظاهری شبیه داشته باشند ولی از حروف متفاوتی استفاده کنند؛ مثلاً شکل عربی و فارسی بعضی حروف در جست‌وجو و مرتب‌سازی اثر دارد. فونت خوب نمی‌تواند قرارداد دادهٔ نامعلوم را اصلاح کند. در ورود محتوا باید معلوم باشد کدام تبدیل‌های نوشتاری مجازند و کجا باید دادهٔ اصلی حفظ شود. برای نام برند، شناسه یا نقل‌قول دقیق، تبدیل بی‌حساب ممکن است معنای مورد نیاز را تغییر دهد.
اعداد نیز باید بر اساس نقششان انتخاب شوند. عدد یک شناسهٔ فنی با عددی در متن توضیحی یکسان نیست. تبدیل نمایشی همهٔ رقم‌ها به فارسی ممکن است در کپی کردن یک فرمان یا شناسه مشکل ایجاد کند. اگر محصول به رقم فارسی نیاز دارد، این قرارداد را در داده یا لایهٔ نمایش با دامنهٔ مشخص اجرا کنید. فونت را مسئول حدس زدن نقش همهٔ عددها نکنید. انتخاب نوع رقم باید با نیاز کاربر و کاربرد متن هماهنگ باشد.
یک صفحهٔ تشخیص بدون وابستگی فونت خارجی
نمونهٔ زیر عمداً از فایل فونت خارجی استفاده نمی‌کند. آن را با نام persian-text-check.html ذخیره کنید و باز کنید. هدف این نمونه بررسی ساختار، جهت متن و رفتار رشته‌های ترکیبی با فونت سیستم است. HTML و CSS در یک فایل قرار دارند و تصویر، package یا API لازم نیست. پس اگر در این مرحله ترتیب متن درست نبود، می‌توانید پیش از افزودن dependency تازه، قرارداد markup و محتوا را مرور کنید.
<!doctype html>
<html lang="fa" dir="rtl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>بررسی متن فارسی</title>
<style>
body{font-family:system-ui,sans-serif;line-height:1.9;margin:2rem auto;padding:1rem;max-width:44rem;color:#182138;background:#f7f8fb}
.text-card{background:white;border:1px solid #aab2c5;border-radius:12px;padding:1.2rem;margin-block:1rem}
.text-card h2{line-height:1.5;margin-block-start:0}
.technical{font-family:monospace;overflow-wrap:anywhere}
</style>
<main>
<h1>نمونه‌های متن ترکیبی</h1>
<article class="text-card">
<h2>عنوان فارسی طولانی برای بررسی شکست خط در ستون باریک</h2>
<p>نام فایل در <bdi lang="en">Visual Studio Code</bdi> نمایش داده می‌شود؛ فاصله و نشانه‌های پایان جمله را بررسی کنید.</p>
<p>رقم فارسی: ۱۲۳۴۵ — رقم لاتین: <bdi dir="ltr">12345</bdi></p>
</article>
<article class="text-card">
<h2>رشته فنی در متن فارسی</h2>
<p>شناسه نمونه <span class="technical" dir="ltr">course-2026-demo</span> است. آن را بدون تغییر کپی کنید.</p>
<p>این صفحه از فایل فونت خارجی استفاده نمی‌کند.</p>
</article>
</main>
</html>
دو کارت نمونه به دو موقعیت متفاوت مربوط‌اند: یک عنوان و توضیح معمول فارسی، و یک رشتهٔ فنی چپ‌به‌راست داخل جمله. عنصر bdi برای جدا کردن نام انگلیسی و span دارای dir برای رشتهٔ مشخص استفاده شده‌اند. هر class در CSS متناظر HTML دارد. برای تغییر آزمایشی فونت، کافی است مقدار font-family روی body را تغییر دهید؛ ساختار کارت‌ها و دادهٔ متن باید همان بماند تا تفاوت نتیجه به تغییرهای هم‌زمان نسبت داده نشود.
عنوان طولانی عمداً در نمونه وجود دارد. به شکست خط و فاصلهٔ سطرها توجه کنید، اما نتیجه را به همان عرض صفحه محدود بدانید. نام خانوادگی بلند، اعراب و نشانه‌های نگارشی واقعی محصول نیز باید در مجموعهٔ متن‌های نمونه قرار بگیرند. یک جملهٔ کوتاه با حروف ساده، مسئلهٔ همهٔ صفحه‌ها را نمایندگی نمی‌کند. انتخاب متن تشخیص باید از محتوای واقعی بیاید و فقط برای زیبا شدن screenshot نباشد.
جهت نوشتار را در HTML مشخص کنید
برای صفحهٔ فارسی، lang و dir نقش‌های متفاوتی دارند. lang زبان محتوا را معرفی می‌کند و dir جهت پایهٔ نمایش را تعیین می‌کند. قرار دادن text-align:right جای dir را نمی‌گیرد. ممکن است متن از سمت راست تراز شود، ولی ترتیب بخش‌های فارسی و انگلیسی همچنان نامناسب باشد. راهنمای W3C دربارهٔ متن دوجهته توضیح می‌دهد کجا باید بخش‌های با جهت متفاوت جدا شوند. این قرارداد در نام کاربر، عنوان فایل و متن تولیدشدهٔ بیرونی اهمیت دارد.
استفاده از علامت‌های نامرئی جهت بدون مستند کردنشان، ویرایش محتوا را سخت می‌کند. وقتی امکان markup معنایی وجود دارد، نقش جهت را در همان ساختار روشن کنید. اگر داده به محیطی بدون HTML منتقل می‌شود، نیاز آن محیط را جدا بررسی کنید. راه‌حل مناسب یک صفحهٔ وب لزوماً برای فایل CSV یا پیام متنی همان نیست. تشخیص محل نمایش از دست‌کاری پراکندهٔ رشته‌ها جلوگیری می‌کند و به نویسندهٔ محتوا هم نشان می‌دهد چه چیزی قابل ویرایش است.
انتخاب فونت با مجوز و مجموعهٔ حروف
پس از روشن شدن ساختار، فایل فونت را با مجوز استفاده و پوشش کاراکترها انتخاب کنید. نام آشنا به‌تنهایی کافی نیست؛ باید همان فایل و نسخه‌ای که واقعاً دریافت می‌کنید بررسی شود. برای وزیرمتن، مخزن رسمی Vazirmatn مرجع فایل‌ها و مجوز است. این مقاله یک نسخهٔ حدسی را «جدیدترین» معرفی نمی‌کند. فایل نهایی را با مسیر و اطلاعات نسخه در پروژه ثبت کنید تا تعویض بعدی قابل پیگیری باشد.
وزن فونت نیز بخشی از انتخاب است. اگر فقط فایل Regular دارید ولی CSS وزن سنگین می‌خواهد، نتیجه ممکن است با وزن طراحی‌شدهٔ واقعی متفاوت باشد. برای عنوان‌ها و دکمه‌ها، نیاز وزن را از طراحی استخراج کنید و فایل متناظر را داشته باشید. دریافت همهٔ وزن‌ها بدون مصرف هم هزینهٔ شبکه ایجاد می‌کند. مجموعهٔ کوچک و واقعی معمولاً از پوشش فرضی همهٔ حالت‌ها قابل نگهداری‌تر است؛ به شرط اینکه نیاز محتوا و نقش متن بررسی شده باشد.
font-display تصمیم دربارهٔ زمان نمایش است
@font-face ارتباط نام family و منبع فایل را تعریف می‌کند. مسیر فایل باید به همان asset واقعی اشاره کند و مرورگر بتواند آن را دریافت کند. مرجع @font-face descriptorهای مربوط را توضیح می‌دهد. اگر فونت دریافت نمی‌شود، ابتدا مسیر، نوع فایل و تنظیم پاسخ را بررسی کنید. تغییر line-height یا تعویض نام family مشکل دریافت شبکه را حل نمی‌کند؛ هر مرحله باید با نشانهٔ خودش بررسی شود.
font-display نحوهٔ برخورد با زمان بارگذاری را تحت تأثیر قرار می‌دهد. انتخاب swap می‌تواند متن را زودتر با fallback نشان دهد و بعد شکل آن تغییر کند. این تغییر گاهی شکست خط و ارتفاع کارت را عوض می‌کند. مرجع font-display رفتار گزینه‌ها را شرح می‌دهد. پس «swap همیشه بهترین است» نتیجهٔ دقیقی نیست؛ باید اهمیت نمایش سریع، تغییر چیدمان و شباهت fallback با فونت اصلی را کنار هم دید.
Variable Font و Subsetting را با نیاز واقعی بسنجید
Variable Font چند حالت را در یک فایل و محورهای قابل تغییر ارائه می‌کند، اما حجم نهایی آن را باید با فایل‌های ثابت واقعاً مصرف‌شده مقایسه کرد. اگر پروژه فقط یک وزن لازم دارد، مجموعهٔ مقایسه با پروژه‌ای که چند وزن دارد متفاوت است. تصمیم را بر اساس اندازهٔ فایل‌های منتخب و کیفیت نمایش بگیرید. اسم فناوری جدید، دلیل کافی برای کمتر بودن حجم در هر پیکربندی نیست و نباید به وعدهٔ ثابت تبدیل شود.
Subsetting یعنی محدود کردن مجموعهٔ glyphهای فایل برای یک دامنهٔ مشخص. خطر آن زمانی دیده می‌شود که محتوای سایت بعداً تغییر کند. صفحهٔ ثابت با متن معلوم با مجله‌ای که نویسنده هر روز نام و نشانهٔ تازه وارد می‌کند تفاوت دارد. پیش از حذف حروف، دامنهٔ متن و مجوز تغییر فایل را بررسی کنید. صرفه‌جویی احتمالی در حجم نباید به مربع‌های خالی برای محتوای آینده منجر شود. برای متن باز، fallback و پوشش لازم اهمیت بیشتری دارند.
ارتفاع خط را با متن فارسی مرور کنید
اعداد لاتین یا یک تیتر انگلیسی، نمونهٔ مناسبی برای تعیین line-height متن فارسی نیستند. اتصال حروف، نشانه‌های بالا و پایین و طول سطر بر خواندن اثر دارند. ارتفاع ثابت کارت را نیز با احتیاط انتخاب کنید؛ افزایش اندازهٔ متن توسط کاربر ممکن است محتوای آن را از محدوده بیرون ببرد. در نمونهٔ این مقاله ارتفاع کارت ثابت نشده است. این انتخاب اجازه می‌دهد محتوای طولانی‌تر به‌طور طبیعی فضا بگیرد، بدون اینکه بخشی از جمله بریده شود.
برای ادامهٔ بحث دربارهٔ نمایش محتوا، راهنمای کنتراست و خوانایی مرتبط است. در پروژه، مجموعه‌ای از متن‌های واقعی با عنوان طولانی، رقم، نام انگلیسی و نشانهٔ نگارشی نگه دارید. ساختار را با فونت سیستم مرور کنید و بعد همان مجموعه را با فایل منتخب ببینید. هر اصلاح را به نشانهٔ مشخص وصل کنید؛ این کار مشخص می‌کند مشکل از داده، جهت، چیدمان یا منبع فونت بوده و از تعویض‌های تصادفی جلوگیری می‌کند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!