Appendix A: Supported HTML tags

De HTML-renderer accepteert een begrensde subset voor rich text, gestructureerde blokken, tabellen en expliciet gemapte afbeeldingen

Parameters

CSS-cascade

Rules may appear in <style> elements or inline style attributes

Selectors ondersteunen tag, class, ID, tag.class en combinaties van nakomelingen met witruimte; niet-ondersteunde attribuutselectors, pseudo-selectors en sibling- of child-combinatoren worden genegeerd

Matchende declaraties gebruiken CSS-specificiteit en bronvolgorde, inline declaraties hebben voorrang, en !important wordt binnen de ondersteunde subset gerespecteerd

Ondersteunde eigenschappen zijn de hieronder genoemde text-, background-, font-, decoration-, alignment-, line-height-, margin-, padding-, border-, width-, height-, display- en vertical-alignment-eigenschappen, plus de Flexbox-, Grid- en voetnoteigenschappen in hun eigen paragrafen

Lengtes accepteren punten, pixels tegen 0,75 punten per pixel, em-eenheden, percentages en eenheidsloze puntwaarden; fontgroottes accepteren ook de standaard keywordschaal van xx-small tot en met xx-large

Flexbox

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

Rijcontainers verdelen positieve en negatieve vrije ruimte per flexregel, omwikkelde rijen worden onafhankelijk gemeten, en kolomcontainers verdelen een expliciete of uit de inhoud afgeleide hoogte

CSS Grid

display:grid en display:inline-grid ondersteunen grid-template-columns, grid-template-rows, vaste, percentage- en fr-tracks, eenvoudige repeat() en minmax(), grid-column, grid-row, start- en end-properties, spans, gaps, automatische plaatsing per rij of kolom en uitlijning per item

Eén container accepteert ten hoogste 256 directe items en 64 rijen of kolommen; geneste inhoud gebruikt dezelfde HTML-renderer en layoutcache

Voetnoten

<footnote>, <aside style="float:footnote"> en <aside role="doc-footnote"> maken genummerde notities

Eindige textboxes reserveren de notitieruimte onderaan voordat latere bodyregels worden uitgelegd; een referentie en notitie die niet samen passen lopen door naar het volgende frame, en de vervolgingsstatus bewaart de nummering

Tabellen

<table>, <tr>, <td> en <th> renderen uitgemeten rijen met achtergronden, padding, randen, tekststijlen en colspan tot 64 kolommen

Kolommen delen de expliciete tabelbreedte of beschikbare breedte gelijk, header-cellen krijgen standaard vette tekst op een lichte background, en een rij loopt als één atomaire eenheid door in de volgende HTML-textbox

Geneste tabellen, rowspan, het samenvallen van randen en automatische kolombreedtebepaling op basis van de inhoud maken geen deel uit van deze subset

Afbeeldingen

<img src="name"> tekent een afbeelding die eerder met SetHTMLImage is gekoppeld

De renderer ondersteunt breedte, hoogte, marge, opvulling, rand, achtergrond en links-, midden- of rechtsuitlijning; als één dimensie ontbreekt, blijft de natuurlijke beeldverhouding behouden en voor weggelaten dimensies wordt 0.75 punten per bronpixel gebruikt

Afbeeldingsbronnen triggeren nooit netwerk- of bestandstoegang, meting registreert geen resources en herhaald gebruik hergebruikt de gebonden image XObject

Grenzen en herstel

Eén HTML-invoer accepteert maximaal 2048 stylesheet-regels, 256 bytes per selector, 4096 bytes per declaratieblok, 4096 tabelrijen en 4096 tabelcellen

Onbekende properties, selectors, tags en attributen worden genegeerd terwijl de omringende tekst behouden blijft; character references worden gedecodeerd en misvormde nesting wordt conservatief gesloten

Voorbeeld

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;