Comments (7)
Hi,
Thanks for reaching out.
I appreciate it!
Roadmap
My goal for this library is to support both rendering and editing of math. Rendering is supported but editing is not.
Once editing is supported I would like to have a native math keyboard component available in this library with customization options (characters, order of characters, pages, etc...).
Another high priority issue is supporting flexWrap
or auto line breaking.
There are 2 ways to go about this:
- Migrating the native modules to more suitable renderers instead of svg renderers. Editing will be much easier to support and hopefully line breaking as well. In addition the use of mathjax in
js
could be removed (lesserjs
, better performance). Unfortunately both libraries are old and seem to be unmaintained. - Implementing mathjax macro (I don't have a clue regarding this) or MML markup. My approach would be to send the svg data to native (this is how the code works on android) with additional macro/mml data. The additional data could be used to determine the position and size of math characters in the rendered svg component, thus enabling:
- fine-grained touch support which in turn will support editing.
- Mathjax V3 have on their roadmap the
break-line
feature OR Native measuring function for react to use for theShadowNode
which in turn will support auto line breaking.
The problem with this approach is that there's a lot of calculations being done by mathjax before rendering the math component, meaning performance suffers and that I don't thinkAndroidSVG
supports what's needed for this approach to work. See MathJax-src#358 issue and BigBadaboom#184.
Using canvasNOT GOOD ENOUGH:- Say the math is rendered to svg in native and not displayed.
- After layout it is measured.
- Using canvas we draw the svg in rects that fit the screen and break lines with calculations.
- Caveats:
-
Breaking on a character or a command
... sin(...
might result in.... s in(...
- Won't resolve
editing
-
Unfortunately there isn't sufficient documentation to determine the best approach. I tend to the first.
Both are major and require work.
Look here https://github.com/ShaMan123/react-native-math-view#followup for ideas and research.
from react-native-math-view.
Thank you for the follow up.
I was thinking: if we take
http://hevea.inria.fr/
make it usable as a package on mobile (either via reasonml or by figuring out how to generate a loadable .so)
Then get the resulting HTML and display it via RN's View.
Would that be a plausible path?
from react-native-math-view.
Sorry for the delay..
I don't see an advantage of using what you suggested. Parsing to html will require parsing/rendering from html, which is undesirable. MathJax handles parsing by it's self.
Could you explain why you think this is useful?
Regarding web support I guess it'll be rather simple. There are a few libraries supporting react if I'm not mistaken. We can wrap them or something.
from react-native-math-view.
With regards to: "> Parsing to html will require parsing/rendering from html, which is undesirable. MathJax handles parsing by it's self."
Right,
my thought (and that was perhaps wrong), that if it is possible to parse to HTML direct, then the result it can be rendered by React-native components.
Like
https://github.com/archriss/react-native-render-html
or by
https://github.com/iamacup/react-native-markdown-display
And, therefore, it would let us eliminate mathjax as well.
I might have been thinking wrong direction here, so not insisting.
from react-native-math-view.
The main motivation of this library is to handle math expressions WITHOUT a WebView
.
This eliminates react-native-render-html
. Regarding react-native-markdown-display
I don't know.
Mathjax has a node based parser, react-native-markdown-display
must have some kind of parser too. In addition, it will need Mathjax to parse the math into html and then it will handle parsing html into native views. Will it be faster than Mathjax alone? I think not. But your'e welcome to try.
from react-native-math-view.
react-native-markdown-display does not use webview. I am certain.
yes, it uses parser (and relies on markdown-it), then for each parsed section it
basically implements a block using RN
https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js
I should not have brought up react-native-render-html. Sorry for getting you to look at something non workeable. I thought I looked at its package.json .. but missed the "react-native-webview": "*"
With regards to latex to html parsing
I was going with a thought http://hevea.inria.fr/ doing the parsing, rather than mathjax
But again, it seems like what I was thinking is not the direction that would not be solving any problems.
So will table the hevea
idea.
I think translating that from ocaml to js (using bucklescript) , or figuring if it can be compiled into a native library is problematic too.
from react-native-math-view.
updated second comment
from react-native-math-view.
Related Issues (20)
- How to change font family and font style HOT 1
- Custom Fonts HOT 4
- \hline is not showing with vertical addition(IOS) HOT 9
- How to draw \begin{cases} ? HOT 2
- Require cycle from node_modules HOT 4
- font size config not working for MathText HOT 6
- Support for MathML input HOT 6
- Some LaTeX symbols not rendering HOT 6
- How to suppress errors that cause app crash? HOT 1
- Set a different color (for dark backgrounds) HOT 1
- Curly braces are broken to 3 pieces HOT 1
- Invariant Violation: requireNativeComponent: "RNMathView" was not found in the UIManager HOT 1
- Everything working and then suddenly got RNMathView" was not found in the UIManager. HOT 8
- can't find variable require HOT 9
- Unrecognized font family 'serif' at ios HOT 1
- Warning with new RN version 0.69+ HOT 2
- tests
- The lib does not correctly render some latex types that are normally rendered by MathJax HOT 7
- MathView container styling between Android and iOS is inconsistent HOT 3
- getting RNMathVIew not found in UI Manager. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-math-view.