FarsiUI Typeset مجموعه‌ای از استایل‌های آماده برای نمایش محتوای HTML و Markdown است؛ از مقاله و مستندات گرفته تا پیام‌های چت و محتوای استریم‌شده.
FarsiUI Typeset مجموعه‌ای از استایل‌های آماده برای نمایش محتوای HTML و Markdown است؛ از مقاله و مستندات گرفته تا پیام‌های چت و محتوای استریم‌شده.
وقتی Markdown را به HTML تبدیل می‌کنید، خروجی معمولاً شامل عنوان، پاراگراف، فهرست، جدول، کد و عناصر مختلف دیگری است. برای نمایش مناسب این محتوا باید اندازه فونت، فاصله، ارتفاع خط و سایر جزئیات هرکدام از این عناصر را تنظیم کنید.
Typeset این تنظیمات را یکجا انجام می‌دهد.
کافی است محتوای خود را داخل یک wrapper با کلاس typeset قرار دهید تا عناصر داخلی آن به‌صورت یکدست استایل شوند.
<div className="typeset">
<YourMarkdownRenderer>{content}</YourMarkdownRenderer>
</div>تمام CSS مربوط به Typeset در اختیار شماست و می‌توانید در صورت نیاز آن را مستقیماً در پروژه تغییر دهید.
به‌جای تنظیم ده‌ها مقدار مختلف برای بخش‌های مختلف تایپوگرافی، Typeset کنترل ظاهر محتوا را به سه مقدار اصلی خلاصه می‌کند:
سایر فاصله‌ها و اندازه‌ها بر اساس همین مقادیر تنظیم می‌شوند. به این ترتیب می‌توانید ریتم کلی صفحه را بدون تنظیم تک‌تک عناصر کنترل کنید.
Typeset اندازه محتوا را با محیط اطراف خود هماهنگ می‌کند.
می‌توانید از یک Typeset در مقاله، مستندات یا پیام‌های چت استفاده کنید و با تغییر اندازه محیط، خوانایی محتوا حفظ می‌شود.
رنگ‌ها، فونت‌ها و سایر مقادیر بصری از Design System پروژه استفاده می‌کنند.
بنابراین حالت تاریک نیز بدون نیاز به استایل جداگانه، از Theme Tokenهای پروژه پیروی می‌کند.
سه مقدار اصلی، ریتم محتوا را کنترل می‌کنند:
.typeset {
--typeset-size: 1em;
--typeset-leading: 1.75;
--typeset-flow: 1.25em;
}با تغییر این مقادیر می‌توانید ظاهر کلی محتوا را تنظیم کنید.
Typeset طوری طراحی شده است که با اضافه شدن محتوای جدید، استایل بلوک‌های قبلی تغییر نکند.
این ویژگی برای چت‌ها، پاسخ‌های هوش مصنوعی و سایر محتواهای Streaming کاربردی است.
می‌توانید Typeset خود را با سازنده تایپ‌ست ایجاد و در محیط واقعی پیش‌نمایش کنید.
سازنده به شما امکان می‌دهد فونت، اندازه متن و ریتم محتوا را تنظیم کنید و CSS موردنیاز را دریافت کنید.
پس از ساخت Typeset، فایل CSS را در پروژه قرار دهید و آن را بعد از Tailwind وارد کنید:
@import "tailwindcss";
@import "./typeset.css";سپس محتوای HTML یا Markdown را داخل wrapper قرار دهید:
<div className="typeset typeset-docs">
<YourMarkdownRenderer>{content}</YourMarkdownRenderer>
</div>کلاس typeset استایل‌های اصلی را فعال می‌کند و typeset-docs یک preset سفارشی برای همان محتواست.
اگر به تنظیمات سفارشی نیاز ندارید، می‌توانید فقط از typeset استفاده کنید.
.typeset {
--typeset-font-body: inherit;
--typeset-font-heading: var(--font-heading);
--typeset-font-mono: var(--font-mono);
--typeset-size: 1em;
--typeset-leading: 1.75;
--typeset-flow: 1.25em;
}--typeset-sizeاندازه پایه متن را مشخص می‌کند.
مقدار 1em باعث می‌شود اندازه متن از محیط اطراف خود پیروی کند.
--typeset-leadingارتفاع خطوط متن را کنترل می‌کند.
.typeset {
--typeset-leading: 1.75;
}--typeset-flowفاصله بین بلوک‌های محتوا را کنترل می‌کند.
.typeset {
--typeset-flow: 1.25em;
}عنوان‌ها، پاراگراف‌ها، فهرست‌ها و سایر عناصر از این ریتم استفاده می‌کنند.
می‌توانید برای بخش‌های مختلف پروژه presetهای متفاوتی داشته باشید.
برای مثال، یک preset فشرده برای چت و یک preset بازتر برای مستندات:
.typeset-chat {
--typeset-flow: 1em;
--typeset-leading: 1.6;
}
.typeset-docs {
--typeset-size: 15px;
--typeset-flow: 1.5em;
}سپس هرکدام را در محیط موردنظر استفاده کنید:
<div className="typeset typeset-chat">
{message}
</div>
<article className="typeset typeset-docs">
{content}
</article>برای یک تغییر موقت نیز می‌توانید مقدار را مستقیماً روی wrapper قرار دهید:
<article className="typeset [--typeset-flow:1.75em]">
...
</article>می‌توانید فونت متن، عنوان‌ها و کد را برای هر preset مشخص کنید:
.typeset-reading {
--typeset-font-body: var(--font-body);
--typeset-font-heading: var(--font-heading);
--typeset-font-mono: var(--font-mono);
--typeset-size: 18px;
--typeset-leading: 1.9;
--typeset-flow: 2em;
}این امکان به شما اجازه می‌دهد برای بخش‌های مختلف محصول، تایپوگرافی متفاوتی داشته باشید، بدون اینکه CSS اصلی Typeset را تغییر دهید.
Typeset حداکثر عرض محتوا را تعیین نمی‌کند.
کنترل عرض باید توسط layout یا wrapper صفحه انجام شود.
برای مثال:
<article className="typeset mx-auto max-w-3xl">
{content}
</article>این جداسازی باعث می‌شود Typeset مسئول تایپوگرافی باشد و layout مسئول اندازه و موقعیت محتوا.
اگر کاربران شما به متن بزرگ‌تر یا فاصله بیشتر نیاز دارند، می‌توانید یک preset با ریتم بازتر ایجاد کنید:
.typeset-large {
--typeset-size: 16px;
--typeset-leading: 2;
--typeset-flow: 2em;
}حالت تاریک نیز از Theme Tokenهای پروژه استفاده می‌کند و نیازی به تعریف پالت جداگانه برای Typeset ندارد.
در صورت نیاز می‌توانید تنظیمات Typeset را در حالت تاریک تغییر دهید:
.dark .typeset {
--typeset-leading: 1.9;
}جدول‌ها همچنان به‌صورت جدول واقعی HTML باقی می‌مانند.
برای جدول‌های عریض که نیاز به اسکرول افقی دارند، می‌توانید از typeset-scroll استفاده کنید:
<div className="typeset-scroll">
<table>
...
</table>
</div>این wrapper برای سایر محتوای عریض نیز قابل استفاده است.
استایل‌های Typeset با specificity پایین تعریف شده‌اند تا بتوانید آن‌ها را به‌راحتی در پروژه override کنید.
برای مثال، می‌توانید اندازه یک پاراگراف را با utilityهای Tailwind تغییر دهید:
<div className="typeset typeset-docs">
<p className="text-lg">
...
</p>
</div>همچنین CSS معمولی پروژه می‌تواند استایل‌های Typeset را override کند.
اگر نمی‌خواهید یک کامپوننت یا بخشی از محتوا توسط Typeset استایل شود، از not-typeset یا data-not-typeset استفاده کنید:
<div className="typeset">
<p>این متن توسط Typeset استایل می‌شود.</p>
<Card className="not-typeset">
این بخش بدون استایل Typeset نمایش داده می‌شود.
</Card>
</div>این ویژگی برای کامپوننت‌هایی مفید است که باید استایل مستقل خودشان را حفظ کنند.
Typeset برای محتوایی که به‌صورت تدریجی به صفحه اضافه می‌شود طراحی شده است.
برای جلوگیری از تغییر ناگهانی ظاهر محتوای قبلی:
این رفتار Typeset را برای محتوای Streaming مانند چت و پاسخ‌های تولیدشده توسط AI مناسب می‌کند.
اگر قبلاً از @tailwindcss/typography و کلاس prose استفاده کرده باشید، Typeset هدف متفاوتی دارد.
@tailwindcss/typography برای اضافه کردن استایل‌های پیش‌فرض به HTML و Markdown انتخاب مناسبی است.
FarsiUI Typeset زمانی مفید است که علاوه بر تایپوگرافی، به کنترل ریتم محتوا، هماهنگی با Theme، presetهای مختلف و رفتار پایدار هنگام Streaming نیاز دارید.