react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Wrapping text around images.

Open huv1k opened this issue 5 years ago • 7 comments

Is your feature request related to a problem? Please describe. I would like to use float to wrap text around images. Is this possible with current implementation? I don't want to use flex-flow: row to have image and text in one row. because I want to wrap text around an image. The text could be 10 pages long like a lot of articles in news do.

Describe the solution you'd like

<View>
  <Image
    src="https://avatars1.githubusercontent.com/u/5691926?s=460&v=4"
    style={{ width: 100, float: 'left' }}
  />
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
    ut ligula ullamcorper, sodales ante dignissim, commodo lorem. In a
    egestas ex. Sed rhoncus lorem posuere massa rutrum consectetur. In
    at augue vitae risus fermentum volutpat sagittis nec ex.
  </Text>
</View>

Describe alternatives you've considered Using flex, but it's not possible to wrap text under the image with it.

huv1k avatar Apr 16 '19 21:04 huv1k

Thank you @Huvik ! Currently is not possible to achieve something like this. The fact that you can't achieve this using flexbox is not a trivial problem, mainly because we use Yoga to perform and calculate layout. Not sure if Yoga supports this, but if don't the implementation would be even more difficult

diegomura avatar Apr 16 '19 22:04 diegomura

@diegomura it would be really great if this feature is developed. Is there anyway I can support to achieve this?

I'm using react-pdf to generate dynamic PDF files from a WYSIWYG editor. The PDF's are created by end-users, so I don't have any control on where and when the images are positioned.

This is an example of a document I would like to render as PDF. https://app.kwoter.nl/d/yqLQ4Hgiw6ZB4oanr

Is there anyway I can be of help here?

kwoterG avatar Oct 06 '19 18:10 kwoterG

This is something that has to be build on both textkit and react-pdf layers, but to be honest, I couldn't think yet about an implementation yet. The first step would be if textkit supports exclude sections from render containers (I wrote the current implementation but I don't remember if does. An old, but incomplete, version did). But the problem relies in where that exclusion area is, and how to deal with pagination. I'm working in a v2.0 solution which is much more modular and maybe then it would be easier to add, but still, it's not as easy as it might seem

diegomura avatar Oct 07 '19 14:10 diegomura

Tnx for the reply. For now we will tell our users that we don't support this yet.

I will take a look if I can be of any help, but i'm afraid my knowledge is a bit limited...

Tnx for all your work on react-pdf. It's great.

kwoterG avatar Oct 09 '19 10:10 kwoterG

Any progress on this feature?

MichalKalita avatar Oct 01 '20 09:10 MichalKalita

Any progress on this feature??

lfoliveir4 avatar Oct 03 '20 05:10 lfoliveir4

Any progress on the PR so far ?

CrownKira avatar Jul 21 '22 11:07 CrownKira

It would be great to see this feature to make it into the library!

platon-ivanov avatar Nov 14 '22 14:11 platon-ivanov