Formatting Issues (inlineMath and alignment within text) #38
Comments
|
Flew wrap perhaps.
Look at the updated example
בתאריך יום ו׳, 8 בינו׳ 2021, 17:09, מאת zinnen <[email protected]>:
… Setting inline: false seems to add a margin in front of the formula.
Alignment to flex-start does not work properly anymore. Do you have any
idea how to fix it?
[image: Bildschirmfoto 2021-01-08 um 16 04 27]
<https://user-images.githubusercontent.com/9108609/104030254-646ce080-51cb-11eb-91bb-21a3d6e513d0.png>
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#38>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AIGAW4LGZ6WIVZN7K6ZXUQDSY4N3LANCNFSM4V2SDFDA>
.
|
|
I don't think it's related to wrapping. The formulas are too short for that. In the following example, the gap in front of the second formula changes when flex is set from 1 to 0. This should really only have an effect on the vertical expansion, or am I wrong? flexWrap has no effect.
|
|
Could you add background color/borders for debugging? |
|
|
|
I don't know and don't really understand why to use |
|
Here is an example with FlatList, without flex: 0 (takes the size as it is). Also with a Flat-List with left-aligned content there is the gap before the 2nd formula.
|
|
Why closing the issue if it still exists? |
|
You should follow the examples. There's a Flatlist example. |
|
Thank you for the effort and the library. I close the issue, even if the simple example with FlatList does not run as it should. The reference to examples (the link contains a SectionLost and no FlatList) is not always helpful. |
|
Dear Sir, the problem also occurs in the sample code. It is not related to my flex settings. If you call the MathView component with "config={inline: false}}" in "MathItem.tsx", high formulas (e.g. fraction, sum, product) above a certain length in the "MathSectionList.tsx" file are also displayed with the gap in front of the formula. Please close the issue if it is not relevant for you. In my opinion, displaying formulas with inline: false is necessary, since it conforms to the LaTeX standard and is supported by MathJax.
|
I can't reproduce.These gifs are with
|
|
Could it be the resolution of the smartphones? I tried three different ones in the emulator. It seems to work with small resolution, because then the elements are reduced in size. With larger ones it did not work for me. I have attached a screenshot with the three results as well as the settings in the emulator.
|
|
This seems to be a deep problem. |
|
There are problems with the Fallback component as well. |
|
I don't have much time, but can do a little research for causes. My feeling is that for some formulas a smaller height is set than the actual one. This happens on both Android and IOS. If the actual height is larger, the SVG is reduced in size when displayed. This happens not left-aligned, but centered. This creates the gap on the left side. Are you just reading the height of the SVG directly in the code (based on MathJax), or is it calculated somewhere? |
|
Sounds like a good direction. Gist
Proposals
Hope this helps. |
|
It looks like this should be the default value |
|
try this 57d08c7 |
|
Is there a trick to get MathJax-generated SVG displayed with react-native-svg in the SvgXml element? I would play a bit with height, width, vertical-align, ..., but it does not show on the screen. Here the svg code: const xml = |
|
Running with SvgFromXml. Will try to play a bit in the next weeks though very busy. |
|
You can use the fallback component, that does exactly that. |
|
I wonder if we are making a fundamental mistake when rendering SVGs. When I display "= a^2 =", "= a =" and "= \sum_{i = 1}^{100} =" with alignItems set to flex-start, flex-end, center, these formulas are not rendered at the correct height. The = should be at the same height here. flex-end could fit if you could now consider vertical-align from the svg element. It's not clear to me how you could account for vertical displacement as given in the svg style element. flex-start: |
|
In this case I would try to use alignItems: 'center',
justifyContent: 'flex-start' |
|
I tried all combinations. Do you know if the vertical-align of the svg style element is automatically considered by react-native-svg? |
|
Maybe try opening an issue there |
|
Thanks a lot. I will try to understand what is going on when rendering the SVG. The info to align it in a correct way should be in the svg element. Will keep you up to date
Von: ShaMan123 <[email protected]>
Antworten an: ShaMan123/react-native-math-view <[email protected]>
Datum: Montag, 18. Januar 2021 um 12:52
An: ShaMan123/react-native-math-view <[email protected]>
Cc: Andreas Zinnen <[email protected]>, State change <[email protected]>
Betreff: Re: [ShaMan123/react-native-math-view] inline: true versus inline:false (#38)
Maybe try opening an issue there
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub<#38 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACFPZAJUSKJ4WMGEN6N7UC3S2QODNANCNFSM4V2SDFDA>.
|
|
I can now display formulas very nicely side by side, taking into account the offset. Where do I configure the code so that the fallback is also used on Android? |
|
It would be great if you could share your findings or PR! - import MathView, { MathText } from `react-native-math-view`;
+ import MathView, { MathText } from `react-native-math-view/src/fallback`;
|
|
|
|
Thanks, I will check if the offset is reliable and then share the findings. |
|
Still struggling with the gap around the math formulas. Do you know if there is a way to set displayAlign to 'left' or 'right' (just to check) somehow (http://docs.mathjax.org/en/latest/options/output/)? When setting it in the getConvertOptions, I get a MathJax error 'invalidOptionDisplayAlign' (no default value). It is hard to understand where the code uses MathJax, and how. |
|
http://docs.mathjax.org/en/latest/options/output/svg.html#svg-options This is the correct link to the svg output processor options |
|
Mathjax docs are unreliable when used in node.js
means there's no such option. Try setting the value here |
|
Great Work. |
|
Hmm not sure anymore. |
|
I do not see the wanted effect. The gap still persists.
|
|
That's a shame. |
|
Then we have to look a little further :) |
|
Adding aspectRatio to the Fallback SVG seems to solve the gap problem.
I'll look for another way to account for the offset for inline math formulas in the next few days, so that the following modified example looks more like standard (= should be aligned).
|
zinnen
changed the title
|
I might have a solution. Following changes will lead to this given output. I haven't tried the examples because they are too complex for me to use as examples. I have formulas (inline and not) in a View and a FlatList and they are displayed correctly (the gap disappeared, and the alignment with text is more standard). The formulas are also resized if longer then the available space. The example also works when I change the font size, and both on IOS and Android. Please let me know if you need clarification!
MathjaxAdaptor.ts(pass offset and ex value - I will need it in FallbackMathView):
FallbackMathView.ts (wrap a view around the SVG, and append View to increase the size of the component)
|
|
Still a little problem when formula does not fit within the given width: SvgFromXml will add a gap on top with current setting. |
|
Looks like progress. Mathjax is tiring indeed. |
|
I think you should try to submit an issue in the mathjax repo, they might be of more assistance |
|
MathJax works find. I checked height, size and the view boxes in the svg - which is perfect. It is related to react-native-svg, lets see :) |
|
Hey @zinnen I read the exchange above, and seems like I'm facing a similar issue (i.e., the in-line latex is slightly shifted, see screenshot attached). I can read that you were able to solve it, and I wanted to try your solution. However it seems like some of the files you mention don't exist anymore (FallbackMathView.ts).. I think that the repo has been restructured a bit. Would you be willing to point me in the right direction to solve this issue? :)
|
|
Hi I ended up installing Mathjax, and included the response as on a "normal" Webpage for the Web-Version. For the native Version, I created the SVGs myself (display with SvgXml), and wrapped them in a (<View style={{flexDirection: 'row', alignItems: 'center',justifyContent: 'flex-start',flexWrap: 'wrap',}}>{retVal}). Unfortunately, I haven't worked with the code for a long time and don't have the time to read it again at the moment. |
Setting inline: false seems to add a margin in front of the formula. Alignment to flex-start does not work properly anymore. Do you have any idea how to fix it?
The text was updated successfully, but these errors were encountered: