Closed zinnen closed 3 years ago
I think best you attach screen captures to better explain your issue
בתאריך שבת, 28 בנוב׳ 2020, 14:35, מאת zinnen notifications@github.com:
Hello, thank you very much for the effort for this package. I still have problems to display LaTeX in a nice and consistent way in an app. On Android the following code is displayed with very big differences in size:
import MathView from 'react-native-math-view'; ... return (
<MathView math={'x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}'} />
);
With mathjax-node I can easily create SVG strings. Is there a reason not to do this and to rely on line breaks and formatting of mathjax? Text and formulas are automatically wrapped at a given width (which we know from out react native app and also using Flex-View). This would make it very easy to mix text (via \text{}) and formulas.
Unfortunately I can't display these SVG strings via react-native-svg. It works in Safari, Chrome or even in online SVG viewers ( https://www.rapidtables.com/web/tools/svg-viewer-editor.html), but not in React Native. Do you have a hint what I am doing wrong with the following code?
import {SvgXml} from 'react-native-svg'; ...
const svg = <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="12.336ex" height="2.843ex" style="vertical-align: -0.505ex;" viewBox="0 -1006.6 5311.2 1223.9" role="img" focusable="false" xmlns=" http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title"><title id="MathJax-SVG-1-Title">a^2 + b^2 = c^2<defs aria-hidden="true">
<path stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"><path stroke-width="1" id="E1-MJMATHI-63" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true"><use xlink:href="#E1-MJMATHI-61" x="0" y="0"><use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="748" y="583"><use xlink:href="#E1-MJMAIN-2B" x="1205" y="0"><g transform="translate(2206,0)"><use xlink:href="#E1-MJMATHI-62" x="0" y="0"><use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="607" y="583"><use xlink:href="#E1-MJMAIN-3D" x="3367" y="0"> <use xlink:href="#E1-MJMATHI-63" x="0" y="0"><use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="613" y="583"> ;.... return ( <SafeAreaView style={{flex: 1}}>
);
Thank you very much, unfortunately I don't have much time to participate in development at the moment, but I'm happy to test libraries.
Andreas
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-math-view/issues/36, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4PEPA7QQJEEAQ2IO5DSSDVATANCNFSM4UFYRRBA .
Attached you see a screenshot of the code using react-native-math-view. Do you have any idea why the Mathjax-SVG given above does not render in react native? Thanks a lot!
Did you read through the ReadMe? I am not certain what you wish to accomplish. Did you look into the example app? What about resizeMode? What of the fallback SVG renderer of this repo? Do some research and tests and see what works for you.
בתאריך שבת, 28 בנוב׳ 2020, 18:35, מאת zinnen notifications@github.com:
[image: Bildschirmfoto 2020-11-28 um 17 33 05] https://user-images.githubusercontent.com/9108609/100520765-dfd87c80-319f-11eb-8417-b48ff415fa7a.png
Attached you see a screenshot of the code using react-native-math-view. Do you have any idea why the Mathjax-SVG given above does not render in react native? Thanks a lot!
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-735253212, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4L3D63IRH42C5XG4PDSSERDRANCNFSM4UFYRRBA .
In svg 'xlink' can cause trouble I do think you will find all you need in the example app
בתאריך שבת, 28 בנוב׳ 2020, 18:41, מאת Shachar Nencel <shacharnen@gmail.com
:
Did you read through the ReadMe? I am not certain what you wish to accomplish. Did you look into the example app? What about resizeMode? What of the fallback SVG renderer of this repo? Do some research and tests and see what works for you.
בתאריך שבת, 28 בנוב׳ 2020, 18:35, מאת zinnen notifications@github.com:
[image: Bildschirmfoto 2020-11-28 um 17 33 05] https://user-images.githubusercontent.com/9108609/100520765-dfd87c80-319f-11eb-8417-b48ff415fa7a.png
Attached you see a screenshot of the code using react-native-math-view. Do you have any idea why the Mathjax-SVG given above does not render in react native? Thanks a lot!
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-735253212, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4L3D63IRH42C5XG4PDSSERDRANCNFSM4UFYRRBA .
Thanks for your fast reply. I will check the xlinks in the svg document. Is there a trick to avoid those errors when generating the SVG using Mathjax? Attached, you will find an error message when running the examples (downloaded the zip, and ran the given commands). yarn --production=false in the main directory (react-native-math-view-master), then yarn --production=false and npm run android in the Example directory.
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details. Error: spawn ./gradlew EACCES
Seems not related to the repo.
בתאריך שבת, 28 בנוב׳ 2020, 21:01, מאת zinnen notifications@github.com:
[image: Bildschirmfoto 2020-11-28 um 19 57 18] https://user-images.githubusercontent.com/9108609/100523866-f557a180-31b3-11eb-8a9e-e432bc127e3d.png
Thanks for your fast reply. I will check the xlinks in the svg document. Is there a trick to avoid those errors when generating the SVG using Mathjax? Attached, you will find an error message when running the examples (downloaded the zip, and ran the given commands). yarn --production=false in the main directory (react-native-math-view-master), then yarn --production=false and npm run android in the Example directory.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-735277107, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4JWNCRVRV4DXIMB2TDSSFCHHANCNFSM4UFYRRBA .
You mean the error message is not related to the repo? I have setup a standard react native environment - I might miss something, but other react native projects compile and run. Downloading the zip-File of react-native-math-view and running the four commands that you mention in the readme do lead to this given error. I am not sure what I am missing.
For others that also fail when starting the example after downloading the ZIP file: I have now found out why the examples did not work. It was a problem with the rights: I had to run chmod +x gradlew in the main project directory.
Thanks a lot for your answers and the effort for the great library. I will analyze the example and then open a ticket again in case of further questions. Great library!
Did you manage to get it working??
On Sun, 29 Nov 2020 at 09:38, zinnen notifications@github.com wrote:
Closed #36 https://github.com/ShaMan123/react-native-math-view/issues/36 .
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-math-view/issues/36#event-4048785877, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4JR6J5QO6ESGMVKHZLSSH3ARANCNFSM4UFYRRBA .
Yes, after setting the correct rights, I could run the examples - my fault!
I have a problem though with inline text (please see image). A long text, followed by a math formula or variable, does lead to a line break before the formula/variable. This problem is probably difficult to solve because the text box takes up the entire width. But maybe you have an idea? I will try to split the complete string. So the FlatList has a possibility to make the line break within the long string.
Just replace processString in your WrapWithText.tsx-file to reproduce:
let processString = _.replace(`Here I create a long text. This text with a variable will be wrapped incorrectly for \\( \\alpha \\) on the smartphone. Additionally the following formula is not directly behind the text: \\( a^2 + b^2 = c^2 \\)`, /\\(\(|\))/g, '$');
I understand the problem you've described.
You are right, inline math is problematic due to Text
filling up the entire parent.
I have created a work around in which every word is rendered separately, avoiding this issue.
I've update the example with the correct code.
I think I should expose this component as part of the package, do you agree?
Take a look:
943eb3a
Sorry for the late reply. Corona keeps us on our toes. A component with the functionality instead of examples would simplify it a lot for the user. Also, the documentation would be easier since the functionality could be shown only by calling the component with different parameters.
I did not find the following info in the examples (I hope that I did not miss it in the examples):
$\sum{n=0}^\infty$ $$\sum{n=0}^\infty$$
Thank you very much, I hope to make more progress in the next few days.
Von: ShaMan123 notifications@github.com Antworten an: ShaMan123/react-native-math-view reply@reply.github.com Datum: Montag, 7. Dezember 2020 um 08:00 An: ShaMan123/react-native-math-view react-native-math-view@noreply.github.com Cc: Andreas Zinnen Andreas.Zinnen@hs-rm.de, State change state_change@noreply.github.com Betreff: Re: [ShaMan123/react-native-math-view] React Native and LaTeX (#36)
I understand the problem you've described. You are right, inline math is problematic due to Text filling up the entire parent. I have created a work around in which every word is rendered separately, avoiding this issue. I've update the example with the correct code. I think I should expose this component as part of the package, do you agree? Take a look: [Das Bild wurde vom Absender entfernt. math view]https://user-images.githubusercontent.com/34343793/101319315-7248e200-386a-11eb-9a22-fd88b4970ed7.png
— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-739714186, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFPZAM47BCCSQGIXLT656LSTR4PRANCNFSM4UFYRRBA.
Regarding preload
- it is a simple memoize function, runtime only.
Thank you for the feedback. On point 2, I don't understand why it has anything to do with flex. You have to set a parameter (inline true or not) when calling MathJax (that is when generating the SVG). This will result in a different SVG. In practice, one would look for single $, e.g. $\sum_1^2$ and then set inline true when generating the SVG. If you find duplicate $$, e.g. $$\sum_1^2$$, then inline must be false when generating the SVG.
Von: ShaMan123 notifications@github.com Antworten an: ShaMan123/react-native-math-view reply@reply.github.com Datum: Freitag, 8. Januar 2021 um 10:07 An: ShaMan123/react-native-math-view react-native-math-view@noreply.github.com Cc: Andreas Zinnen Andreas.Zinnen@hs-rm.de, State change state_change@noreply.github.com Betreff: Re: [ShaMan123/react-native-math-view] React Native and LaTeX (#36)
Regarding preload - it is a simple memoize function, runtime only. I have a small idea regarding inline nd using flex: 1 conditionally if $$ exists.
— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-756639963, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFPZAMCLRS3VWEZUQOQLBTSY3DONANCNFSM4UFYRRBA.
This is not how logic works internally in this repo. Flex usage is vital for proper rendering and fitting into the view. Check out v3.7.0
import { MathText } from 'react-native-math-view'
Where do I find v3.7.0? I can install it, but on GitHub I do not find any examples
Von: ShaMan123 notifications@github.com Antworten an: ShaMan123/react-native-math-view reply@reply.github.com Datum: Freitag, 8. Januar 2021 um 13:29 An: ShaMan123/react-native-math-view react-native-math-view@noreply.github.com Cc: Andreas Zinnen Andreas.Zinnen@hs-rm.de, State change state_change@noreply.github.com Betreff: Re: [ShaMan123/react-native-math-view] React Native and LaTeX (#36)
This is not how logic works internally in this repo. Flex usage is vital for proper rendering and fitting into the view. Check out v3.7.0
import { MathText } from 'react-native-math-view'
— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-756730863, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFPZAKVDOFGUC43NMZWMWTSY33AZANCNFSM4UFYRRBA.
Ok found an example.Will check it. Thanks!
Von: ShaMan123 notifications@github.com Antworten an: ShaMan123/react-native-math-view reply@reply.github.com Datum: Freitag, 8. Januar 2021 um 13:29 An: ShaMan123/react-native-math-view react-native-math-view@noreply.github.com Cc: Andreas Zinnen Andreas.Zinnen@hs-rm.de, State change state_change@noreply.github.com Betreff: Re: [ShaMan123/react-native-math-view] React Native and LaTeX (#36)
This is not how logic works internally in this repo. Flex usage is vital for proper rendering and fitting into the view. Check out v3.7.0
import { MathText } from 'react-native-math-view'
— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-756730863, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFPZAKVDOFGUC43NMZWMWTSY33AZANCNFSM4UFYRRBA.
I'm not sure you understood my point about inline and MathJax. Here is an example:
This is how react-native-math-view currently renders the cosinus formula (Screenshot as a single math notation):
[cid:image001.png@01D6E5CB.42069DE0]
This is how MathJax renders a SINGLE math equation: Note that there is a difference with the position of n=0 and \infty
[cid:image002.png@01D6E5CB.42069DE0] This is how MathJax renders a math equation INLINE in text: Note that here the position of n=0 and \infty is similar to react-native-math-view. [cid:image003.png@01D6E5CB.42069DE0]
You can test the correct LaTeX behavior https://www.mathjax.org/#demo: using “$\sum{n=0}^\infty$ $$\sum{n=0}^\infty$$”
I would be surprised if you could not set this parameter when generating the SVG? Please excuse me for drilling so much. If I am completely wrong, please let me know. In the end, though, I'm sure the library will become more usable.
Andreas
Von: ShaMan123 notifications@github.com Antworten an: ShaMan123/react-native-math-view reply@reply.github.com Datum: Freitag, 8. Januar 2021 um 13:29 An: ShaMan123/react-native-math-view react-native-math-view@noreply.github.com Cc: Andreas Zinnen Andreas.Zinnen@hs-rm.de, State change state_change@noreply.github.com Betreff: Re: [ShaMan123/react-native-math-view] React Native and LaTeX (#36)
This is not how logic works internally in this repo. Flex usage is vital for proper rendering and fitting into the view. Check out v3.7.0
import { MathText } from 'react-native-math-view'
— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://github.com/ShaMan123/react-native-math-view/issues/36#issuecomment-756730863, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFPZAKVDOFGUC43NMZWMWTSY33AZANCNFSM4UFYRRBA.
I can't see the images. Open a new issue
Hello, thank you very much for the effort for this package. I still have problems to display LaTeX in a nice and consistent way in an app. On Android the following code is displayed with very big differences in size:
With mathjax-node I can easily create SVG strings. Is there a reason not to do this and to rely on line breaks and formatting of mathjax? Text and formulas are automatically wrapped at a given width (which we know from out react native app and also using Flex-View). This would make it very easy to mix text (via \text{}) and formulas.
Unfortunately I can't display these SVG strings via react-native-svg. It works in Safari, Chrome or even in online SVG viewers (https://www.rapidtables.com/web/tools/svg-viewer-editor.html), but not in React Native. Do you have a hint what I am doing wrong with the following code?
Thank you very much, unfortunately I don't have much time to participate in development at the moment, but I'm happy to test libraries.
Andreas