Appendix A: Supported HTML tags

HTML レンダラーは、リッチテキスト、構造化ブロック、テーブル、および明示的にマッピングされた画像向けの制限付きサブセットを受け入れます

パラメータ

CSS カスケード

ルールは <style> 要素またはインライン style 属性内に記述できます

セレクターはタグ、クラス、ID、tag.class、空白による子孫の組み合わせに対応します。非対応の属性セレクター、疑似セレクター、兄弟または子コンビネーターは無視されます

一致する宣言は CSS の詳細度とソース順序に従い、インライン宣言が優先され、対応サブセット内では !important が尊重されます

対応プロパティには、以下に示すテキスト、背景、フォント、装飾、配置、行高、マージン、パディング、境界線、幅、高さ、表示、垂直配置の各プロパティと、それぞれのセクションにある Flexbox、Grid、脚注プロパティが含まれます

長さにはポイント、1 ピクセルあたり 0.75 ポイントのピクセル、em 単位、パーセント、単位なしのポイント値を指定できる。フォントサイズには 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 に対応します

行コンテナーは flex 行ごとに正負の空きスペースを分配し、折り返し行は個別に測定され、列コンテナーは明示的またはコンテンツ由来の高さを分配します

CSS Grid

display:grid と display:inline-grid は、grid-template-columns、grid-template-rows、固定、パーセント、fr トラック、単純な repeat() と minmax()、grid-column、grid-row、開始および終了プロパティ、スパン、ギャップ、行または列の自動配置、および項目ごとの配置に対応します

1 つのコンテナーは直接項目を最大 256 個、行または列を最大 64 個受け入れます。ネストされたコンテンツは同じ HTML レンダラーとレイアウトキャッシュを使用します

脚注

<footnote>、<aside style="float:footnote">、<aside role="doc-footnote"> は番号付き注を作成します

有限のテキストボックスは後続の本文行を配置する前に下部の注領域を確保します。参照と注が一緒に収まらない場合は次のフレームへ続き、継続状態によって番号が維持されます

表

<table>、<tr>、<td>、<th> は、背景、余白、罫線、テキストスタイル、および最大 64 列の colspan を含む測定済み行をレンダリングする

列は明示的な表幅または利用可能幅を均等に分割し、見出しセルは既定で明るい背景の太字テキストとなり、行は次の HTML テキストボックスでも 1 つの不可分な単位として続きます

ネストテーブル、rowspan、境界線の結合、コンテンツに基づく列幅の自動調整はこのサブセットに含まれません

画像

<img src="name"> は、以前に SetHTMLImage でバインドされた画像を描画します

レンダラーは、幅、高さ、マージン、パディング、境界線、背景、および左揃え、中央揃え、右揃えをサポートします。片方の寸法を省略すると自然なアスペクト比が保持され、両方を省略するとソースピクセルあたり 0.75 ポイントが使用されます

画像ソースはネットワークアクセスやファイルアクセスを行わず、測定はリソースを登録せず、繰り返しの使用ではバインド済みの画像 XObject を再利用します

境界と復旧

1 つの HTML 入力で受け入れられる上限は、スタイルシート規則 2048 個、セレクターあたり 256 バイト、宣言ブロックあたり 4096 バイト、テーブル行 4096、テーブルセル 4096 です

未知のプロパティ、セレクター、タグ、属性は無視されますが、周囲のテキストは維持されます。文字参照はデコードされ、不正なネストは保守的に閉じられます

例

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;