danfickle / danfickle/openhtmltopdf

Absolute positioning fails in some common cases

Open
#668 2 comments 2 reactions 1 assignee Claimed by @danfickle View on GitHub
Dominant language
Java
Stars
2.2k
Forks
423
PR merge metrics
No merged PRs in 30d

Description

I noticed that absolute positioning has a few annoying defects in the way it deals with vertical lengths:
1) **anchoring to page bottom**: anchoring an element to page bottom makes it leak to next page (obviously, it should stay entirely on the target page, see test cases 2 and 3 here below)
2) **wrong resolution of relative references to element height**: element height in percentage is wrongly resolved (see test case 6 here below)

Test cases


No automated test suite here, just my observations from casual trials (made a bit more systematic to evaluate fringe cases). This is the code chunk used to generate the renderings:

```java
try (OutputStream os = new FileOutputStream(new File("absolute.pdf"))) {
try (PdfBoxRenderer renderer = new PdfRendererBuilder().withFile(new File("absolute.html"))
.toStream(os).buildPdfRenderer()) {
renderer.createPDF();
}
}
```
And this is the source HTML body:

```html


1-Some contents to fill
-What?
2-Some contents to
fill
-What?
3-Some contents to fill
-What?

4-Some contents to fill
-What?
5-Some contents to
fill
-What?
6-Some contents to fill
-What?

7-Some contents to fill
-What?
8-Some contents to
fill
-What?
9-Some contents to fill
-What?

10-Some contents to fill
-What?
11-Some contents to
fill
-What?

```

NOTE: All the outputs are compared side-by-side with renderings by Chrome/Blink engine (print mode).

1. top-left at page top-left: OK

```html
.element {
position: absolute;

left: 0;
top: 0;
}
```
[absolute_topleft.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135650/absolute_topleft.html.txt)


absolute_topleft_ohtp
absolute_topleft_chrome

[absolute_topleft.pdf](https://github.com/danfickle/openhtmltopdf/files/6135651/absolute_topleft.pdf)

2. bottom-left at page bottom-left: FAILED


The element wrongly leaks down to next page. It seems like a limit condition during the placement of last text line tested true despite the height of its containing div was purposely calculated to make enough room for it.

```html
.element {
position: absolute;

left: 0;
bottom: 0;
}
```
[absolute_bottomleft.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135656/absolute_bottomleft.html.txt)


absolute_bottomleft_ohtp
absolute_bottomleft_chrome

[absolute_bottomleft.pdf](https://github.com/danfickle/openhtmltopdf/files/6135657/absolute_bottomleft.pdf)

3. bottom-right at page bottom-right: FAILED


The element wrongly leaks down to next page, same as test case 2.

```html
.element {
position: absolute;

right: 0;
bottom: 0;
}
```
[absolute_bottomright.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135658/absolute_bottomright.html.txt)


absolute_bottomright_ohtp
absolute_bottomright_chrome

[absolute_bottomright.pdf](https://github.com/danfickle/openhtmltopdf/files/6135659/absolute_bottomright.pdf)

4. top-left at page center: OK


The element leaks down to next page as expected.

```html
.element {
position: absolute;

left: 50%;
top: 50%;
}
```
[absolute_topleft-center.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135660/absolute_topleft-center.html.txt)


absolute_topleft-center_ohtp
absolute_topleft-center_chrome

[absolute_topleft-center.pdf](https://github.com/danfickle/openhtmltopdf/files/6135661/absolute_topleft-center.pdf)

5. bottom-right at page center: OK


The element leaks above the page to nowhere as expected.

```html
.element {
position: absolute;

right: 50%;
bottom: 50%;
}
```
[absolute_bottomright-center.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135667/absolute_bottomright-center.html.txt)


absolute_bottomright-center_ohtp
absolute_bottomright-center_chrome

[absolute_bottomright-center.pdf](https://github.com/danfickle/openhtmltopdf/files/6135669/absolute_bottomright-center.pdf)

6. center at page center (transform): FAILED


Wrong element height calculated for vertical translation (element should move upwards by 50% of its height).

```html
.element {
position: absolute;

left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
```
[absolute_center.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135674/absolute_center.html.txt)


absolute_center_ohtp
absolute_center_chrome

[absolute_center.pdf](https://github.com/danfickle/openhtmltopdf/files/6135675/absolute_center.pdf)

7. rotate around center (transform): OK

```html
.element {
position: absolute;

left: 50mm;
top: 50mm;
transform: rotate(-45deg);
}
```
[absolute_rotate-center.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135677/absolute_rotate-center.html.txt)


absolute_rotate-center_ohtp
absolute_rotate-center_chrome

[absolute_rotate-center.pdf](https://github.com/danfickle/openhtmltopdf/files/6135679/absolute_rotate-center.pdf)

8. rotate around top-left (transform): OK

```html
.element {
position: absolute;

left: 50mm;
top: 50mm;
transform-origin: 0 0;
transform: rotate(-45deg);
}
```
[absolute_rotate-topleft.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135680/absolute_rotate-topleft.html.txt)


absolute_rotate-topleft_ohtp
absolute_rotate-topleft_chrome

[absolute_rotate-topleft.pdf](https://github.com/danfickle/openhtmltopdf/files/6135681/absolute_rotate-topleft.pdf)

9. rotate around bottom-right (transform): OK

```html
.element {
position: absolute;

left: 50mm;
top: 50mm;
transform-origin: 100% 100%;
transform: rotate(-45deg);
}
```
[absolute_rotate-bottomright.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135682/absolute_rotate-bottomright.html.txt)


absolute_rotate-bottomright_ohtp
absolute_rotate-bottomright_chrome

[absolute_rotate-bottomright.pdf](https://github.com/danfickle/openhtmltopdf/files/6135683/absolute_rotate-bottomright.pdf)

10. size relative to page (partial and full): OK

```html
.element {
position: absolute;

left: 0;
top: 0;
width: 50%;
height: 50%;
}
```
[absolute_size-relative.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135685/absolute_size-relative.html.txt)


absolute_size-relative_ohtp
absolute_size-relative_chrome

[absolute_size-relative.pdf](https://github.com/danfickle/openhtmltopdf/files/6135688/absolute_size-relative.pdf)

```html
.element {
position: absolute;

left: 0;
top: 0;
width: 100%;
height: 100%;
}
```
[absolute_size-relative-full.html.txt](https://github.com/danfickle/openhtmltopdf/files/6135689/absolute_size-relative-full.html.txt)


absolute_size-relative-full_ohtp
absolute_size-relative-full_chrome

[absolute_size-relative-full.pdf](https://github.com/danfickle/openhtmltopdf/files/6135690/absolute_size-relative-full.pdf)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.