search

diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.46k stars 1.14k forks source link

Inline in React PDF #2417

Open pcmanprogrammeur opened 9 months ago

pcmanprogrammeur commented 9 months ago

Hi all, When i want to display two blocs inline with long text, i have an overlap. Here is the code to test on https://react-pdf.org/repl :

const styles = StyleSheet.create({
  inline: {
    display: "flex",
    flexDirection: "row"
  }
});

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <View style={styles.inline}>
        <Text style={styles.inline}>
          dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
        </Text>
        <Text style={styles.inline}>
          eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
        </Text>
      </View>
    </Page>
  </Document>
);

ReactPDF.render(<MyDocument />);

Thanks for your help !

diegomura commented 5 months ago

To reproduce easily: https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a061804b3114f900b86166cd80137610003a26af1f8022006628007ac8034ac862e44a008bb2ac0a3b707228800eeb23405f66d6025006e66cd424580165e0e90c002b802db2182c263d3d86001f0c3d06800f0fbf904864469b1c4002b50039b21c3b0017b23a2c8020800b2caa50909c401abb32399c2e0a3a23020a04292737183235b54d6d400ab6ac2771476b6a0f570f20da70c8b0aadafac6e6d6f6ceeedefec1e1d1f1c9e9d9f9c5e5d5d5d2cd5c403d18d29410f2dc53c4ccfb64f76f42ebf2c60c4604834160f04432150e84c390b75aa3dc600f4bdc1a4d0043cb2b92183d1281608bc34f6170009468860c8e80062a42a18184c80a3d0e25e3c72560f74893998400