Math

با Temml فرمول‌های ریاضی LaTeX را با کیفیت بالا در صفحه‌های HTML رندر می‌کند و آن‌ها را مستقیم به MathML بومی کامپایل می‌کند.

کجا به کارش ببرید: وقتی می‌خواهید یک فرمول LaTeX را به‌صورت فرمول جدا (display) در صفحهٔ HTML رندر کنید. <r-math> عبارت را از ویژگی latex با Temml حروف‌چینی می‌کند؛ Temml کد LaTeX را به MathML کامپایل می‌کند و چیدمان را خود مرورگر انجام می‌دهد (نه canvas، نه SVG، نه زمان‌اجرای KaTeX).

شروع سریع

استفادهٔ پایه

<r-math latex="\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1 \quad (a > b > 0)"></r-math>

مرجع API

خصیصه‌ها

خصیصه	نوع	پیش‌فرض	توضیح
latex	string	''	فرمول LaTeX برای رندر. فرمول از همین ویژگی می‌آید، نه از متن اسلات.
display	string	'block'	block (فرمول جدا) یا inline (فرمول درون‌خطی).
font	string	''	با system از قلم همراه Latin Modern Math صرف‌نظر و از قلم ریاضی سیستم استفاده می‌شود.
macros	string	''	شیئی JSON از ماکروهای Temml. JSON نامعتبر بی‌صدا نادیده گرفته می‌شود.
wrap	string	''	شکست خط نرم Temml: none، tex یا =.
copy	boolean	false	دکمهٔ رونوشت را نشان می‌دهد. copy تنها، منبع LaTeX و copy="mathml"، MathML را رونوشت می‌کند.
download	boolean	false	دکمه/منوی دانلود منبع (.tex) و/یا MathML (.mml) را نشان می‌دهد.
sheet	string	''	CSS تزریق‌شده به shadow DOM کامپوننت.

💡 یادداشت: گیرندهٔ خصیصهٔ latex مقدار را با decodeURIComponent رمزگشایی می‌کند، پس فرمول‌های کدگذاری‌شده به‌شکل URI پیش از رندر رمزگشایی می‌شوند. دادن فرمول به‌صورت متن اسلات اثری ندارد؛ تنها ویژگی latex رندر می‌شود.

فرمول latex

<r-math latex="x = {-b \pm \sqrt{b^2-4ac} \over 2a}"></r-math>

استایل بیرونی sheet

<r-math latex="e^{i\pi} + 1 = 0" sheet=".ran-math { justify-content: flex-start; }"></r-math>

رویدادها

رویداد	detail	چه زمانی
render	{ ok: true }	فرمول با موفقیت رندر شد.
error	{ message: string }	Temml نتوانست فرمول را تجزیه کند (مثلاً LaTeX نامعتبر).
copied	{ kind: 'source' | 'mathml' }	دکمهٔ رونوشت، منبع یا MathML را در تخته‌گیره گذاشت.
download	{ format: 'source' | 'mathml' }	دکمهٔ دانلود یک فایل .tex یا .mml ذخیره کرد.

استایل

<r-math> ۱۶ ویژگی سفارشی CSS از آنِ خود و افزون بر آن توکن‌های معنایی‌ای که از پوسته می‌خواند در اختیار می‌گذارد. آن را هرجا که ارث می‌رسد تعیین کنید: :root، یک نگه‌دارنده، یا خود عنصر.

r-math {
  --ran-math-error-background: var(--ran-color-bg-subtle);
}

Part‌ها: button · error · math · menu · render · toolbar

فهرست کامل در توکن‌های استایل است و اینکه کدام توکن را به کار ببرید در سیستم طراحی آمده.

بهترین شیوه‌ها

• فرمول را با latex بدهید: فرمول را روی ویژگی latex تعیین کنید؛ متن اسلات رندر نمی‌شود.
• در جاوااسکریپت بک‌اسلش را escape کنید: هنگام تخصیص latex از یک رشتهٔ JS، یادتان باشد \ باید escape شود (مثلاً '\\frac{1}{2}').
• شکست تجزیه را مدیریت کنید: به‌جای فرض اینکه هر فرمولی LaTeX معتبر است، به error گوش بدهید (یا جعبهٔ رندرشدهٔ ()::part(error را ببینید).
• چیدمان دلخواه با sheet: هرجا لازم شد با ویژگی sheet چیدمان درونی .ran-math را بازنویسی کنید.