Formatting Issues (inlineMath and alignment within text)

[zinnen]

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?

[ShaMan123]

Flew wrap perhaps. Look at the updated example בתאריך יום ו׳, 8 בינו׳ 2021, 17:09, מאת zinnen ‏<notifications@github.com>:

…

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> .

[zinnen]

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.

[ShaMan123]

Could you add background color/borders for debugging?

[zinnen]

[ShaMan123]

I don't know and don't really understand why to use flex: 0 or what it does.

[zinnen]

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.

[zinnen]

Why closing the issue if it still exists?

[ShaMan123]

You should follow the examples. There's a Flatlist example.
This may be caused by the android shadow node, I can't say for sure.
However, I don't see a reason why not to use flex:1 if it fixes the issue.
Unfortunately, I can't offer any further help.

[zinnen]

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.

[zinnen]

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.

[ShaMan123]

I can't reproduce.

These gifs are with config={{ inline: false }}

[zinnen]

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.

[ShaMan123]

This seems to be a deep problem.
It might be caused by the resolution. If so this may be a problem with the android svg renderer. Look here
I don't have the time to address the problem.
You are welcome to PR.

[ShaMan123]

There are problems with the Fallback component as well.
import Fallback from 'react-native-math-view/src/fallback

[zinnen]

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?

[ShaMan123]

Sounds like a good direction.
I tested something using the Fallback renderer (react-native-svg) and came up with similar findings. I have noticed that when using react-native-svg the size doesn't match what mathjax outputs.

Gist

1. If recall correctly, the android impl calculates it's size via the ShadowNode.
2. The Fallback (which is used for iOS and can be used as opt-in) obtains it's size from Mathjax, see code.

Proposals

1. Regarding android impl look at preserveAspectRatio and Alignment.
   Maybe try passing different values and see how it behaves. It is exported to js here. You can obtain it via the exported value Constants, see this
2. MathJax has very bad documentation - it's a guessing game to find a solution approaching core stuff.

Hope this helps.

[ShaMan123]

It looks like this should be the default value preserveAspectRatio="xMinYMid meet"

[ShaMan123]

try this 57d08c7
and make sure you don't override resizeMode. It should be set to contain

[zinnen]

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 = <svg style="vertical-align: -0.186ex" xmlns="http://www.w3.org/2000/svg" width="11.669ex" height="2.072ex" role="img" focusable="false" viewBox="0 -833.9 5157.7 915.9" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D44E" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-N-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path><path id="MJX-1-TEX-I-1D44F" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path><path id="MJX-1-TEX-N-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><path id="MJX-1-TEX-I-1D450" 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"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="msup"><g data-mml-node="mi"><use xlink:href="#MJX-1-TEX-I-1D44E"></use></g><g data-mml-node="mn" transform="translate(529, 363) scale(0.707)"><use xlink:href="#MJX-1-TEX-N-32"></use></g></g><g data-mml-node="mo" transform="translate(1154.8, 0)"><use xlink:href="#MJX-1-TEX-N-2B"></use></g><g data-mml-node="msup" transform="translate(2155, 0)"><g data-mml-node="mi"><use xlink:href="#MJX-1-TEX-I-1D44F"></use></g><g data-mml-node="mn" transform="translate(429, 363) scale(0.707)"><use xlink:href="#MJX-1-TEX-N-32"></use></g></g><g data-mml-node="mo" transform="translate(3265.3, 0)"><use xlink:href="#MJX-1-TEX-N-3D"></use></g><g data-mml-node="msup" transform="translate(4321.1, 0)"><g data-mml-node="mi"><use xlink:href="#MJX-1-TEX-I-1D450"></use></g><g data-mml-node="mn" transform="translate(433, 363) scale(0.707)"><use xlink:href="#MJX-1-TEX-N-32"></use></g></g></g></g></svg>

[zinnen]

Running with SvgFromXml. Will try to play a bit in the next weeks though very busy.

[ShaMan123]

You can use the fallback component, that does exactly that.

[zinnen]

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:

center:

flex-end:

[ShaMan123]

In this case I would try to use

alignItems: 'center',
justifyContent: 'flex-start'

[zinnen]

I tried all combinations. Do you know if the vertical-align of the svg style element is automatically considered by react-native-svg?

[ShaMan123]

software-mansion/react-native-svg@fe7e8b2

[ShaMan123]

software-mansion/react-native-svg#308

[ShaMan123]

Maybe try opening an issue there

[zinnen]

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 <notifications@github.com> Antworten an: ShaMan123/react-native-math-view <reply@reply.github.com> Datum: Montag, 18. Januar 2021 um 12:52 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] 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>.

[zinnen]

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?

[ShaMan123]

It would be great if you could share your findings or PR!
I've exposed MathText in the fallback in v3.8.0 so make sure you've upgraded.

- import MathView, { MathText } from `react-native-math-view`;
+ import MathView, { MathText } from `react-native-math-view/src/fallback`;

[ShaMan123]

v3.8.1

[zinnen]

Thanks, I will check if the offset is reliable and then share the findings.

[zinnen]

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.

[zinnen]

http://docs.mathjax.org/en/latest/options/output/svg.html#svg-options

This is the correct link to the svg output processor options

[ShaMan123]

Mathjax docs are unreliable when used in node.js
the error you metioned

MathJax error 'invalidOptionDisplayAlign'

means there's no such option.

Try setting the value here

[ShaMan123]

Great Work. I've tested it and it seems to solve the issue

[ShaMan123]

Hmm not sure anymore.
Run test at your end and report back.

[zinnen]

I do not see the wanted effect. The gap still persists.

[ShaMan123]

That's a shame.

[zinnen]

Then we have to look a little further :)

[zinnen]

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]

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)

[zinnen]

Still a little problem when formula does not fit within the given width: SvgFromXml will add a gap on top with current setting.

[ShaMan123]

Looks like progress. Mathjax is tiring indeed.

[ShaMan123]

I think you should try to submit an issue in the mathjax repo, they might be of more assistance

[zinnen]

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 :)

[yugeshk]

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? :)

[zinnen]

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.