Appendix A: Supported HTML tags

رندرکنندهٔ HTML زیرمجموعه‌ای محدود را برای متن غنی، بلوک‌های ساخت‌یافته، جدول‌ها و تصاویر نگاشت‌شدهٔ صریح می‌پذیرد

پارامترها

<p>, <br>پاراگراف‌ها و شکست‌های خط سخت، شامل ویژگی‌های قدیمی تراز و فاصله‌گذاری پاراگراف
<h1> through <h6>سرفصل‌های بلوکی ضخیم با اندازه‌های پیش‌فرض نزولی
<div>, <section>, <article>, <header>, <footer>, <main>Block containers
<blockquote>محتوای block تو‌رفته
<ul>, <ol>, <li>لیست‌های نامرتب و مرتب تودرتو
<b>, <strong>, <i>, <em>متن ضخیم و ایتالیک
<sup>, <sub>, <u>بالانویس، زیرنویس، زیرخط، زیرخط دوبل، خط‌خورده و بالاخط
<font>, <span>ویژگی‌های قدیمی فونت، رنگ، پس‌زمینه، خط دور، حالت رندر متن و پس‌زمینهٔ گرد
<a href="...">هایپرلینک‌های HTTP، HTTPS و فایل

آبشاری CSS

قواعد می‌توانند در عناصر <style> یا ویژگی‌های style درون‌خطی بیایند

انتخابگرها از تگ، کلاس، شناسه، tag.class و ترکیب‌های نسل جداشده با فاصله پشتیبانی می‌کنند؛ انتخابگرهای ویژگی، شبه‌انتخابگرها و ترکیب‌کننده‌های خواهر/برادر یا فرزند پشتیبانی‌نشده نادیده گرفته می‌شوند

declarationهای منطبق از specificity مربوط به CSS و ترتیب source استفاده می‌کنند، declarationهای inline اولویت دارند و !important در subset پشتیبانی‌شده رعایت می‌شود

ویژگی‌های پشتیبانی‌شده شامل ویژگی‌های متن، پس‌زمینه، فونت، تزئین، تراز، line-height، margin، padding، قاب، عرض، ارتفاع، display و تراز عمودی فهرست‌شده در ادامه است، به‌علاوهٔ ویژگی‌های Flexbox، Grid و پانویس در بخش‌های مربوطه

طول‌ها point، پیکسل با 0.75 point به‌ازای هر پیکسل، واحدهای em، درصدها و مقادیر point بدون واحد را می‌پذیرند؛ اندازه‌های فونت مقیاس کلیدواژه‌ای استاندارد از xx-small تا xx-large را هم می‌پذیرند

Flexbox

display:flex و display:inline-flex از flex-direction، flex-wrap، flex، flex-grow، flex-shrink، flex-basis، justify-content، align-items، align-self، align-content، gap، row-gap و column-gap پشتیبانی می‌کنند

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

CSS Grid

display:grid و display:inline-grid از grid-template-columns، grid-template-rows، ریل‌های ثابت، درصدی و fr، repeat() و minmax() ساده، grid-column، grid-row، ویژگی‌های شروع و پایان، spanها، گپ‌ها، جای‌گذاری خودکار سطر یا ستون و تراز هر مورد پشتیبانی می‌کنند

یک کانتینر حداکثر 256 مورد مستقیم و 64 سطر یا ستون می‌پذیرد؛ محتوای تودرتو از همان رندرکنندهٔ HTML و حافظهٔ نهان layout استفاده می‌کند

پانویس‌ها

<footnote>، <aside style="float:footnote"> و <aside role="doc-footnote"> یادداشت‌های شماره‌دار می‌سازند

جعبه‌های متن محدود پیش از چیدن خطوط بدنهٔ بعدی، ناحیهٔ یادداشت را در پایین رزرو می‌کنند؛ ارجاع و یادداشتی که با هم جا نشوند به قاب بعدی می‌روند و وضعیت ادامه، شماره‌گذاری را حفظ می‌کند

جدول‌ها

<table>، <tr>، <td> و <th> سطرهای اندازه‌گیری‌شده را با پس‌زمینه، لایی، قاب، استایل‌های متنی و colspan تا 64 ستون رندر می‌کنند

ستون‌ها عرض صریح جدول یا عرض موجود را به‌طور مساوی تقسیم می‌کنند، سلول‌های هدر به‌طور پیش‌فرض متن پررنگ با پس‌زمینهٔ روشن دارند و یک سطر به‌عنوان واحد اتمیک در جعبهٔ متن HTML بعدی ادامه می‌یابد

جدول‌های تودرتو، rowspan، جمع‌شدن حاشیه‌ها و اندازه‌گذاری خودکار ستون بر اساس محتوا جزو این زیرمجموعه نیستند

تصاویر

<img src="name"> تصویری را که قبلاً با SetHTMLImage متصل شده رسم می‌کند

renderer از width، height، margin، padding، border، background و تراز left، center یا right پشتیبانی می‌کند؛ نبودن یکی از ابعاد نسبت طبیعی را حفظ می‌کند و برای ابعاد حذف‌شده از 0.75 points per source pixel استفاده می‌شود

مبدأهای تصویر هرگز دسترسی شبکه یا فایل راه نمی‌اندازند، اندازه‌گیری resource ثبت نمی‌کند و استفادهٔ مکرر از XObject تصویر متصل‌شده استفادهٔ مجدد می‌کند

مرزها و بازیابی

یک ورودی HTML حداکثر 2048 قاعدهٔ stylesheet، 256 بایت به‌ازای هر selector، 4096 بایت به‌ازای هر بلوک declaration، 4096 سطر جدول و 4096 سلول جدول می‌پذیرد

ویژگی‌ها، selectorها، تگ‌ها و attributeهای ناشناخته نادیده گرفته می‌شوند و متن اطراف حفظ می‌شود؛ ارجاع‌های نویسه دیکد شده و تودرتویی بدشکل به‌صورت محافظه‌کارانه بسته می‌شود

مثال

var
  LogoID: Integer;
begin
  LogoID := PDF.AddImageFromFile('logo.png');
  PDF.SetHTMLImage('brand-logo', LogoID);
  PDF.DrawHTMLTextBox(50, 750, 420, 180,
    '<style>.report h2 { color:#204080; } table { border:1pt solid #808080; }</style>' +
    '<section class="report"><h2>Quarterly report</h2>' +
    '<img src="brand-logo" width="72pt">' +
    '<table><tr><th>Region</th><th>Total</th></tr>' +
    '<tr><td>North</td><td>125</td></tr></table></section>');
end;