Welcome Guest Search | Active Topics | Sign In | Register

HTML to PDF Links with absolute positioning Options
Tim
Posted: Tuesday, April 8, 2014 10:47:06 AM
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>
eo_support
Posted: Tuesday, April 8, 2014 12:07:56 PM
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!
Tim
Posted: Wednesday, April 9, 2014 7:02:24 AM
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
eo_support
Posted: Wednesday, April 9, 2014 12:35:32 PM
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!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.