Appendix A: Supported HTML tags

Der HTML-Renderer akzeptiert eine begrenzte Teilmenge für Rich Text, strukturierte Blöcke, Tabellen und explizit zugeordnete Bilder

Parameter

CSS-Kaskade

Regeln können in <style>-Elementen oder Inline-Attributen style erscheinen

Selektoren unterstützen Tag, Klasse, ID, tag.class und durch Leerzeichen getrennte Nachfolgerkombinationen; nicht unterstützte Attributselektoren, Pseudoselektoren sowie Geschwister- oder Kindkombinatoren werden ignoriert

Übereinstimmende Deklarationen verwenden CSS-Spezifität und Quellreihenfolge, Inline-Deklarationen haben Vorrang, und !important wird innerhalb der unterstützten Teilmenge berücksichtigt

Unterstützte Eigenschaften umfassen die unten aufgeführten Eigenschaften für Text, Hintergrund, Schriftart, Dekoration, Ausrichtung, Zeilenhöhe, Rand, Innenabstand, Rahmen, Breite, Höhe, Anzeige und vertikale Ausrichtung sowie die Flexbox-, Grid- und Fußnoteneigenschaften in ihren jeweiligen Abschnitten

Längen akzeptieren Punkte, Pixel mit 0,75 Punkten pro Pixel, em-Einheiten, Prozentwerte und einheitenlose Punktwerte; Schriftgrößen akzeptieren außerdem die Standardskala mit Schlüsselwörtern von xx-small bis xx-large

Flexbox

display:flex und display:inline-flex unterstützen flex-direction, flex-wrap, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content, gap, row-gap und column-gap

Zeilencontainer verteilen positiven und negativen freien Platz pro Flex-Zeile, umbrochene Zeilen werden unabhängig gemessen und Spaltencontainer verteilen eine explizite oder aus dem Inhalt abgeleitete Höhe

CSS Grid

display:grid und display:inline-grid unterstützen grid-template-columns, grid-template-rows, feste, prozentuale und fr-Tracks, einfaches repeat() und minmax(), grid-column, grid-row, Start- und Endeigenschaften, Spans, Abstände, automatische Zeilen- oder Spaltenplatzierung und Ausrichtung pro Element

Ein Container nimmt höchstens 256 direkte Elemente und 64 Zeilen oder Spalten auf; verschachtelte Inhalte verwenden denselben HTML-Renderer und Layoutcache

Fußnoten

<footnote>, <aside style="float:footnote"> und <aside role="doc-footnote"> erstellen nummerierte Notizen

Textfelder mit endlicher Größe reservieren den Notizbereich am unteren Rand, bevor spätere Fließtextzeilen gesetzt werden; ein Verweis und eine Notiz, die nicht gemeinsam passen, werden im nächsten Rahmen fortgesetzt, wobei der Fortsetzungszustand die Nummerierung erhält

Tabellen

<table>, <tr>, <td> und <th> rendern vermessene Zeilen mit Hintergründen, Innenabständen, Rahmen, Textstilen und colspan für bis zu 64 Spalten

Spalten teilen die explizite Tabellenbreite oder verfügbare Breite gleichmäßig auf, Kopfzellen verwenden standardmäßig fetten Text auf hellem Hintergrund und eine Zeile wird als unteilbare Einheit im nächsten HTML-Textfeld fortgesetzt

Verschachtelte Tabellen, rowspan, zusammenfallende Rahmen und eine automatische inhaltsgesteuerte Spaltenbreite gehören nicht zu dieser Teilmenge

Bilder

<img src="name"> zeichnet ein zuvor mit SetHTMLImage gebundenes Bild

Der Renderer unterstützt Breite, Höhe, Rand, Innenabstand, Rahmen, Hintergrund und links-, zentriert- oder rechtsbündige Ausrichtung. Fehlt eine Abmessung, bleibt das natürliche Seitenverhältnis erhalten; fehlen beide, werden 0,75 Punkte pro Quellpixel verwendet

Bildquellen lösen niemals Netzwerk- oder Dateizugriffe aus, die Messung registriert keine Ressourcen und wiederholte Verwendung nutzt das gebundene Bild-XObject erneut

Grenzwerte und Wiederherstellung

Eine HTML-Eingabe akzeptiert höchstens 2048 Stylesheet-Regeln, 256 Byte pro Selektor, 4096 Byte pro Deklarationsblock, 4096 Tabellenzeilen und 4096 Tabellenzellen

Unbekannte Eigenschaften, Selektoren, Tags und Attribute werden ignoriert, während der umgebende Text erhalten bleibt; Zeichenreferenzen werden dekodiert und fehlerhafte Verschachtelungen konservativ geschlossen

Beispiel

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;