Appendix A: Supported HTML tags

HTML 렌더러는 리치 텍스트, 구조화된 블록, 표 및 명시적으로 매핑된 이미지에 대해 제한된 하위 집합을 허용합니다

매개변수

`<p>`, `<br>`	기존 단락 맞춤 및 간격 속성을 포함한 단락과 강제 줄바꿈
`<h1>` through `<h6>`	기본 크기가 점차 작아지는 굵은 블록 제목
`<div>`, `<section>`, `<article>`, `<header>`, `<footer>`, `<main>`	블록 컨테이너
`<blockquote>`	들여쓴 블록 콘텐츠
`<ul>`, `<ol>`, `<li>`	중첩된 순서 없는 목록과 순서 있는 목록
`<b>`, `<strong>`, `<i>`, `<em>`	굵게 및 기울임꼴 텍스트
`<sup>`, `<sub>`, `<u>`	위 첨자, 아래 첨자, 밑줄, 이중 밑줄, 취소선 및 윗줄
`<font>`, `<span>`	레거시 글꼴, 색상, 배경, 윤곽선, 텍스트 렌더링 모드 및 둥근 배경 속성
`<a href="...">`	HTTP, HTTPS 및 파일 하이퍼링크

CSS 캐스케이드

규칙은 <style> 요소 또는 인라인 style 특성에 나타날 수 있습니다

선택자는 태그, 클래스, ID, tag.class 및 공백 하위 항목 조합을 지원하며, 지원되지 않는 특성 선택자, 의사 선택자 및 형제 또는 자식 결합자는 무시됩니다

일치하는 선언은 CSS 구체성과 소스 순서를 사용하고 인라인 선언이 우선하며 지원되는 하위 집합에서 !important를 따릅니다

지원되는 속성에는 아래 나열된 텍스트, 배경, 글꼴, 장식, 정렬, 줄 높이, 여백, 패딩, 테두리, 너비, 높이, 표시 및 세로 정렬 속성과 각 섹션의 Flexbox, Grid 및 각주 속성이 포함됩니다

길이에는 포인트, 픽셀당 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 그리드

display:grid와 display:inline-grid는 grid-template-columns, grid-template-rows, 고정, 백분율 및 fr 트랙, 단순 repeat() 및 minmax(), grid-column, grid-row, 시작 및 끝 속성, 범위, 간격, 행 또는 열 자동 배치와 항목별 정렬을 지원합니다

컨테이너 하나에는 직접 항목을 최대 256개, 행 또는 열을 최대 64개까지 넣을 수 있으며 중첩 콘텐츠는 같은 HTML 렌더러와 레이아웃 캐시를 사용합니다

각주

<footnote>, <aside style="float:footnote"> 및 <aside role="doc-footnote">는 번호가 매겨진 주석을 만듭니다

유한한 텍스트 상자는 이후 본문 줄을 배치하기 전에 아래쪽에 메모 영역을 예약합니다. 참조와 메모가 함께 들어가지 않으면 다음 프레임에서 이어지며 연속 상태는 번호를 유지합니다

표

<table>, <tr>, <td> 및 <th>는 배경, 안쪽 여백, 테두리, 텍스트 스타일과 최대 64열의 colspan을 사용하여 측정된 행을 렌더링합니다

열은 명시적 표 너비 또는 사용 가능한 너비를 균등하게 나누고 머리글 셀은 기본적으로 밝은 배경의 굵은 텍스트를 사용하며 한 행은 다음 HTML 텍스트 상자에서도 하나의 원자적 단위로 이어집니다

중첩 표, rowspan, 테두리 병합 및 콘텐츠 기반 자동 열 크기 조정은 이 하위 집합에 포함되지 않습니다

이미지

<img src="name">은 이전에 SetHTMLImage로 바인딩한 이미지를 그립니다

렌더러는 너비, 높이, 여백, 패딩, 테두리, 배경 및 왼쪽, 가운데 또는 오른쪽 정렬을 지원합니다. 한쪽 치수만 생략하면 원래 종횡비가 유지되며 두 치수를 모두 생략하면 소스 픽셀당 0.75포인트를 사용합니다

이미지 소스는 네트워크 또는 파일 액세스를 일으키지 않고 측정은 리소스를 등록하지 않으며 반복 사용 시 바인딩된 이미지 XObject를 재사용함

경계 및 복구

하나의 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;