Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blocks with text displays in one line for absolute positioning. #886

Closed
denyskotsur opened this issue Jun 20, 2019 · 2 comments
Closed

Blocks with text displays in one line for absolute positioning. #886

denyskotsur opened this issue Jun 20, 2019 · 2 comments

Comments

@denyskotsur
Copy link

Hello everyone,

I'm getting stuck with displaying pdf for absolute positioned divs with text.

The HTML rendered in browser:
image

PDF output:
image

The HTML code being used (it's automatically generated code and one-lined):

<html><style>
    @page {
        size: 6.25in 4.25in;
        margin: 0;
    }

    @font-face {
        font-family: "Arial";
        src: url("https://f001.backblazeb2.com/file/inkit-cdn/arial.ttf")
        format("truetype");
    }

    @font-face {
        font-family: "Times New Roman";
        src: url("https://f001.backblazeb2.com/file/inkit-cdn/times-new-roman.ttf")
        format("truetype");
    }

    @font-face {
        font-family: "Courier New";
        src: url("https://f001.backblazeb2.com/file/inkit-cdn/courier-new.ttf")
        format("truetype");
    }
</style><body style="user-select:none;margin:0"><div style="width:6.25in;height:4.25in;position:relative"><div><div style="position:absolute;left:0in;top:0in;z-index:5002;right:0;bottom:0;padding:0.1875in;background:"><div style="position:relative"><div style="position:absolute;left:calc(0.5416666666666666in - 0.5em);top:calc(1.03125in - 0.5em);z-index:5003;padding:0.5em;font-size:16px;line-height:120%"><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;;color:#000">Click me to </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"></span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;;color:#000"> edit</span></div><div style="position:absolute;left:calc(1.0104166666666667in - 0.5em);top:calc(1.760416666666667in - 0.5em);z-index:5003;padding:0.5em;font-size:16px;line-height:120%"><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">Mr. D&#x27;s Bar &amp; Grill</span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"> </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">ATTN Owner</span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"> </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"></span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"> </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">5622 Grand Ave</span></div><div style="position:absolute;left:calc(0.6458333333333335in - 0.5em);top:calc(2.3541666666666665in - 0.5em);z-index:5003;padding:0.5em;font-size:16px;line-height:120%"><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"></span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"> </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">Duluth</span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"> </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">MN</span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;"> </span><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">55807</span></div><div style="position:absolute;left:calc(1.625in - 0.5em);top:calc(2.8958333333333335in - 0.5em);z-index:5003;padding:0.5em;font-size:16px;line-height:120%"><span style="white-space:pre-wrap;user-select:none;font-size:12pt;font-family:&#x27;Times New Roman&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;">US</span></div></div></div></div><div style="position:absolute;left:0.1875in;top:0.1875in;right:0.1875in;bottom:0.1875in"></div></div></body></html>

Seems that during conversion it ignores width and height, but not sure.

Any help is appreciated.
Thanks.
@denyskotsur denyskotsur changed the title Blocks with text displays in one line for absolute positioning. Blocks with text display in one line for absolute positioning. Jun 20, 2019
@denyskotsur denyskotsur changed the title Blocks with text display in one line for absolute positioning. Blocks with text displays in one line for absolute positioning. Jun 20, 2019
@Tontyna
Copy link
Contributor

Tontyna commented Jun 20, 2019

It's calc() not being implemented (#357), so top an left of the absolute positioned divs is zero.
You should see a warning "Ignored" in the log.

@liZe
Copy link
Member

liZe commented Jun 20, 2019

Yes, it's sad… I close this issue as it's a duplicate of #357, we'll do our best to close it as soon as possible, but it's hard work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@liZe @denyskotsur @Tontyna