گاهی دوستان به من می‌گن که چرا متون توی وبلاگم و بقیه کارهام هم‌تراز (Justify) نیستن. من هربار سعی کردم که توضیح بدم دلایم رو برای این‌کار ولی تصمیم گرفتم این‌بار اینجا در موردش به صورت کامل‌تر توضیح بدم.

متون هم‌تراز (Justified Text)

متون هم‌تراز به پاراگراف‌هایی گفته می‌شه که از از سمت راست و چپ حاشیه مشخصی دارن و درواقع طول هرخط در پاراگراف طوری تنظیم می‌شه که انتهای هر خط، با انتهای خطوط دیگه در یک راستا باشن. ازین روش در تایپوگرافی متون چاپی استفاده زیادی می‌شه. مثلا اگر به روزنامه‌ها و کتاب‌های چاپ شده دقت کنید، می‌بینید که تقریبا همه متناشون به این شکل تنظیم شدن. هم‌ترازی متن به خواننده کمک می‌کنه که راحت‌تر متون رو مطالعه کنن و چشمشون خسته نشه و یه حس تقارنی هم القا بشه. متن زیر یک پاراگراف از کتاب The Great Gatsby هست:

مشکل متون هم‌تراز در وب

هم‌ترازی متون به این شکل صورت می‌گیره که بین کلمات داخل خط فاصله‌های اضافی قرار می‌گیره تا انتهای خط با خط‌های دیگه تو یک راستا قرار بگیرن. برای چاپ معمولا متون با نرم‌افزارهایی مثل Microsoft Word, Pages یا Adobe InDesign آماده می‌شن که امکانات زیادی برای هم‌تراز کردن متن دارن و لازم نیست که حتما فاصله‌های زیادی بین کلمات اضافه بشه که خوندن اون‌ها رو مشکل کنه، و از تکنیک‌هایی مثل Hyphenation (خط تیره گذاری) برای هم‌تراز کردن استفاده می‌کنن که در بیشترشون در وب قابل استفاده نیستن.

ولی مرورگرها برای هم‌تراز کردن متن بین حروف کلمات فاصله‌های اضافی قرار می‌دن. توی تصویر زیر فاصله‌هایی که توسط مرورگر اضافه شدن رو با رنگ زرد مشخص کردم.

این فاصله‌های اضافی توی متن باعث می‌شن که چشم کاربر برای خوندن مطالب بیشتر خسته بشه و سخت‌تر بتونه صفحه رو مرور (Scan) بکنه. تصویر بالا بهترین حالت هم‌تراز کردن توسط مرورگر هست که درون فاصله‌های خیلی کمی اضافی شده به متن. ولی همه مرورگرها با متون مثل هم رفتار نمی‌کنن و بعضی‌ها توی شرایط مختلف فاصله‌های بیشتری رو به متن اضافه می‌کنن. اندازه و نوع فونت هم توی این فاصله‌گذاری تاثیر داره. هرچی این فاصله‌ها بیشتر بشن چشم کاربر بیشتر خسته می‌شه و متن با ظاهر بدتری نمایش داده می‌شه.

همچنین شما باید به این موضوع دقت کنید که کاربرای شما همیشه بینایی قوی ندارن و ممکن هست افراد کم‌بینا و دارای مشکلات بینایی یا با ناتوانی Dyslexia (خوانش‌پریشی) به وب‌سایت شما مراجعه کنن و سعی کنن مطالبتون رو مطالعه کنن، در این صورت این فضاهای خالی موجود در متن (White Space Rivers) مشکلات زیادی رو برای اون‌ها به وجود میارن. شما به عنوان طراح هیچ کنترلی روی مقدار فضاهای خالی‌ای که بین کلمات اضافه می‌شن ندارید.

برای همین بهتر هست در بیشتر مواقع متن رو فقط راست‌چین (برای فارسی) یا چپ‌چین (برای لاتین) کنید و از هم‌تراز کردن متن از دو طرف خود داری کنید. درسته که اینطوری متون تقارن کمتری دارن ولی فاصله‌های اضافی در متن وجود نداره:

یک راه‌حل

اگه با توجه به توضیحات بالا، هنوز اصرار بر این داشتید که از هم‌ترازی متون استفاده کنید، بهتر هست که از Hyphenation که بالاتر در موردش توضیح دادم استفاده کنید. بیشتر مرورگرها به طور پیش‌فرض از این قابلیت پشتیبانی نمی‌کنن ولی این قابلیت به CSS3 اضافه شده و انتظار میره که مرورگرها به تدریج اون رو پیاده‌سازی کنن. پشتیبانیش درحال حاضر خیلی ضعیف هست و فقط اینترنت اکسپلورر ۱۰، فایرفاکس ۶ و سافاری ۵.۱ و بالاتر این قابلیت رو پیاده‌سازی کردن.

ولی خب تا زمانی که همه مرورگرها ازش پشتیبانی کنن، می‌تونید از ابزارهای جاواسکریپتی مثل Hyphenator و Hypher که همین قابلیت رو پیاده‌سازی می‌کنن استفاده کنید. هردوی این ابزارها بعد از اینکه صفحه بارگزاری شد، متون رو اصلاح می‌کنن و در واقع کاری می‌کنن که هم‌تراز کردن متن‌ها بدون اضافه کردن فاصله صورت بگیره. به این شکل:

همونطور که می‌بینید انتهای ۳ خط علامت خط تیره (dash) گذاشته شده و کلمات از وسط شکسته شدن و ادامشون رفته به خط بعد. لطفا به این نکته توجه کنید که هیچ‌کدوم از ابزارهای جاواسکریپتی توانایی Hyphenate کردن متون زبان فارسی به درستی رو ندارن. چون توی زبان فارسی برخلاف زبان‌های لاتین، از علامت خط تیره برای هم‌تراز کردن متون استفاده نمی‌شه. چون خط فارسی یک خط پیوسته هست و حروف به همدیگه می‌چسبن، نرم‌افزارهای پردازشگر متن برای هم‌تراز کردن متن از کشیدن حروف «بـــه ایــن صــورت» استفاده می‌کنن که انتهای هر خط با خط‌های دیگه هم‌تراز بشه و این امکان هنوز در وب وجود نداره (یا اگر داره من ازش بی‌اطلاعم). متن زیر از «چهل نامه کوتاه به همسرم - نادر ابراهیمی» انتخاب شده:

در حال حاضر فقط ابزارهای پردازش متنی (که بالاتر توضیح دادم) و گرافیکی (مثل فوتوشاپ) این امکان رو دارن.

—

در هر صورت، پیشنهاد من این هست که متون رو تاجایی که امکان داره هم‌تراز نکنید که هم خوانایی بیشتری داشته باشن و هم ماهیت پویا (داینامیک) وب حفظ بشه. وب مثل چاپ ایستا نیست و دائم در حال تغییر هست و هیچ‌چیز در وب قابل پیش‌بینی نیست. نه تکنولوژی‌هایی که کاربرهامون ازون‌ها استفاده می‌کنن نه رفتار خود کاربرها.

موفق باشید.