minPresenceAhead - calculating the meaning of 'presence' on next sibling element

Hello,

Great library! Thanks for maintaining it. Using

@react-pdf/renderer": "2.0.0-beta.5

I have a problem with minPresenceAhead, which is advertised as a way of ensuring that headings do not get rendered at the bottom of a page

Here’s a screenshot.

The header text ‘1.6 Effect of Covid-19 on the fetus’ is produced with the following component

const createH2ViewElement = (node, bodyTextColorString) => {
    
    return createElement(
        View,
        {
            //stops headers appearing at the bottom of the page
            minPresenceAhead: 1,
            key: uuidv4(),
            debug:true
        },
        createElement(
            Text,
            //add the special style props to the element
            {
                //add the custom styles
                style: {...dynamicStyles.styledHeader2, color: bodyTextColorString},
                //add the unique key
                key: uuidv4()
            },
            //then we pass in the children of the json object
            node.childNodes.map(child => JsonToPdfComponent(child, bodyTextColorString))
        )
    );
    
};

and then the following text starting ‘There are currently no data…’ is produced with the following component, which has no borders, padding or margins at the top.

const createParagraphTextElement = (node, bodyTextColorString) => {
    
    //first we define the function that will return the standard paragraph element when called
    const paragraphElement = (input) => {
        return createElement(
            Text,
            //add the special style props to the element
            {
                //add the custom styles
                style: {...dynamicStyles.styledParagraph, color: bodyTextColorString},
                //add the unique key
                key: uuidv4(),
                debug:true
            },
            //then we pass in the children of the json object
            input.childNodes.map(child => JsonToPdfComponent(child, bodyTextColorString))
        );
    };
    //then we have to check for nested images
    const nestedImage = findNestedImage(node);
    //if there's no nested image then we return the standard paragraph element
    if (!nestedImage) { return paragraphElement(node); }
    //otherwise we need to know if we're looking at an image intended to be inlined in the paragraph or if it just has a P / SPAN wrapper but should stand alone
    //to do this, we need to check the attributes of the image - the text editor adds these properties directly to the image rather than via style
    const attrObject = createAttributesObject(nestedImage);
    //then we create the standalone marker by seeing if the width property has been set and the width property has the ending 'vw' or '%'
    const standalone = attrObject.hasOwnProperty('width') && /[[vw]|[%]$/.test(attrObject.width);
    //if we have a standalone image then we return the image element with the standalone property set to true
    if (standalone) { 
        return createImageElement(nestedImage, true);
    //if the nested image looks inline then we return the standard paragraph element and let the image element do the work
    } else { return paragraphElement(node); }
    
};

My understanding is that minPresenceAhead should ensure that no page wrapping should occur between all sibling elements following the element within n points.

I have set minPresenceAhead to 1, so I would expect the title to be moved to the next page.

In fact, you can see from the debug highlighting that the renderer is correct in a sense, in that it can see the top of the paragraph element at the bottom of the page.

But surely this is not the intended functionality?

Any help much appreciated.

[cdelacombaz]

@diegomura I tried already for several hours to make minPresenceAhead, widow and orphans work. It seems that this is also the case for tomgallagher and others (some other issues are opend regarding this).

The link on the website with the example is broken.

Could you please tell us if these features are working and if yes, on which version of react-pdf? I tried:

• 1.6.13
• 2.0.0-beta.6
• 2.0.0-beta.18

If it is working, are there any examples? (If not and you tell me where and how it should work, I could try it out and create a PR with example)

If it is not working currently, is it planned for v2.0? Any time estimate when this is going to be launched?

Thanks in advance! BR, Cedric

[cdelacombaz]

I now tried a similar example than yours and my suggestion doesn’t work… You kind of have to know how big the next component is in advance… @tomgallagher Did you actually solve this issue by now? How did you do it? 😃