Appendix A: Supported HTML tags

Renderer-ul HTML acceptă un subset delimitat pentru text bogat, blocuri structurate, tabele și imagini mapate explicit

Parametri

Cascada CSS

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

Selectorii suportă tag, clasă, ID, combinații tag.class și de descendenți cu spațiu alb; selectorii de atribute nesuportați, pseudo-selectorii și combinatoarele de frați sau de copii sunt ignorate

Declarațiile potrivite folosesc specificitatea CSS și ordinea sursă, declarațiile inline au prioritate, iar !important este onorat în interiorul subsetului suportat

Proprietățile suportate includ proprietățile de text, fundal, font, decorare, aliniere, line-height, margin, padding, chenar, lățime, înălțime, display și aliniere verticală listate mai jos, plus proprietățile Flexbox, Grid și de note de subsol din secțiunile lor respective

Lungimile acceptă puncte, pixeli la 0,75 puncte per pixel, unități em, procente și valori de puncte fără unitate; dimensiunile fontului acceptă și scara standard de cuvinte cheie de la xx-small până la xx-large

Flexbox

display:flex și display:inline-flex suportă flex-direction, flex-wrap, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content, gap, row-gap și column-gap

Containerele de rând distribuie spațiul liber pozitiv și negativ per linie flex, rândurile împachetate sunt măsurate independent, iar containerele de coloană distribuie o înălțime explicită sau derivată din conținut

CSS Grid

display:grid și display:inline-grid suportă grid-template-columns, grid-template-rows, pistele fixe, procentuale și fr, repeat() simplu și minmax(), grid-column, grid-row, proprietățile de start și de end, întinderile, golurile, plasarea automată pe rând sau pe coloană și alinierea per element

Un container acceptă cel mult 256 de elemente directe și 64 de rânduri sau coloane; conținutul imbricat folosește același renderer HTML și același cache de layout

Note de subsol

<footnote>, <aside style="float:footnote"> și <aside role="doc-footnote"> creează note numerotate

Casetele de text finite rezervă zona de note de jos înainte de a aranja liniile de corp ulterioare; o referință și o notă care nu încap împreună continuă în cadrul următor, iar starea de continuare păstrează numerotarea

Tabele

<table>, <tr>, <td> și <th> afișează rânduri măsurate cu fundaluri, padding, borduri, stiluri de text și colspan până la 64 de coloane

Coloanele împart egal lățimea explicită a tabelului sau lățimea disponibilă, celulele de antet au implicit text îngroșat pe fundal deschis, iar un rând continuă ca o unitate atomică în următoarea casetă de text HTML

Tabelele imbricate, rowspan, fuziunea chenarelor și dimensionarea automată a coloanelor după conținut nu fac parte din acest subset

Imagini

<img src="name"> desenează o imagine legată anterior cu SetHTMLImage

Renderer-ul suportă width, height, margin, padding, chenar, fundal și aliniere la stânga, centru sau dreapta; o dimensiune lipsă păstrează raportul de aspect natural, iar dimensiunile omise folosesc 0,75 puncte per pixel sursă

Sursele de imagini nu declanșează niciodată acces la rețea sau la fișiere, măsurarea nu înregistrează resurse, iar utilizarea repetată refolosește image XObject-ul legat

Limite și recuperare

O intrare HTML acceptă cel mult 2048 de reguli de stylesheet, 256 de octeți per selector, 4096 de octeți per bloc de declarații, 4096 de rânduri de tabel și 4096 de celule de tabel

Proprietățile, selectorii, tagurile și atributele necunoscute sunt ignorate, cât timp textul din jur este păstrat; referințele de caractere sunt decodate, iar imbricările malformate sunt închise conservator

Exemplu

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;