راهنمای تنظیم فاصله حروف و کلمات (کرنگینگ) در وب؛ تایپوگرافی فارسی وب

یکی از نکات مهم در تایپوگرافی، تنظیم فواصل حروف و کلمات است که به آن کرنینگ می‌گویند. زمانی که فاصله حروف و کلمات در یک متن به خوبی تنظیم شده باشد، باعث افزایش خوانایی و زیبایی متن می‌شود. این مسأله در محیط وب، که رسانه‌ی غالب در عصر کنونی است، بسیار حائز اهمیت است. در این مقاله توضیحاتی درباره کرنینگ در وب برای متون فارسی ارائه خواهم داد، چند مقاله خوب برای مطالعه بیشتر در این زمینه به شما معرفی خواهم کرد، و روش‌هایی عملی برای رسیدن به کرنیگ بهتر در متون فارسی در محیط وب، جهت رسیدن به تایپوگرافی فارسی بهتر در وب پیشنهاد خواهم داد.

معرفی مفهوم کرنینگ در تایپوگرافی

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

در خط نخست، متن را با چینش پیشفرض حروف با فونت B Zar می‌بینید. فواصل آزاردهنده‌ای میان حروف و کلمات دیده می‌شود که باعث نازیبایی، کاهش خوانایی و اشغال فضای بیشتر شده است.

در خط دوم، این فواصل به صورت دستی در نرم‌افزار Adobe Illustrator کاهش داده شده است که ترکیبی خواناتر و دلنشین‌تر با اشغال فضای کمتر ایجاد کرده است.

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

کرنینگ در تایپوگرافی فارسی

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

نوشتار فارسی از نظر فرم و ترکیب‌بندی، تفاوت فراوانی با نوشتار لاتین دارد. (مقاله آناتومی حروف فارسی را ببینید). حروفِ جداازهمِ لاتین را آسان‌تر از حروف گاه به‌هم‌پیوسته و گاه جداازهم فارسی می‌توان در چهارچوب‌های مستطیل شکل قرار داد. بر همین اساس، اهمیت تنظیم فواصل حروف و کلمات در متن فارسی بیشتر از متن انگلیسی است.

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

تنظیم فواصل حروف و کلمات (کرنینگ) در تایپوگرافی فارسی وب

به همت دلسوزان خط فارسی، تعداد زیادی از فونت‌های فارسی قدیمی برای محیط وب بهینه شده اند و فونت‌های جدید زیبایی نیز طراحی شده‌اند، که مشکلات کرنینگ در آن‌ها یا حل شده و یا به شدت گذشته نیست. با این حال، ما نیاز به ابزارهایی برای کرنینگ و چینش سفارشیِ ترکیب‌بندی حروف فارسی داریم. زیرا:

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

چینش سفارشیِ حروف در نرم‌افزارهای گرافیکی مانند محصولات شرکت Adobe کار چندان پیچیده‌ای نیست و ابزارهای متنوعی برای این کار وجود دارد. اما کار در محیط وب، کمی دشوارتر است و دست طراحان در این محیط چندان باز نیست. یک راهکار ساده، طراحی تایپوگرافی در نرم‌افزار گرافیکی و درج آن در صفحات وب به صورت عکس یا svg است. اما تبدیل نوشته به عکس ممکن است به خاطر دلایل مرتبط با دسترس‌پذیری، سئو و حجم و سرعت بارگذاری، روش دلخواه ما نباشد. حال بگذارید ببینیم چه روش‌هایی برای دستکاری مستقیم فاصله حروف و کلمات در محیط وب داریم. متن مقاله از اینجا به بعد، فنی و در حیطه تخصص طراحان وب است.

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

ابزار CSS مهم‌ترین ابزار طراحان وب در طراحی شکل ظاهری صفحات است که روزبه‌روز کامل‌تر هم می‌شود. دو خصیصه letter-spacing و word-spacing دوستان خوب ما در هنگام تنظیم فاصله بین حروف و کلمات هستند. این دو خصیصه مقادیر مثبت و منفی را قبول می‌کنند و شما می‌توانید به کمک آن‌ها فاصله بین کلمات و حروف متن را به ترتیب، زیاد یا کم کنید. برای این که با کوچک و بزرگ شدن متنتان فاصله بین حروف و کلمات نیز به همان نسبت کم و زیاد شوند، توصیه من استفاده از واحد em به جای px برای مقادیر است.

برای این که متوجه شوید این خصیصه‌ها چگونه کار می‌کنند، تصویر زیر را ببینید.

کد html و css مربوط به تصویر بالا را به صورت زنده در این قطعه کد در codepen می‌توانید ببینید.

دو خصیصه letter-spacing و word-spacing امکانات خوبی در اختیار طراحان قرار می‌دهد و می‌توان به کمک آن‌ها به تراکم متنی دلخواه دست یافت. اما میزان تعیین شده برای فواصل حروف و کلمات، به طور یکسان، به تمام بلوک متنی اعمال می‌شود. آیا روشی برای جداکردن اجزای متن از هم و اعمال فاصله‌گذاری برای رسیدن ترکیب‌بندی دلخواه وجود دارد؟

Lettering.js

زمانی که در میان ابزارهای تایپوگرافی برای وب جستجو می‌کردم، به ابزار Lettering.js برخوردم که ابزار جالبی است. این ابزار یک پلاگین جاوااسکریپت بر پایه جی-کوئٰری است که به کمک آن می‌توان به سادگی متن را به حروف، کلمات، یا سطور مجزا تفکیک کرد و هر کدام از اجزای متن را داخل یک span با یک کلاس مجزا قرار داد. آن گاه شما خواهید توانست به راحتی برای هر کدام از اجزای متن css جداگانه بنویسید.

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

رسیدن به کرنیگ و فاصله‌گذاری دلخواه در متن فارسی با Persian-Lettering.js

همان طور که گفته شد، تفکیک متن به حروف با استفاده از Lettering.js برای زبان فارسی چندان کارا نیست. ما نیازمند این هستیم که مثلا کلمه «پارسی» به سه قطعه «پا»‌ «ر» و «سی» تفکیک شود تا بتوانیم بدون از هم گسیختن حروف، فواصل را به درستی تنظیم کنیم. هر کدام از این قطعات متنی را یک لیگچر (به فارسی گره یا بخیه) می‌نامیم. لیگِچر (با کمی مسامحه در تعریف) هر قطعه از متن است که اصطلاحا آن را با یک بار گذاشتن و برداشتن قلم می‌نویسیم. (مقاله جالب لیگچرها در تایپوگرافی فارسی و انگلیسی را ببینید.)

با ویرایش مختصری که روی ابزار Lettering.js انجام دادم، متدی جدید به متدهای آن اضافه کردم که قابلیت تفکیک متن به لیگِچرها را برای فارسی‌زبانان و عرب‌زبانان فراهم می‌کند و پلاگین جدید را با عنوان Persian-Lettering.js در گیت‌هاب منتشر کردم.

ابزار Persian-Lettering.js امکانات جالبی برای تایپوگرافی فارسی در وب در اختیار شما قرار می‌دهد. علاوه بر تنظیم دلخواه فواصل حروف (لیگچرها)، شما می‌توانید رنگ، اندازه، فونت و سایر خصیصه‌های هر کدام از اجزای متن را تغییر دهید و به جلوه‌های خلاقانه‌ای برسید. به عنوان مثال، می‌توان ترکیب‌بندی‌های جالبی با خط نستعلیق انجام داد. این که شما بتوانید خط نستعلیق را به صورت متن html و با ترکیب‌بندی دلخواهتان در صفحه وب به کار ببرید، هیجان انگیز است:

کد کامل html و css و js مربوط به نوشته بالا را به صورت زنده در این قطعه کد در codepen می‌توانید ببینید.

نحوه استفاده از Persian-lettering.js برای تنظیم فواصل حروف و کلمات فارسی

در اینجا نحوه استفاده از Persian-lettering.js را به اختصار توضیح می‌دهم. این کد نیازمند jQuery است. پس ابتدا آن را به طریق دلخواهمان در صفحه وب خود فراخوانی می‌کنیم.

 <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> 

حال فایل jquery.persian-lettering.min.js را اینجا دانلود و در پروژه خود کپی کرده و فرا می‌خوانیم.

<script src="js/jquery.persian-lettering.min.js"></script>  

حالا می‌توانیم متدهای موجود در این پلاگین را روی قطعه متن دلخواهمان اعمال کنیم. فرض کنید متنی با کلاس fancy-title داریم و می‌خواهیم کار کرنینگ و تنظیم فواصل را روی آن انجام دهیم.

<h1 class="fancy-title">عنوان</h1>
<script>
$(document).ready(function() {
$(".fancy-title").lettering('pligatures');
});
 </script>

با انجام این کار، متن ما به صورت زیر درخواهد آمد

<h1 class="fancy-title"> 
<span class="plig1">عنو</span> 
<span class="plig2">ا</span>
<span class="plig3">ن</span> 
</h1> 

حال که متن به گره‌های تشکیل‌دهنده خود تفکیک شده و هر گره هم کلاس منحصر به فرد خود را دارد، می‌توان به راحتی به کمک css، و خصیصه‌هایی مانند margin و vertical-align، فواصل بین حروف را تنظیم کرد. دقت کنید که از مقادیر منفی نیز برای خصیصه‌ها می‌توان استفاده کرد و واحد مورد توصیه برای مقادیر نیز em است.

مثال‌هایی از استفاده از این پلاگین را می‌توانید داخل فولدر examples در گیت هاب ببینید.

کاستی‌های Persian-lettering.js

این ابزار اگرچه آزادی عمل هیجان‌انگیزی در اختیار ما قرار می‌دهد، اما کاستی‌هایی هم دارد. نخست این که تنظیم دستی فواصل به کمک css برای تک تک گره‌ها کار نسبتا زمان‌بری است. بنابراین، این پلاگین برای پاراگراف‌های طولانی ابزار مفیدی نیست و بیشتر برای لوگوتایپ‌ها، عناوین، ابیات یا نقل قول‌های کوتاه، یا عناصر متنی مهم صفحه وب شما کاربرد خواهد داشت. دوم، این پلاگین توانایی کنترل موقعیت نقطه‌ها را ندارد. موقعیت نقطه‌ها نقشی مهم در ترکیب‌بندی و سواد و بیاض خط فارسی دارد که کنترل آن از توان این پلاگین خارج است.

پلاگین Persian-Lettering در نسخه‌های اولیه است و ممکن است جای بهبود زیادی داشته باشد. بنابراین از هر گونه، بازخورد، برنچ، کامیت و مشارکت… دریغ نورزید، تا بتوانیم آن را کامل‌تر کنیم.

اگر هر دیدگاه یا پرسشی در مورد متن حاضر دارید، لطفا آن را همین جا کامنت کنید تا در اختیار دیگران نیز قرار گیرد.