Appendix A: Supported HTML tags

El renderizador HTML acepta un subconjunto delimitado para texto enriquecido, bloques estructurados, tablas e imágenes asignadas explícitamente

Parámetros

Cascada CSS

Las reglas pueden aparecer en elementos <style> o en atributos style en línea

Los selectores admiten etiquetas, clases, identificadores, tag.class y combinaciones de descendientes separadas por espacios; se omiten los selectores de atributos y pseudoselectores no compatibles, así como los combinadores de elementos hermanos o secundarios

Las declaraciones coincidentes usan especificidad CSS y orden de origen; las declaraciones en línea tienen prioridad y se respeta !important en el subconjunto admitido

Las propiedades compatibles incluyen las propiedades de texto, fondo, fuente, decoración, alineación, altura de línea, margen, relleno, borde, anchura, altura, visualización y alineación vertical que se indican a continuación, además de las propiedades de Flexbox, Grid y notas al pie de sus respectivas secciones

Las longitudes aceptan puntos, píxeles a razón de 0,75 puntos por píxel, unidades em, porcentajes y valores de puntos sin unidad; los tamaños de fuente también aceptan la escala estándar de palabras clave desde xx-small hasta xx-large

Flexbox

display:flex y display:inline-flex admiten flex-direction, flex-wrap, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content, gap, row-gap y column-gap

Los contenedores de fila distribuyen el espacio libre positivo y negativo por línea flex, las filas ajustadas se miden de forma independiente y los contenedores de columna distribuyen una altura explícita u obtenida del contenido

Cuadrícula CSS

display:grid y display:inline-grid admiten grid-template-columns, grid-template-rows, pistas fijas, porcentuales y fr, las formas sencillas de repeat() y minmax(), grid-column, grid-row, propiedades iniciales y finales, extensiones, separaciones, colocación automática por filas o columnas y alineación por elemento

Un contenedor admite como máximo 256 elementos directos y 64 filas o columnas; el contenido anidado utiliza el mismo renderizador HTML y caché de maquetación

Notas al pie

<footnote>, <aside style="float:footnote"> y <aside role="doc-footnote"> crean notas numeradas

Los cuadros de texto finitos reservan el área de notas de la parte inferior antes de disponer las líneas posteriores del cuerpo; una referencia y una nota que no quepan juntas continúan en el siguiente marco y el estado de continuación conserva la numeración

Tablas

<table>, <tr>, <td> y <th> renderizan filas medidas con fondos, relleno, bordes, estilos de texto y colspan de hasta 64 columnas

Las columnas dividen por igual la anchura explícita o disponible de la tabla, las celdas de encabezado utilizan de forma predeterminada texto en negrita con un fondo claro y cada fila continúa como una unidad atómica en el siguiente cuadro de texto HTML

Las tablas anidadas, rowspan, el colapso de bordes y el dimensionamiento automático de columnas según el contenido no forman parte de este subconjunto

Imágenes

<img src="name"> dibuja una imagen vinculada previamente mediante SetHTMLImage

El renderizador admite anchura, altura, margen, relleno, borde, fondo y alineación; una dimensión ausente conserva la proporción y ambas ausentes usan 0,75 puntos por píxel

Los orígenes de imagen nunca activan el acceso a la red ni a archivos, la medición no registra recursos y el uso repetido reutiliza el XObject de imagen vinculado

Límites y recuperación

Una entrada HTML acepta como máximo 2048 reglas de hoja de estilos, 256 bytes por selector, 4096 bytes por bloque de declaraciones, 4096 filas de tabla y 4096 celdas de tabla

Las propiedades, selectores, etiquetas y atributos desconocidos se ignoran mientras se conserva el texto circundante; las referencias de caracteres se descodifican y el anidamiento incorrecto se cierra de forma conservadora

Ejemplo

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;