rasterizeHTML.js
rasterizeHTML.js copied to clipboard
cburgmer
Don't add padding and margin to HTML fragments
Passing HTML fragments to drawHTML() will automatically apply padding/margin to the body element (see #77). This should be suppressed.
There seems to be no clear way for distinguishing a full HTML document from a fragment. The HTML5 parser is very forgiving and so even a short fragment like <style>...</style><i>...</i> ends up being a valid document in its canonical form <html><head><style>...</style></head><body><i>...</i></body></html>. Thus any combination of HTML can potentially represent a full document and so discarding the <body> element (the one triggering the margin) for just retaining its children does not seem acceptable.
The only option left seems to have the user provide the information we need. Something like drawHtmlFragment() could then work around the margin issue.
- [ ] Can we handle fragments or just a single element.
- [ ] Return parse errors for fragments via promise?
- [ ] Render in WebKit
- [ ] Rename
drawHTMLtodrawHtmlDocument - [ ] Proper camel casing for all methods (HTML vs Html)
a workaround if anyone fall into this padding issue:
const wrapHTML = (html) =>
`
<html>
<head>
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>${html}</body>
</html>
`;
It's been a while, but the issue I think was that in Chrome + Safari the foreignObject gets height 0, although the content's height is greater than that. Not sure whether reading https://stackoverflow.com/questions/12540436/height-of-parent-div-is-zero-even-if-it-has-child-with-finite-heights can help.