search

telerik / kendo-react

Issue tracker - KendoReact http://www.telerik.com/kendo-react-ui/
https://kendo-react-teal.vercel.app
Other
211 stars 37 forks source link

Mathematical sign not rendering properly in the exported file #484

Closed gkumar9 closed 2 years ago

gkumar9 commented 4 years ago

I'm submitting a Bug

Not rendering the exact content in the exported pdf.

Current behavior

As I am using react-mathjax-preview to render the math tag in a formatted way. The exported file shows a weird icon instead of the rendered tag by mathjax.

Expected behavior

Exported pdf should have the exact mathematical sign which was rendered.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-gugsmz

What is the motivation or use case for changing the behaviour?

To able to export the mathematical symbol with the content

Environment

Package versions:

├── @material-ui/core@4.9.3
├── @material-ui/icons@4.9.1
├── @material-ui/lab@4.0.0-alpha.43
├── @progress/kendo-drawing@1.6.0
├── @progress/kendo-react-pdf@3.11.0
├── @sweetalert/with-react@0.1.1
├── @testing-library/jest-dom@4.2.4
├── @wiris/mathtype-ckeditor4@7.17.0
├── @wiris/mathtype-ckeditor5@7.17.1
├── axios@0.19.2
├── ckeditor4@4.13.1
├── ckeditor4-react@1.0.1
├── firebase@7.8.2
├── fsevents@1.2.11
├── history@4.10.1
├── load-script@1.0.0
├── react@16.12.0
├── react-bootstrap@1.0.0-beta.16
├── react-bottom-scroll-listener@3.0.0
├── react-datepicker@2.12.1
├── react-dom@16.12.0
├── react-loader-spinner@3.1.5
├── react-mathjax-preview@0.1.16
├── react-router-dom@5.1.2
├── react-scripts@3.4.0
├── react-tag-autocomplete@6.0.0-beta.4
├── react-tagsinput@3.19.0
├── react-with-firebase-auth@1.3.0
└── sweetalert@2.1.2

Browser:

System:

simonssspirit commented 4 years ago

@gkumar9 thank you for the example.

I noticed that MathJax uses a specific font.

Please check the following article showcasing how to proceed with cases where there are specific characters rendered on the page:

https://www.telerik.com/kendo-react-ui/components/drawing/pdf-output/embedded-fonts/

gkumar9 commented 4 years ago

@simonssspirit ok, So I tried the fonts but still not all fonts are visible in the exported pdf. Oh just to be clear I really appreciate the package and just trying to make it more robust. Thanks

simonssspirit commented 4 years ago

@gkumar9 Thank you for the clarification.

Is it possible to share with us an example where the specific fonts are loaded, so we can inspect it and determine why is this rendering?

gkumar9 commented 4 years ago

Yes, So the currently the production has the mathematical symbol. So, I added the CSS to it. You can check that https://stackblitz.com/edit/react-gugsmz

gkumar9 commented 4 years ago

Hi, @simonssspirit if there's a issue with the code reproduction link or code that is what you reqiure, please let me know. Happy to help.

simonssspirit commented 4 years ago

@gkumar9 I saw that the font face is set, but is it confirmed that the DejaVuSans has that symbol?

In our documentation, we use that font for showcase, but this does not mean that this is the font that has to be added in all cases.

Please ensure to add a font that supports "MathJax"

gkumar9 commented 4 years ago

@simonssspirit ok, so i found the font support doc for mathjax. http://docs.mathjax.org/en/latest/output/fonts.html if i were to add these font from link in my css file, will that work ?

simonssspirit commented 4 years ago

@gkumar9 yes, adding this font using the font-face method inside the CSS should resolve the issue.

itsmeganesh-cse-iiit commented 3 years ago

@simonssspirit ok, so i found the font support doc for mathjax. http://docs.mathjax.org/en/latest/output/fonts.html if i were to add these font from link in my css file, will that work ?

We are eagerly waiting for this fix

itsmeganesh-cse-iiit commented 2 years ago

@simonssspirit @gkumar9 Is there any progress on this mathjax font issue, Please give us the update.

simonssspirit commented 2 years ago

@itsmeganesh-cse-iiit This is not considered an issue. It requires embedding the correct font as mentioned in the previous comments.

itsmeganesh-cse-iiit commented 2 years ago

@simonssspirit We tried lot of fonts including which @gkumar9 suggested the font, but no luck , Please guide us to include the font (for math equations especially for mathjax ) and @gkumar9 if that font worked for you ? if yes can you please provide us small replication link, so that it can help a lot people, Thanks in advance @simonssspirit @gkumar9

simonssspirit commented 2 years ago

I'm share here an updated version of the example where the symbols are exported as expected: https://stackblitz.com/edit/react-dzxj6i