Rank: Member Groups: Member
Joined: 4/8/2014 Posts: 12
|
Hi, I am currently evaluating both WPF web browser and HTML to PDF conversion. When the html contains an absolute positioned image within a link, the link is not generated in the pdf output so the image is not clickable Here is a small html sample to demonstrate the issue. Thanks Tim
Code: HTML/ASPX
<!DOCTYPE html>
<html>
<head>
<style>
img
{
position: absolute;
}
</style>
</head>
<body >
<a href="test.jpg">
<img src="test.jpg" alt="">
</a>
</body>
</html>
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
Thanks for posting in the forum. This appears to be a problem. However you may want to avoid this kind of construct in your HTML.
The root of the problem is inside a browser the event are handled according to the DOM model (and in combination with JavaScript sometimes), while as the DOM tree does not exist inside a PDF file.
When you click an element inside a browser, the event first travels from the root node down to the node that was clicked (called capturing phase), then travels from the node back to the root (called bubbling phase). In your case, when the IMG element was clicked and the click event is bubbled to the A element, the A element handles it and trigger the navigation.
While this makes perfect sense, there is a small inconsistency here: the IMG element is not visually inside the A element. The actual size of the A element is (0, 0) since it's only children element is positioned. Likewise, it is possible for you to create multiple regions on your page that are far apart from each other but would respond to the same link. For example, you can absolute positioning an IMG at the top of the page, and another IMG at the bottom of the page and put them inside the same A element. When either IMG element is clicked the A element will navigate even though visually neither IMG is inside the A element (not to mention that they are far apart from each other). It works this way because the event travels back from the IMG element to the A element based on the DOM tree regardless where the IMG element is.
As DOM tree does not exist inside a PDF file, we can not use the same capturing/bubbling mechanism used by the browser. Instead of relying on the DOM tree, we rely on the visible region of the A element. As such if you clicked inside the boundary of the A element, then navigation occurs. In your case, since the size of the A element is (0, 0), so nothing happens.
While it might be technically possible to calculate the visible region of the all the child elements and check whether the click event occurs inside the child element's boundary as well, in practice the benefit might out weight the cost. First it would slow down the conversion (since we would have to combine the visible region of all children element), second it would increase the PDF file size (since we have to store additional data in the file), not to mention the added code complexity and the visual inconsistency this can cause such as clicking two different region triggers the same link. So it's probably not worth it for us to go down that route. As such the best way is probably for you to avoid this kind of construct in your HTML.
Hope this gives you a clear picture of the issue. Please feel free to let us know if you have any more questions.
Thanks!
|
Rank: Member Groups: Member
Joined: 4/8/2014 Posts: 12
|
Hi,
Thanks for the comprehensive reply and clear explanation. I have rehashed the HTML to not to use absolute positioning and all is working correctly
Thanks for you help Tim
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Great. Glad that everything is working for you! Please feel free to let us know if you have any other questions.
Thanks!
|