Text does not wrap automatically

bharathy-kannan commented 4 years ago

Hi,

I am trying to embed math equations in between text. I am unable to do this as the font size automatically changes and all the text gets printed in one line making the question unreadable. I am not sure where I am going wrong. Here is an example of the same. In the first line, I have written this within the MathView tag

'\text{This text does not wrap. This text does not wrap. This text does not wrap} \dfrac{1}{2}' '\text{This text does not wrap} \dfrac{1}{2}'

Kings-dev-02 commented 4 years ago

Hi Kannan,

Output is generated as svg so it will not get wrapped, instead of that split the text and formula and send only formula to mathview

Ex: <View style={{ flexDirection: 'row', flexWrap: "wrap", }}>

{"This text does not wrap. This text does not wrap. This text does not wrap"}

        <MathView
           math = '\dfrac{1}{2}''
        /><View>

   ios below will work, in android you have to give width and height in styles for math view
    <Text>
        <Text>{"This text does not wrap. This text does not wrap. This text does not wrap"}</Text>
        <MathView
            math = '\dfrac{1}{2}''
        /><Text>

ShaMan123 commented 4 years ago

Thanks @Kings-dev-02 @bharathy-kannan follow @Kings-dev-02 suggestion. Android shouldn't require width and height in style. Does it?

bharathy-kannan commented 4 years ago

Hi Kannan,

Output is generated as svg so it will not get wrapped, instead of that split the text and formula and send only formula to mathview

Ex: <View style={{ flexDirection: 'row', flexWrap: "wrap", }}> {"This text does not wrap. This text does not wrap. This text does not wrap"} <MathView math = '\dfrac{1}{2}'' />
   ios below will work, in android you have to give width and height in styles for math view
    <Text>
        <Text>{"This text does not wrap. This text does not wrap. This text does not wrap"}</Text>
        <MathView
            math = '\dfrac{1}{2}''
        /><Text>
Hi, What if I have a question like this? It is given that \Delta ABC \sim \Delta PQR with \frac{BC}{QR} = \frac{1}{3}. Then, \frac{ar(\Delta ABC)}{ar)\Delta PQR)} is equal to: In this case, I would have to parse it several times. Is there any other option?

Thanks for the response. Appreciate it.

ShaMan123 commented 4 years ago

Read #21 - maybe webview? This library has been created to eliminate the use of webview due to performance and styling issues. However, wrap content is valuable, so maybe the trade off is worth while. Give it a try. Besides that... As mentioned above, break it down to bits and render separately.

bharathy-kannan commented 4 years ago

I tried using react-native-katex library which is a webview but then looks like here too it parses only expressions and not the normal text. I really like MathView. Is there any parser that you can suggest? Also looks like the Latex delimiters $ ... $ do not seem to work with MathView.

ShaMan123 commented 4 years ago

create an example so I can have a look

bharathy-kannan commented 4 years ago

I have just used the Katex render option and have tried out an expression. Again it does not parse normal text. The text comes in italics. If I place them in \text mode, then it does not wrap. How do I use normal text inside Katex?

function getContent({ inlineStyle, expression = '', ...options }) { const tryOutExpression = 'It is given that \Delta ABC \sim \Delta PQR with \frac{BC}{QR} = \frac{1}{3}. Then, \frac{ar(\Delta ABC)}{ar)\Delta PQR)} is equal to: '
return `<!DOCTYPE html>

`; }

const defaultStyle = StyleSheet.create({ root: { height: 20, }, questionText:{ fontSize: 20, color:'black', justifyContent: 'center', alignItems:'center', alignSelf:'center', padding:10, }, });

const defaultInlineStyle = html, body { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .katex { margin: 0; display: flex; font-size:3em; } ;

export default class Katex extends Component {

static propTypes = { expression: string.isRequired, displayMode: bool, throwOnError: bool, errorColor: string, inlineStyle: string, macros: object, output:string, trust:bool, colorIsTextColor: bool, onLoad: func, onError: func, };

static defaultProps = { expression: '', displayMode: false, throwOnError: false, errorColor: '#f00', inlineStyle: defaultInlineStyle, style: defaultStyle, macros: {}, output: 'htmlAndMathml', trus:true, colorIsTextColor: false, onLoad: () => {}, onError: () => {}, };

render() { const { style, onLoad, onError, ...options } = this.props;

return (
<View style={{flex:1}}>
  <WebView
  style={style}
  source={{ html: getContent(options) }}
  onLoad={onLoad}
  onError={onError}
  renderError={onError}
/>

</View>
)

} }

Really appreciate your help

ShaMan123 commented 4 years ago

Please create a gist or sandbox etc.

ShaMan123 commented 4 years ago

what if you replace $ with $$?

ShaMan123 commented 4 years ago

https://www.mathjax.org/#demo

bharathy-kannan commented 4 years ago

I have used Katex. May be MathJax would work. In Katex component that I have taken, it does not understand $ or $$. But what do others who use MathView usually do? Do they create their own mark up and parse to display the text properly?

ShaMan123 commented 4 years ago

Try this :

It is given that $\Delta ABC \sim \Delta PQR$ with $\frac{BC}{QR} = \frac{1}{3}$. Then, $\frac{ar(\Delta ABC)}{ar)\Delta PQR)}$ is equal to

ShaMan123 commented 4 years ago

This should work with MathView as well

bharathy-kannan commented 4 years ago

It works with MathJax Sandbox that you have shared. But unfortunately, if I paste this in MathView RN component, does not work.

The text part is not getting wrapped and they are all trying to fit in a single line. Difficult to read without zooming. Here is what I did Ex: <View style={{ flexDirection: 'row', flexWrap: "wrap", }}>

Appreciate your patience

ShaMan123 commented 4 years ago

Without a proper example I find it hard to help. So create your own sandbox or better off, create a react native app on a new git repository and share it with me.

bharathy-kannan commented 4 years ago

Sure. I will upload in git and share it with you

bharathy-kannan commented 4 years ago

Hi, I have created the repo here https://github.com/bharathy-kannan/mathviewexample

Basically I want to use normal text along with Math equations embedded inbetween. The questions will come from a database dynamically. The code can be seen in App.js where I have used both MathView and Katex to show a sample

Here is the screen shot of the code that has been uploaded

Appreciate your help.

Kings-dev-02 commented 4 years ago

Thanks @Kings-dev-02 @bharathy-kannan follow @Kings-dev-02 suggestion. Android shouldn't require width and height in style. Does it?

Ya below is not working in android it's asking for height and width if I use it as inline text, any help would be much appreciated

<Text> {"This text does not wrap. This text does not wrap. This text does not wrap"} <MathView math = '\dfrac{1}{2}'' /><Text>

Kings-dev-02 commented 4 years ago

Hi, I have created the repo here https://github.com/bharathy-kannan/mathviewexample

Basically I want to use normal text along with Math equations embedded inbetween. The questions will come from a database dynamically. The code can be seen in App.js where I have used both MathView and Katex to show a sample

Here is the screen shot of the code that has been uploaded

Appreciate your help.

Kannan,

I dont know whats your source of input, i assume you may take html input and want to render the same with math expression in mobile view, if so easy way is while creating html content wrap it inside your custom tag, Ex: Here is a normal text with some math in it using <mymath data='\frac{1}{2}'> \frac{1}{2} </mymath>

above will still work in the browser without any problem your custom tag will be ignored and you can use mathjax or katex to render, when it comes to react-native, parse that tag replace with mathview

Thanks, Kingslee

bharathy-kannan commented 4 years ago

Hi,

I plan to just store plain text with Latex strings in the database without Html. Thanks for the suggestion though. It seems like a good idea. Any idea why Katex in webview too does not render? Is there something wrong with the code that I have written?

Thanks Bharathy Kannan

ShaMan123 commented 4 years ago

I sent a PR. apparently text should be wrapped as follows:

math={'\\text{my text }\\frac{1}{2}'}

mathjax docs are unkind.

But it is strongly suggested you render text in <Text /> and math in <MathView />

ShaMan123 commented 4 years ago

@Kings-dev-02 regarding setting width/height did you try following the example's components?

bharathy-kannan commented 4 years ago

If I use <'Text /> and <'MathView /> separately, I dont have to give height or width. But if I embed MathView inside Text component, it expects height and width. I guess I will have to go with the first option as I may not know the height and width of the rendered element. But I would request you to sincerely consider having the normal mode with math mode as a feature request. This will help many

ShaMan123 commented 4 years ago

You shouldn't wrap MathView with Text. I have added another screen to the example app: Inline Text. It accepts line breaking and $ $$. You should both take a look. I might merge this as default behavior in the future.

bharathy-kannan commented 4 years ago

I resolved the problem somehow. However, I am not sure that the <Text> component and <MathView> do not gel together and look distinct when written with flexWrap. Any suggestions here? Sometimes they come on different lines too. @ShaMan123 should I take a pull again? Also how to make the font size of normal text and MathView text look alike? Any suggestions on the font face?

Here is my code

`<View style={{flexDirection:'row', flexWrap:"wrap", paddingLeft:10, alignItems:'center', paddingBottom:40}}>

If ABC and DEF are similar triangles such that

      <MathView  style={styles.questionText} math={'\\angle A=47\\ degree'} />
      <Text  style={styles.questionText}>and</Text> 
      <MathView  style={styles.questionText} math={'\\angle E=83\\ degree'} />
      <Text  style={styles.questionText}>then</Text>
      <MathView  style={styles.questionText} math={'\\angle C = ?'} />          
      </View>`

const styles = StyleSheet.create({ questionText:{ fontSize: 15, color:'black', justifyContent: 'center', alignItems:'center', alignSelf:'center', padding:10, }

ShaMan123 commented 4 years ago

Man, I'm having a hard time understanding what you mean. Upload some screenshots, perhaps. Revise your PR, definitely. And dive into the example app!! A lot can be learned from the snippets there which I deliberately wrote.

ShaMan123 / react-native-math-view

Text does not wrap automatically #22