Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tspan inside if Text Element is broken #2931

Open
fabian-ehringer-sii opened this issue Nov 13, 2024 · 2 comments · May be fixed by #2961
Open

Tspan inside if Text Element is broken #2931

fabian-ehringer-sii opened this issue Nov 13, 2024 · 2 comments · May be fixed by #2961
Labels
good-first-issue Easy and small cool stuff to work as a first issue

Comments

@fabian-ehringer-sii
Copy link

Describe the bug
When I place multiple Tspan elements inside of a Text element, the SVG is not rendered correctly.
The Tspan elements are rendered on top of each other.

To Reproduce

const BrokenTspan = () => (
  <Document>
    <Page>
      <Svg>
        <Text x="10" y="30">
          <Tspan>test</Tspan>
          <Tspan style={{ fill: "red" }}>test</Tspan>
          <Tspan style={{ fill: "black" }}>1234</Tspan>
        </Text>
      </Svg>
    </Page>
  </Document>
);

ReactPDF.render(<BrokenTspan />);

image

Reproducible example in REPL: https://react-pdf.org/repl?code=3187b0760ce02e004042027101ac0a6600a8400e04330c02f0c00500944407ca405030c00f002223002b80b6e9495df6300157007354bdfbf06019401bb0f11324654003d60ac2008802300064d300279680ccfa162a539f2528a9a0300f458f180b9718bfc31a218036a88400de4130006600967e7e005c309a08a800260600bea9b6f6504e5e6e7c1e9ed604be01c1a191d1719a00467eb8c0c86919da004c26002c3945ee1239aa3cf9928eb2f2834e42a20a4e2cec5c60036400dc3434004aa8f550024c00620074896049a808240c8828e8b9308e944b344000

Expected behavior

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<text x="10" y="30">
  <tspan>test</tspan>
  <tspan fill="red">test</tspan>
  <tspan fill="black">1234</tspan>
</text>
</svg>

image

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: chrome
  • React-pdf version: 4.0.0
@diegomura diegomura added the good-first-issue Easy and small cool stuff to work as a first issue label Nov 14, 2024
@klingebiel-sii klingebiel-sii linked a pull request Nov 18, 2024 that will close this issue
Open
@klingebiel-sii
Copy link

Hi @diegomura,

we came up with a solution that would work for our use case: #2961
We'd appreciate your feedback 🙏

@mantosh-mariner
Copy link

Hi, I’m Mantosh , and I’m interested in contributing to this project. I came across issue #1234 and would like to work on it. Could you please assign it to me?

Thank you for your time and for maintaining this project. Looking forward to your reply!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good-first-issue Easy and small cool stuff to work as a first issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: calculate x position of tspan elements without explicit x prop klingebiel-sii/react-pdf
4 participants
@diegomura @mantosh-mariner @fabian-ehringer-sii @klingebiel-sii