Appendix A: Supported HTML tags

HTML 渲染器接受用于富文本、结构化块、表格和显式映射图像的有界子集

参数

`<p>`, `<br>`	段落和硬换行，包括旧式段落对齐和间距属性
`<h1>` through `<h6>`	默认大小递减的粗体块标题
`<div>`, `<section>`, `<article>`, `<header>`, `<footer>`, `<main>`	块容器
`<blockquote>`	缩进块内容
`<ul>`, `<ol>`, `<li>`	嵌套的无序列表和有序列表
`<b>`, `<strong>`, `<i>`, `<em>`	粗体和斜体文本
`<sup>`, `<sub>`, `<u>`	上标、下标、下划线、双下划线、删除线和上划线
`<font>`, `<span>`	旧式字体、颜色、背景、大纲、文本渲染模式和圆角背景属性
`<a href="...">`	HTTP、HTTPS 和 file 超链接

CSS 层叠

规则可出现在 <style> 元素或内联 style 属性中

选择器支持标签、类、ID、tag.class 和以空格分隔的后代组合；会忽略不支持的属性选择器、伪选择器以及同级或子级组合器

匹配的声明采用 CSS 特异性和源顺序，内联声明优先，且在受支持子集中遵循 !important

支持的属性包括下方列出的文本、背景、字体、装饰、对齐、行高、外边距、内边距、边框、宽度、高度、显示和垂直对齐属性，以及各自章节中的 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

行容器按每个弹性行分配正负可用空间，换行后的行独立测量，列容器则分配显式指定或从内容派生的高度

CSS 网格

display:grid 和 display:inline-grid 支持 grid-template-columns、grid-template-rows、固定、百分比和 fr 轨道、简单的 repeat() 和 minmax()、grid-column、grid-row、起始与结束属性、跨越、间隔、按行或列自动放置，以及逐项对齐

一个容器最多接受 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;