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 را بازنویسی کنید.

کنترل‌های فعال همیشه در ردیفی ساده بالای محتوا دیده می‌شوند: ناحیهٔ هدف برای نشانگر دقیق 32px و برای لمس 44px است و با محتوا 8px فاصله دارد. بدون کنترل، فضایی رزرو نمی‌شود. هنگام کپی، فوکوس حفظ می‌شود و نوشتن تکراری تا پایان درخواست مسدود است. رد دسترسی یا نبود کلیپ‌بورد به‌صورت محلی در ::part(copy-status) با role="status" نمایش داده می‌شود و متن آن با label-copy-error قابل ترجمه است؛ تلاش دوباره از همان دکمه استفاده می‌کند. رویداد copied فقط پس از کپی موفق محتوای فعلی صادر می‌شود. تغییر منبع یا هدف کپی، بازخورد درخواست‌های قبلی را بی‌اعتبار می‌کند. با تغییر منبع، فوکوس دکمه حفظ می‌شود و منبع جدید را می‌توان بی‌درنگ کپی کرد.

فرمول‌های عریض درون ::part(render) به‌صورت افقی پیمایش می‌شوند، بدون اینکه عرض صفحه یا جای نوار ابزار تغییر کند.