Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • VGT
    #26772

    Hello,

    I’m testing newest pd4ml version downloaded today and have two problems with setting relative position.

    1. combining position:relative with overflow:hidden
    In first example i define div.page to have 200px height and hidden overflow. There is more content and it’s hidden properly, but part of first page is rendered on top of second page. If You’ll remove “position:relative” from div.page styling, problem is gone. But this is only test case for more complicated design I have and I need relative positioning there so removing it is not a solution.

    Html:
    [language=html:3n4q9bqm]



    Page one

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Page two

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
    sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
    tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
    eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
    nisi, in interdum massa nibh nec erat.


    [/language:3n4q9bqm]

    2. child with position:absolute
    Second example have div with size 400×200 and two smaller divs 190×190 each placed inside bigger div with absolute positioning. It works, but only on first page. When I copy same html to second page, there is only 400×200 container div. Two smaller divs are rendered on first page.

    Html:

    [language=html:3n4q9bqm]



    first
    second
    first
    second

    [/language:3n4q9bqm]

    OS:
    Win7
    Java:
    java version “1.7.0_05”
    Java(TM) SE Runtime Environment (build 1.7.0_05-b05)
    Java HotSpot(TM) 64-Bit Server VM (build 23.1-b03, mixed mode)

    Commands I use for generating PDF’s:

    java -cp pd4mlpd4ml_demo.jar Pd4Cmd file:test-overflow.html 900 -out test-overflow.pdf -insets 5,5,5,5,mm
    java -cp pd4mlpd4ml_demo.jar Pd4Cmd file:test-absolute.html 900 -out test-absolute.pdf -insets 5,5,5,5,mm

    Am I doing something wrong with these test cases, or it’s a bug in pd4ml?

    #29104

    The forthcoming PD4ML release fixes the issue #1 (overflow: hidden).

    Unfortunately the second issue cannot be fixed with the current PD4ML architecture.

    Layouts with absolute positioning + page breaks are still handled differently by different browsers in print mode – there is no common practice, accepted by every web browser vendor (as far as I know).

    Some of them print absolutely positioned elements on the first page only. Some of them respect page breaks in absolute positioning coordinates, some (and PD4ML) do not. In absolute positioning model PD4ML interprets a sequence of PDF pages as a continuous space without page breaks.

    The visual defects of the resulting PDF layout are caused by an attempt to combine elements, belong to different positioning schema.

    I could only recommend to redesign the layout and to avoid absolutely positioned elements there.

    VGT
    #29105

    Thank You for Your response. I will test this release as soon as it will be available. Regarding second issue, I understand the problem with this and I will take a look what can I do with my design to fix it.

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘HTML/CSS rendering issues’ is closed to new topics and replies.