چهار پلاگین jQuery برای انجام تایپوگرافی بهتر

تایپوگرافی یک عنصر مهم در طراحی زیبا است اما گاهی در مبحث طراحی وب، این عنصر نادیده گرفته می‌شود.


حتی اگر توجه ویژه‌ای به تایپوگرافی در طراحی‌های خود داشته باشید، گاهی HTML و CSS باعث می‌شوند کنترل مناسبی روی پیاده سازی آنچه در نظر دارید، نداشته باشید. در ادامه مقاله در لیداوب، چهار پلاگین یا افزونه jQuery به شما معرفی خواهد شد که اگر به دنبال کنترل بهتر روی تایپوگرافی در طرح‌های خود هستید، می‌توانید از آن‌ها استفاده کنید.

چهار پلاگین jQuery برای تایپوگرافی بهتر

۱. پلاگین Lettering.js

پلاگین jQuery برای تایپوگرافی

پلاگین Lettering.js خیلی راحت و سریع از طریق افزودن خودکار span class‌ها به هر کاراکتر، کنترل روی هر یک از حروف تیتر را در اختیار شما قرار می‌دهد. اگر چه امکانات این پلاگین به خلاقیت خود شما بستگی دارد اما در اینجا برخی از مزایای هدف گیری سریع حروف جداگانه را بررسی می‌کنیم:

- دستکاری و تنظیم کرنینگ هر حرف به صورت جداگانه

- رنگ آمیزی جداگانه حروف تیتر

- چرخش در هم ریخته حروف برای ایجاد تاثیر بازی گونه

نمونه کد 

در اینجا، یک مثال سریع از نحوه استفاده از این پلاگین برای جان بخشیدن به تیترها آورده شده است. از تابع lettering برای هدف گرفتن تیتر استفاده کنید:

<script>
$(document).ready(function() {
$(".custom_title").lettering();
});
</script>

سپس، کلاس custom_title را برای تیترهایی که می‌خواهید هدف بگیرید، اضافه کنید:

<h1 class= "custom_title ">Headline</h1>

تابع letterin g به صورت خودکار یک span به هر حرف از تیتر custom_title اضافه می‌کند:

<h1 class="custom_title">
<span class="char1">H</span>
<span class="char2">e</span>
<span class="char3">a</span>
<span class="char4">d</span>
<span class="char5">l</span>
<span class="char6">i</span>
<span class="char7">n</span>
<span class="char8">e</span>
</h1>

حالا از CSS استاندارد برای هدف گرفتن هر یک از span‌های درون تیتر به صورت زیر استفاده کنید:

h1.custom_title char 1 {
    /* change the first letter here */
}

۲. پلاگین FitText

پلاگین jQuery برای تایپوگرافی

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

نمونه کد

پیاده سازی FitText بسیار ساده است:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

حتما در style.css   یک عرض مشخص به تیتر بدهید:

#responsive_headline {
    display: block;
    width: 100%
}

از عنصر CSS مشخصی برای پیاده سازی FitText استفاده کنید:

<h1 id= "responsive_headline">Headline</h1>

۳. پلاگین ArcText

پلاگین jQuery برای تایپوگرافی

ArcText یک پلاگین jQuery است که به شما امکان پیچیدن حروف دور یک مسیر منحنی را می‌دهد. این پلاگین از Lettering.js برای محاسبه خودکار چرخش مورد نیاز برای هر حرف در یک کلمه استفاده کرده و مطمئن می‌شود که حروف چرخانده شده به صورت مرتب حول یک محور منحنی فرضی، توزیع شده‌اند. چرخش واقعی با استفاده از CSS3 انجام می‌شود و بر‌اساس شعاع و عرض متن محاسبه می‌گردد.

کد نمونه

برای ایجاد متن منحنی:

$example1.arctext({radius: 300})

برای اصلاح مسیر:

$example2.arctext({radius: 400, dir: -1})

برای حذف چرخش و قرار دادن حروف روی یک منحنی:

$example3.arctext({radius: 500, rotate: false})

۴. پلاگین SlabText

پلاگین jQuery برای تایپوگرافی

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

نمونه کد

این پلاگین به قوانین CSS زیر نیاز دارد:

.slabtexted .slabtext
        {
        display:-moz-inline-box;
        display:inline-block;
        white-space:nowrap;
        }
.slabtextinactive .slabtext
        {
        display:inline;
        white-space:normal;
        font-size:1em !important;
        letter-spacing:inherit !important;
        word-spacing:inherit !important;
        *letter-spacing:0 !important;
        *word-spacing:0 !important;
        }
.slabtextdone .slabtext
        {
        display:block;
        }

کلاس SlabText را به عنصر بدنه افزوده و از slabtextdone برای تیترهایی که می‌خواهید تغییر اندازه دهید استفاده کنید. این کار با افزودن خودکار span class= "slabtext"  به صورت پیش‌فرض تیتر را تغییر اندازه می‌دهد. همچنین، می‌توانید کلمات هر ردیف را با استفاده دستی از span class= “slabtext” از قبل مشخص کنید:

<body class ="slabtexted">
    <h1 class= "slabtextdone">The Rows Here Will Be Dynamically Resized Upon Browser Resize</h1>

    <h1 class= "slabtextdone">
<span class= "slabtext">The Rows Here</span>
<span class= "slabtext">Are Resized</span>
<span class= "slabtext">Based On The</span>
<span class= "slabtext">Span SlabText Markup</span>
</span>
</h1>
</body>

مطالعه بیشتر در لیداوب:

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