Vertically center inline images

[pepijnbruinaars]

Is your feature request related to a problem? Please describe. Describe the bug I am creating some functionality that allows a user to download a blog-like item as a PDF. The PDFs are rendered server-side. In these blogs, there are many occurrences of formulas in LaTeX, and I need a way to render these. To this end, I have created some custom code that converts LaTeX to a base64 PNG and I am now rendering these images inside text components.

The issue I'm facing is that I can't place the image over the text baseline to vertically centre the image.

To Reproduce Steps to reproduce the behavior including code snippet (if applies): The images are rendered using the following code snippet:

<Text
  style={{
  fontFamily: 'Times-Roman',
  backgroundColor: 'red',
}}
>
  <Image
    src={image.url}
    style={{
      height: remToPt(1), // Target height is 16px
      width: (image.width / image.height) * remToPt(1),
    }}
  />
</Text>

The following images show in black where the image is rendered, and a red background for the text element in which it is rendered.

The reference outputs are the following:

Describe the solution you'd like I would like to be able to add a verticalAlign: 'middle' style property to a <Text /> component (or something similar).

Describe alternatives you've considered At first, I tried to convert the LaTeX inputs to SVG, which I then converted to react-pdf's <Svg /> components. However, these can't be rendered inside of <Text /> components.

Additional context Add any other context or screenshots about the feature request here.

[dtc105]

If you wrap the image and text within a div or some other container and apply the container with a style of

display: flex, align-items: center

Then this should vertically align the two.

[pepijnbruinaars]

@dtc105 Thanks, but I don't think this is a solution to my problem as the text in front of or after the formulas can span multiple lines, and I can't break this text up into different <Text /> components as this would mess with the general layout of the document

Edit: I thought about your comment a little longer, and the main issue with adding display: flex, justifyContent: center is not whether or not I'm able to break the text up into multiple components, but the fact that justifyContent: center doesn't make any sense for content that spans and wraps multiple lines

[dtc105]

justifyContent: center Would horizontally align the content while alignItems: center would vertically align the items, not sure if this is the confusion or not, however if you are unable to separate the text across lines then this might not be your solution.

[amiii123malviya]

Hello,

Is this issue still active? I would like to work on this.

Best Regards.

[pepijnbruinaars]

@amiii123malviya Yes it is! Let me know if anything is unclear.

[amiii123malviya]

@pepijnbruinaars Thankyou for your time

[Marcdj-02]

@amiii123malviya Have you made any progress on this?