레이아웃 엔진
레이아웃 엔진
레이아웃 레이어는 스타일이 적용된 DOM을 기하학으로 변환합니다: 박스 트리, 그 다음 크기와 위치를 가진 프래그먼트. 이는 계산된 스타일 이후 단계이며, 그 출력은 검사할 수 있는 일반 Python 객체입니다.
DOM에서 박스 트리로
build_box_tree()는 스타일이 적용된 문서에서 BoxNode개의 BoxRoot을 생성하고, 각 요소의 디스플레이 모델을 classify_display()을 통해 Display 열거형과 비교하여 분류합니다. ComputedStyle와 EdgeSizes는 박스당 스타일 및 박스 모델 측정을 담고 있습니다.
블록 레이아웃
layout_block_tree()는 박스 트리 위에서 블록 레벨 레이아웃을 수행하고, 해결된 기하학을 가진 BlockFragment개의 항목을 포함하는 FragmentRoot을 생성합니다.
인라인 레이아웃
인라인 콘텐츠는 ShapedRun와 InlineTextFragment 조각으로 형성되고, layout_inline_fragments()와 flush_inline_run()를 통해 LineFragment 라인으로 조립됩니다.
Pagination
paginate_fragments()은 프래그먼트 출력을 PageFragment 페이지로 분할하고, BreakHints을 준수하며, PageMarginBoxes이 페이지 여백 영역을 모델링하고 flush_page()가 각 페이지를 마무리합니다.
팁 및 모범 사례
- 레이아웃 전에 계산된 스타일을 해결하세요 — 박스 트리는 스타일이 적용된 요소에서 파생됩니다.
EdgeSizes을 검사하세요, 박스 차원이 잘못 보일 때; 여백과 패딩은 그곳에서 해결됩니다.- 정신적 모델에서 박스 트리와 프래그먼트 트리를 구분하세요: 박스는 구조를 설명하고, 프래그먼트는 배치된 기하학을 설명합니다.
일반적인 문제
| 문제 | 원인 | 수정 |
|---|---|---|
| 빈 조각 출력 | 스타일이 없거나 비어있는 트리에서 레이아웃 실행 | 스타일시트와 콘텐츠를 먼저 첨부 |
| 예상치 못한 표시 분류 | 요소의 계산된 display이 가정과 다릅니다 | 상자에 대한 classify_display() 결과를 확인하십시오 |
| 페이지 나누기가 이상한 위치에 있습니다 | 구분 힌트가 설정되지 않았습니다 | BreakHints을(를) paginate_fragments()에 제공하십시오 |
FAQ
박스와 프래그먼트의 차이점은 무엇인가요?
박스(BoxNode)는 스타일에서 파생된 레이아웃 구조를 설명하고; 프래그먼트(BlockFragment, LineFragment)는 기하학적 정보를 가진 배치된 결과입니다.
엔진이 페이지 매김을 처리합니까?
예 — paginate_fragments()는 여백 박스가 있는 PageFragment 페이지를 생성합니다.
텍스트 런은 어디에서 오나요?
인라인 콘텐츠는 ShapedRun 객체로 형성되고 LineFragment 라인으로 조립됩니다.
API Reference 요약
| 클래스/메서드 | 설명 |
|---|---|
build_box_tree | 스타일이 적용된 DOM에서 상자 트리를 파생합니다 |
layout_block_tree | 박스 트리 위에 블록 레이아웃을 실행합니다 |
layout_inline_fragments | 인라인 콘텐츠를 줄로 조립합니다 |
paginate_fragments | 조각을 페이지로 분할합니다 |
BoxNode | 레이아웃 구조에 있는 하나의 박스 |
PageFragment | 한 페이지 레이아웃 |