Appendix A: Supported HTML tags

O renderizador HTML aceita um subconjunto limitado para texto rico, blocos estruturados, tabelas e imagens explicitamente associadas

Parâmetros

Cascata CSS

As regras podem surgir em elementos <style> ou em atributos style em linha

Os seletores suportam combinações de etiqueta, classe, ID, tag.class e descendentes separados por espaços; os seletores de atributos e pseudoseletores não suportados, bem como os combinadores de irmãos ou filhos, são ignorados

As declarações correspondentes utilizam a especificidade CSS e a ordem da origem, as declarações em linha têm prioridade e !important é respeitado no subconjunto suportado

As propriedades suportadas incluem as propriedades de texto, fundo, tipo de letra, decoração, alinhamento, altura da linha, margem, preenchimento, contorno, largura, altura, apresentação e alinhamento vertical indicadas abaixo, além das propriedades Flexbox, Grid e de notas de rodapé nas respetivas secções

Os comprimentos aceitam pontos, píxeis a 0,75 pontos por píxel, unidades em, percentagens e valores de pontos sem unidade; os tamanhos de tipo de letra também aceitam a escala normalizada de palavras-chave entre xx-small e xx-large

Flexbox

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

Os contentores de linhas distribuem o espaço livre positivo e negativo por linha flexível, as linhas com quebra são medidas independentemente e os contentores de colunas distribuem uma altura explícita ou derivada do conteúdo

CSS Grid

display:grid e display:inline-grid suportam grid-template-columns, grid-template-rows, faixas fixas, percentuais e fr, formas simples de repeat() e minmax(), grid-column, grid-row, propriedades de início e fim, extensões, intervalos, colocação automática por linha ou coluna e alinhamento por item

Um contentor aceita no máximo 256 itens diretos e 64 linhas ou colunas; o conteúdo aninhado utiliza o mesmo renderizador HTML e a mesma cache de disposição

Notas de rodapé

<footnote>, <aside style="float:footnote"> e <aside role="doc-footnote"> criam notas numeradas

As caixas de texto finitas reservam a área das notas no fundo antes de disporem as linhas seguintes do corpo; uma referência e uma nota que não caibam juntas transitam para a moldura seguinte e o estado de continuação preserva a numeração

Tabelas

<table>, <tr>, <td> e <th> renderizam linhas medidas com fundos, preenchimento, contornos, estilos de texto e colspan até 64 colunas

As colunas dividem de forma igual a largura explícita ou disponível da tabela, as células de cabeçalho utilizam por predefinição texto a negrito com fundo claro e cada linha continua como uma unidade indivisível na caixa de texto HTML seguinte

Tabelas aninhadas, rowspan, união de contornos e dimensionamento automático de colunas orientado pelo conteúdo não fazem parte deste subconjunto

Imagens

<img src="name"> desenha uma imagem previamente associada com SetHTMLImage

O renderizador suporta largura, altura, margem, preenchimento, contorno, fundo e alinhamento à esquerda, ao centro ou à direita; a ausência de uma dimensão preserva a proporção natural e a omissão de ambas utiliza 0,75 pontos por píxel da origem

As origens de imagem nunca provocam acesso à rede ou a ficheiros, a medição não regista recursos e as utilizações repetidas reutilizam o XObject de imagem associado

Limites e recuperação

Uma entrada HTML aceita no máximo 2048 regras de folha de estilos, 256 bytes por seletor, 4096 bytes por bloco de declarações, 4096 linhas de tabela e 4096 células de tabela

As propriedades, seletores, etiquetas e atributos desconhecidos são ignorados, preservando o texto envolvente; as referências de caracteres são descodificadas e o aninhamento malformado é fechado de forma conservadora

Exemplo

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;