Appendix A: Supported HTML tags

Ο HTML renderer δέχεται οριοθετημένο υποσύνολο για rich text, δομημένα blocks, πίνακες και ρητά αντιστοιχισμένες εικόνες

Παράμετροι

Διαδοχή CSS

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

Οι selectors υποστηρίζουν tag, class, ID, tag.class και συνδυασμούς απογόνων με κενό· μη υποστηριζόμενα attribute selectors, pseudo selectors και combinators αδελφών ή τέκνων αγνοούνται

Οι δηλώσεις που ταιριάζουν χρησιμοποιούν specificity του CSS και τη σειρά προέλευσης, οι inline δηλώσεις έχουν προτεραιότητα και το !important τηρείται στο υποστηριζόμενο υποσύνολο

Υποστηριζόμενες ιδιότητες περιλαμβάνουν τις ιδιότητες κειμένου, φόντου, γραμματοσειράς, διακόσμησης, στοίχισης, line-height, margin, padding, περιγράμματος, πλάτους, ύψους, display και κατακόρυφης στοίχισης που παρατίθενται παρακάτω, συν τις ιδιότητες Flexbox, Grid και footnotes στις αντίστοιχες ενότητές τους

Τα μήκη δέχονται points, pixels με 0.75 points ανά pixel, μονάδες em, ποσοστά και τιμές σε points χωρίς μονάδα· τα μεγέθη γραμματοσειράς δέχονται επίσης την τυπική κλίμακα λέξεων από xx-small έως xx-large

Flexbox

Τα display:flex και display:inline-flex υποστηρίζουν flex-direction, flex-wrap, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content, gap, row-gap και column-gap

Containers γραμμών διανέμουν θετικό και αρνητικό ελεύθερο χώρο ανά flex γραμμή, αναδιπλωμένες γραμμές μετρώνται ανεξάρτητα, και containers στηλών διανέμουν ρητό ή από περιεχόμενο παραγόμενο ύψος

CSS Grid

Τα display:grid και display:inline-grid υποστηρίζουν grid-template-columns, grid-template-rows, στατικά, ποσοστιαία και fr tracks, απλά repeat() και minmax(), grid-column, grid-row, ιδιότητες start/end, spans, gaps, αυτόματη τοποθέτηση ανά γραμμή ή στήλη και στοίχιση ανά στοιχείο

Ένα container δέχεται το πολύ 256 direct στοιχεία και 64 γραμμές ή στήλες· το εμφωλευμένο περιεχόμενο χρησιμοποιεί τον ίδιο HTML renderer και cache διάταξης

Υποσημειώσεις

Τα <footnote>, <aside style="float:footnote"> και <aside role="doc-footnote"> δημιουργούν αριθμημένες σημειώσεις

Πεπερασμένα text boxes δεσμεύουν την περιοχή σημείωσης στο κάτω μέρος πριν τη διάταξη των επόμενων γραμμών σώματος· αναφορά και σημείωση που δεν χωράνε μαζί συνεχίζουν στο επόμενο frame, και η κατάσταση συνέχειας διατηρεί την αρίθμηση

Πίνακες

Τα <table>, <tr>, <td> και <th> αποδίδουν μετρημένες γραμμές με φόντα, padding, περιγράμματα, στυλ κειμένου και colspan έως 64 στήλες

Οι στήλες διαιρούν εξίσου το ρητό πλάτος πίνακα ή το διαθέσιμο πλάτος, τα κελιά επικεφαλίδας προεπιλέγονται σε έντονο κείμενο με ανοιχτό φόντο, και μια γραμμή συνεχίζει ως ένα ατομικό σύνολο στο επόμενο HTML text box

Οι εμφωλευμένοι πίνακες, το rowspan, η σύμπτυξη περιγραμμάτων και η αυτόματη ρύθμιση μεγέθους στηλών με βάση το περιεχόμενο δεν περιλαμβάνονται σε αυτό το υποσύνολο

Εικόνες

Το <img src="name"> σχεδιάζει εικόνα που έχει δεσμευτεί προηγουμένως με το SetHTMLImage

Ο renderer υποστηρίζει width, height, margin, padding, border, background και αριστερή, κεντρική ή δεξιά στοίχιση· μία διάσταση που λείπει διατηρεί τη φυσική αναλογία διαστάσεων, ενώ οι παραλειπόμενες διαστάσεις χρησιμοποιούν 0.75 points ανά pixel πηγής

Οι πηγές εικόνων δεν προκαλούν ποτέ network ή file πρόσβαση, η μέτρηση δεν καταχωρεί resources, και επαναλαμβανόμενη χρήση ξαναχρησιμοποιεί το δεσμευμένο image XObject

Όρια και ανάκτηση

Μία HTML είσοδος δέχεται το πολύ 2048 κανόνες stylesheet, 256 bytes ανά selector, 4096 bytes ανά declaration block, 4096 γραμμές πίνακα και 4096 κελιά πίνακα

Άγνωστες ιδιότητες, selectors, ετικέτες και attributes αγνοούνται ενώ το γύρω κείμενο διατηρείται· αναφορές χαρακτήρων αποκωδικοποιούνται και κακοσχηματισμένη εμφώλευση κλείνει συντηρητικά

Παράδειγμα

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;