React-pdf: Font vertical align

[pavle-lekic-htec]

Hi! Thanks for the excellent library and all the effort that you invested. However I noticed that if you center text vertically inside a view using flexbox, text baseline is centered, so text is actually not in the center but a bit upper. And there is no option for vertical alignment. Am I missing something? Is there some other way to center text vertically inside a view? Thanks.

[diegomura]

Hey @pavle-lekic-htec !
Can you provide a snippet I can use to reproduce this issue?
Thanks!

[pavle-lekic-htec]

Sure, this is what I used

const styles = {
    defaultText: {
        fontSize: 7
    },
    defaultCell: {
        paddingVertical: 1,
        paddingHorizontal: 3
    }
};

        <View style={styles.defaultCell}>
            <Text style={styles.defaultText}>{value}</Text>
        </View>

I was making Table component for some reports, and all values inside the cells are a bit upper, I cannot get them centered vertically.

And even if I put alignItems: 'center' it will align them using baseline, so they will be moved up by around 30% of line height from center.

[gregoralbrecht]

I ran into the same issue as you, @pavle-lekic-htec. Did you figure out a way to vertically center text without being too hacky? I have a lot of tables that need vertical centering.

[pavle-lekic-htec]

Yes, I have found a solution. The solution is to not use this library :) I hate to be the party breaker but this library has serious flaws that cannot be fixed. I tried and wasted 2 weeks trying to find a solution, then I figured out that most of the issues come from lack of possibility to set dpi resolution (see issues with borders in tables also). The correct way to generate pdfs from js is to create a pdf server like https://github.com/alvarcarto/url-to-pdf-api/ or some wkhtmltopdf solution, and have the browser generate pdf from html. That way you can control dpi, have crystal clear edges, have correct vertical align etc.

[diegomura]

Hi @pavle-lekic-htec !

Sorry to hear your struggle with the library, I really am (even though I disagree a bit with the way you expressed it 😞). I do recognize there are still things the lib does not support (such as vertical align). In general terms, when it comes to text there are things that seem "simple" but the real implementation isn't that much like that. From my point of view, verticalAlign is a new feature, and not a _flaw_. But a feature that I do want to see working.

About a temporary solution, I've center things in the past by setting alignItems=center and justifyContent=center to the text container. Not sure if will cover your use case, but worths a try and would like to know if you ran into issues with it.

About the border issues you mentioned, I asked you in the issue if you could try it with the last version, since some border implementation changed, but didn't have any answer so I closed it. I would be happy to re-open it if the issue persist.

I also put a thought on the DPI issue lately. Even though pdfkit does not support setting the document DPI, I think there something we can do on the react-pdf side to convert in some way internally dimensions taking a DPI different than 72. However, I lack a bit of knowledge in that field, in addition of time.

HTML to PDF solution is always valid! This lib isn't against that at all. However, there are some cases in which you may need some more fine-grained control over how things render, besides a server to generate the PDFs. For example, how page wraps, or how text is justified (browser justification sucks) Glad to hear that you could find a workaround with a solution such as this

[gregoralbrecht]

Thanks for your quick response @pavle-lekic-htec! I must admit, while I see the same challenges as you, I'm with @diegomura here. I've tried a dozen libraries and tools to create/manipulate PDFs and they all have their strengths and weaknesses. For me, the problems always arise in tiny details of my requirements that seem hard for maintainers to address. I think we can all agree, it's a bit frustrating that creating/manipulating PDFs is still a mostly unsolved problem in 2018 😅

Edit: Concerning the problem at hand — I was lucky to only have one-liners to align vertically. This is easily done by reducing the lineHeight of the <Text> until it fits.

[pavle-lekic-htec]

Hello :-) I appreciate all the effort that was put in this library, however I think it would be helpful to present the limitations of this library in the readme file so that people could know about them and then decide if this library is a good fit for them, before they invest a lot of time.