Appendix A: Supported HTML tags

HTML 描繪器接受有界子集，涵蓋 Rich Text、結構化區塊、表格與明確對映的影像

參數

`<p>`, `<br>`	段落與強制斷行，包括舊式的段落對齊與間距屬性
`<h1>` through `<h6>`	粗體區塊標題，預設尺寸逐級遞減
`<div>`, `<section>`, `<article>`, `<header>`, `<footer>`, `<main>`	Block containers
`<blockquote>`	Indented block content
`<ul>`, `<ol>`, `<li>`	巢狀的項目符號與編號清單
`<b>`, `<strong>`, `<i>`, `<em>`	Bold and italic text
`<sup>`, `<sub>`, `<u>`	上標、下標、底線、雙底線、刪除線與頂線
`<font>`, `<span>`	舊式的字型、顏色、背景、外框、文字描繪模式與圓角背景屬性
`<a href="...">`	HTTP、HTTPS 與檔案超連結

CSS 串聯

規則可出現在 <style> 元素或行內 style 屬性中

選擇器支援標籤、類別、ID、tag.class 與空白後代組合；不支援的屬性選擇器、偽類選擇器與兄弟/子項組合器會被忽略

樣式宣告的匹配依 CSS specificity 與來源順序，行內宣告優先；支援子集內會遵循 !important

支援的屬性包括下面列出的文字、背景、字型、裝飾、對齊、行高、邊距、內距、框線、寬、高、display 與垂直對齊屬性，以及各自章節中的 Flexbox、Grid 與註腳屬性

長度接受點、像素（每像素 0.75 點）、em 單位、百分比與不帶單位的點值；字型大小還接受 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、start/end 屬性、span、gap、列或欄自動放置，以及逐項對齊

單一容器最多接受 256 個直接項目與 64 列或欄；巢狀內容使用同一套 HTML 描繪器與版面快取

腳註

<footnote>、<aside style="float:footnote"> 與 <aside role="doc-footnote"> 會建立編號註記

有限文字框會先在底部保留註腳區，再排其後的正文行；參照與註腳放不下時會一起延續到下一個框架，延續狀態會保留編號

表格

<table>、<tr>、<td> 與 <th> 會依量測結果描繪列，支援背景、內距、框線、文字樣式，以及最多 64 欄的 colspan

欄寬均分顯式表格寬度或可用寬度，表頭儲存格預設為粗體加淺色背景，一列在下一個 HTML 文字框中仍作為單一原子單位接續

巢狀表格、rowspan、框線合併與依內容自動計算欄寬都不在這個子集內

影像

<img src="name"> 會描繪先前以 SetHTMLImage 綁定的影像

描繪器支援寬、高、邊距、內距、框線、背景與靠左/置中/靠右對齊；只給一個維度時保持自然長寬比，省略的維度以每來源像素 0.75 點計

影像來源絕不觸發網路或檔案存取；量測不登錄資源；重複使用時重用已綁定的影像 XObject

邊界與復原

單一 HTML 輸入最多接受 2048 條樣式表規則、每個選擇器 256 位元組、每個宣告區塊 4096 位元組、4096 列表格與 4096 個儲存格

未知的屬性、選擇器、標籤與屬性會被忽略，周圍文字保留；字元參照會解碼，格式錯誤的巢狀會保守地補上結尾

範例

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;