تایپوگرافی

این بخش ۲۸ قاعده دارد و هر کدام نمونه درست و نادرستش را کنار هم نشان می‌دهد. زیر هر نمونه نوشته‌ایم واقعا چه نویسه یا کدی در کار است.

• نیم‌فاصله میان اجزای واژه

  پیشوند، پسوند و هر جزء جدای واژه مرکب با نیم‌فاصله می‌آید: «می‌شود»، «آماده‌ایم»، «ثبت‌نام». با فاصله معمولی، مرورگر ممکن است سطر را همان‌جا بشکند و نیمی از واژه را به سطر بعد بفرستد.

  می‌شود

  ZWNJU+200C

  می شود

  SPACEU+0020

• «ی» و «ک» فارسی

  «ي» و «ك» عربی نویسه‌های دیگری‌اند و در آخر واژه هم شکلشان فرق دارد. جست‌وجوی «کمک» واژه «كمك» را پیدا نمی‌کند، پس پیش از ذخیره، «ي» و «ك» را در ورودی فرم‌ها به «ی» و «ک» فارسی برگردانید.

  کمکی کوچک

  U+06A9 KEHEHU+06CC FARSI YEH

  كمكي كوچك

  U+0643 KAFU+064A YEH

• «ها» و «تر» با نیم‌فاصله

  فرهنگستان «تر» و «ترین» را جدا می‌نویسد، جز در چند واژه مثل «بهتر»، «بیشتر» و «کمتر». «ها» را هم همیشه با نیم‌فاصله می‌نویسیم تا شکل خود واژه دست نخورد.

  بزرگ‌تر

  U+06AF U+200C U+062A

  بزرگتر

  U+06AF U+062Ajoined

• کسره اضافه بعد از «ه» را ننویسید

  بعد از های ناملفوظ کسره اضافه را نمی‌نویسیم، چون خواننده آن را از خود جمله می‌فهمد: «خانه ما»، «بودجه ماهانه». فرهنگستان «هٔ» را توصیه می‌کند، ولی ما نه «هٔ» می‌نویسیم و نه «ه‌ی».

  خانه ما

  U+0647 U+0020 U+0645

  خانه‌ی ما

  U+0647 U+200C U+06CC

• همزه به شیوه فرهنگستان

  فرهنگستان همزه «هیئت»، «مسئول» و «مسئله» را روی کرسی «ی» می‌نویسد، نه «هیأت» و «مسؤول». ولی «مؤسسه» و «تأمین» با «ؤ» و «أ» درست‌اند.

  هیئت‌مدیره

  U+0626 YEH WITH HAMZA ABOVE

  هیأت‌مدیره

  U+0623 ALEF WITH HAMZA ABOVE

• تنوین و اعراب را ننویسید

  اعراب و تنوین را نمی‌نویسیم: «لطفا»، «حتما»، «دقیقا». فرهنگستان تنوین را در نوشته رسمی لازم می‌داند، ولی خواننده این واژه‌ها را بی‌تنوین هم درست می‌خواند.

  لطفا

  U+0627no U+064B

  لطفاً

  U+0627 U+064B

• رقم فارسی در خود متن

  عدد را با Intl.NumberFormat('fa-IR') و شماره فهرست را با list-style-type: persian بسازید. فونت FaNum فقط ظاهر رقم را فارسی می‌کند. نویسه همان رقم لاتین است؛ همین رقم کپی می‌شود و به صفحه‌خوان می‌رسد.

  ۳۶۵

  U+06F3 U+06F6 U+06F5

  365

  U+0033 U+0036 U+0035FaNum

• ۴، ۵ و ۶ با نویسه فارسی

  «٤ ٥ ٦» رقم عربی‌اند و با رقم فارسی در نویسه، شکل و رفتار دوسویه فرق دارند. فونت ابر FaNum آن‌ها را هم فارسی نشان می‌دهد و خطا را پنهان می‌کند. عدد را با Intl و fa-IR بسازید؛ ar-EG رقم عربی می‌دهد.

  ۴۵۶

  U+06F4 U+06F5 U+06F6

  ٤٥٦

  U+0664 U+0665 U+0666

• هزارگان با «٬»

  Intl هزارگان را با «٬» جدا می‌کند و اعشار را با «٫». ویرگول لاتین کنار رقم فارسی جایی ندارد: پیدا آن را «،» نشان می‌دهد و مبلغ شبیه فهرست سه عدد می‌شود.

  ۱٬۲۵۰٬۰۰۰ تومان

  U+066C ARABIC THOUSANDS SEPARATOR

  ۱,۲۵۰,۰۰۰ تومان

  U+002C COMMA

• اول عدد، بعد «تومان»

  واحد بعد از عدد می‌آید و همه‌جا یکی است: تومان. قالب ارزی Intl «ریال» را پیش از عدد می‌گذارد. عدد را با Intl بسازید و «تومان» را خودتان بعد از آن بنویسید.

  ۱۵۰٬۰۰۰ تومان

  NumberFormat('fa-IR')U+0020unit

  ‎ریال ۱٬۵۰۰٬۰۰۰

  style: 'currency' → U+200E unit U+00A0 number

• تاریخ با نام ماه

  در «۱۴۰۵/۷/۶» خواننده باید عدد ماه را در ذهن به «مهر» برگرداند. نام ماه را بنویسید. Intl با fa-IR تقویم خورشیدی را خودش به کار می‌برد و با dateStyle: long ماه را به حروف می‌نویسد.

  ۶ مهر ۱۴۰۵

  dateStyle: 'long'

  ۱۴۰۵/۷/۶

  toLocaleDateString('fa-IR')

• نشانه‌گذاری فارسی

  در متن فارسی «،» «؛» و «؟» بنویسید. پیدا ویرگول لاتین را هم «،» نشان می‌دهد. برای همین، این خطا روی صفحه دیده نمی‌شود و فقط در متن کپی‌شده، پیامک یا فونتی دیگر معلوم می‌شود.

  سلام، خوبید؟

  U+060CU+061F

  سلام, خوبید?

  U+002CU+003F

• نقل‌قول در گیومه

  نقل‌قول، نام کمپین و نام کتاب یا گزارش را در گیومه « » بگذارید. نشانه " " لاتین در فارسی به کار نمی‌رود و باز و بسته‌اش یک شکل است.

  «پیوند»

  U+00AB … U+00BB

  "پیوند"

  U+0022 … U+0022

• فاصله پس از نشانه

  نشانه بی‌فاصله به واژه پیش از خود می‌چسبد و پس از آن یک فاصله می‌آید. درون « » و ( ) فاصله نمی‌گذاریم.

  سلام، خوش آمدید.

  U+060C U+0020U+002E

  سلام ،خوش آمدید .

  U+0020 U+060CU+0020 U+002E

• جمله معترضه میان دو ویرگول

  در پیوند هیچ خط تیره‌ای میان دو عبارت نمی‌آید. جمله معترضه را میان دو ویرگول یا در پرانتز بگذارید.

  ما، همه ما، یکی هستیم.

  U+060CU+060C

  ما — همه ما — یکی هستیم.

  SPACE U+2014 SPACE

• فاصله حروف صفر است

  Safari با letter-spacing اتصال حروف فارسی را می‌شکند و Chrome این مقدار را روی فارسی نادیده می‌گیرد. letter-spacing متن فارسی را صفر بگذارید و برای برجسته کردن، وزن یا اندازه را عوض کنید.

  پیوند

  letter-spacing: 0

  پ‍‍ی‍‍ون‍‍د

  letter-spacing: 0.3em

• متن راست‌چین است

  مرورگر برای تمام‌چین فقط فاصله میان واژه‌ها را باز می‌کند و در ستون باریک جوی سفید می‌سازد. متن را راست‌چین کنید و سطر را با کشیده (ـ) پر نکنید. کشیده نویسه‌ای واقعی است و در کد و پایگاه داده «کمـــک» دیگر با «کمک» یکی نیست.

  با کمک ماهانه شما، کیف و کتاب و لوازم‌التحریر پیش از مهر به دست دانش‌آموزان می‌رسد و گزارشش را هر ماه می‌فرستیم.

  text-align: start

  با کمک ماهانه شما، کیف و کتاب و لوازم‌التحریر پیش از مهر به دست دانش‌آموزان می‌رسد و گزارشش را هر ماه می‌فرستیم.

  text-align: justify

• ارتفاع خط بیشتر از لاتین

  دنباله‌ها و نقطه‌های فارسی تا دو برابر لاتین زیر خط کرسی می‌روند. ارتفاع خط متن را ۱٫۵ تا ۱٫۷۵ برابر اندازه فونت بگذارید، مثل نقش‌های متن پیوند. جعبه تنگ با overflow: hidden سرکش «گ» را برش می‌دهد.

  هر کمک کوچک، گامی بزرگ برای کودکی است که مدرسه را دوست دارد؛ جمع ما با همراهی شما بزرگ‌تر می‌شود.

  line-height: 1.75

  هر کمک کوچک، گامی بزرگ برای کودکی است که مدرسه را دوست دارد؛ جمع ما با همراهی شما بزرگ‌تر می‌شود.

  line-height: 1.2

• تأکید با وزن

  پیدا و ابر ایتالیک ندارند. مرورگر برای em، i و cite ایتالیک مصنوعی می‌سازد و متن را مثل لاتین به راست خم می‌کند. برای تأکید وزن را بیشتر کنید و font-style این سه عنصر را روی normal بگذارید.

  همین امروز

  font-weight: 900

  همین امروز

  font-style: italicsynthetic oblique

• زیرخط پایین‌تر از نقطه‌ها

  زیرخط پیش‌فرض از روی نقطه‌ها و دنباله‌ها رد می‌شود و مرورگر آن را تکه‌تکه می‌کند. text-underline-offset را حدود 0.5em بگذارید تا خط زیر همه حروف یکسره بماند.

  پیگیری

  text-underline-offset: 0.5em

  پیگیری

  text-underline-offset: auto

• جهت صفحه با dir

  dir=rtl و lang=fa را روی <html> بگذارید. text-align: right فقط متن را راست‌چین می‌کند و جهتش چپ‌به‌راست می‌ماند؛ «!» و عدد سر جمله جابه‌جا می‌شوند.

  ۳ روز تا پایان کمپین!

  dir="rtl"inherited from <html>

  ۳ روز تا پایان کمپین!

  direction: ltr; text-align: right

• شماره تلفن یک‌تکه و چپ‌به‌راست

  در متن راست‌به‌چپ، گروه‌های شماره تلفن یا کارت که با فاصله جدا شده‌اند برعکس چیده می‌شوند. اگر شماره بعد از واژه‌ای فارسی بیاید، گروه‌هایی هم که با خط تیره جدا شده‌اند برعکس می‌شوند. شماره را در bdi dir=ltr بگذارید.

  ۰۲۱ ۸۸۷۷ ۶۶۵۵

  <bdi dir="ltr">

  ۰۲۱ ۸۸۷۷ ۶۶۵۵

  no isolateU+0020 between groups

• شناسه لاتین را جدا کنید

  «@»، «#» و نقطه میان فارسی و لاتین جهت جمله را می‌گیرند و جابه‌جا می‌شوند. شناسه، ایمیل و نشانی وب را در bdi dir=ltr بگذارید. متنی را که کاربر وارد می‌کند و جهتش معلوم نیست، در bdi بدون dir بگذارید.

  ما را دنبال کنید: @yekihastim.ngo

  <bdi dir="ltr">@yekihastim.ngo</bdi>

  ما را دنبال کنید: @yekihastim.ngo

  U+0040 between R and L → R

• بازه با «تا»

  در «۱۰-۲۰» الگوریتم دوسویه ترتیب دو عدد را تعیین می‌کند و این ترتیب بسته به واژه‌های کناری عوض می‌شود. «۱۰ تا ۲۰» همه‌جا یک‌جور خوانده می‌شود.

  ۱۰ تا ۲۰ سال

  U+0020 U+062A U+0627 U+0020

  ۱۰-۲۰ سال

  U+002DEN ES EN → one LTR run

• پیکان‌ها با جهت متن

  در راست‌به‌چپ پیکان «بعدی» به چپ و پیکان «بازگشت» به راست اشاره می‌کند و نوار پیشرفت از راست پر می‌شود. مرورگر پیکان را خودش قرینه نمی‌کند و پیکان درست را باید خودتان بگذارید. دکمه پخش، ساعت و تیک را قرینه نکنید.

  بعدی ←

  U+2190 LEFTWARDS ARROW

  بعدی →

  U+2192 RIGHTWARDS ARROW

• کادر شماره چپ‌به‌راست است

  در کادر متن راست‌به‌چپ، گروه‌های شماره‌ای که کاربر با فاصله تایپ می‌کند زیر دستش برعکس می‌شوند. به کادر شماره موبایل، کارت و شبا dir=ltr بدهید و آن را راست‌چین نگه دارید.

  ۰۹۱۲ ۳۴۵ ۶۷۸۹

  <input dir="ltr">text-align: right

  ۰۹۱۲ ۳۴۵ ۶۷۸۹

  <input>rtl inherited

• رقم فارسی را هم بپذیرید

  type=number در مرورگری که زبانش فارسی نیست رقم فارسی را نمی‌پذیرد و regex هم آن را رقم نمی‌شناسد. type=text با inputmode=numeric بگذارید و رقم‌ها را پیش از بررسی لاتین کنید.

  ۵۰۰۰۰۰ ✓

  U+06F0..U+06F9U+0660..U+0669 → 0..9/^\d+$/ → true

  ۵۰۰۰۰۰ ✗

  /^\d+$/.test(value) → false

• مرتب‌سازی با الفبای فارسی

  متد sort رشته‌ها را به ترتیب شماره یونیکد می‌چیند. «پ چ ژ ک گ» در یونیکد پس از حروف عربی آمده‌اند و sort آن‌ها را بعد از «و» و «ه» می‌گذارد. با Intl.Collator('fa') مرتب کنید.

  بهار پرویز کاوه هانیه

  sort(new Intl.Collator('fa').compare)

  بهار هانیه پرویز کاوه

  sort()U+0647 < U+067E < U+06A9