Issue
In my project(angular) I have to get latex inputs and render them. For that purpose I use mathlive. When I render using the convertLatexToMarkup function (provided by mathlive) it creates a lot of nested spans and applies style to it. The problem is I am unable to wrap them in a div, for which I have set width, the content just overflows the div.
I tried setting the white-space:normal style of span elements as suggested elsewhere, but it didn't work or rather it doesn't cover the entire width of the div. If I set white-space:nowrap the content just overflows the div.
A minimal example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive-static.css" />
<style>
/*
span {
white-space:normal;
} */
</style>
</head>
<body>
<div style="width:200px;background-color: yellow;">
<p id="toberendered">This is a very long text with math content in it \sqrt[3]{x+y}. This is a very long text with math content in it \sqrt[3]{x+y}</p>
</div>
<p id="nottoberendered">Preview \sqrt[3]{x+y}</p>
<script type="module">
import { convertLatexToMarkup,renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';
function replaceSpaces(input){
if(input == null){return "";}
var output = input.toString().replace(/ /g,"\\; ");
return "$$" + output + "$$";
}
var el= document.getElementById("toberendered");
el.innerHTML = convertLatexToMarkup(replaceSpaces(el.innerText),{
mathstyle: 'textstyle',
letterShapeStyle: 'upright' });
</script>
</body>
</html>How do I wrap the content to fit the width of a div?
Solution
The text is wrapped correctly when you just declare the actual math parts of the text as such and render these individually:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive-static.css" />
<style>
/*
span {
white-space:normal;
} */
</style>
</head>
<body>
<div style="width:200px;background-color: yellow;">
<p>This is a very long text with math content in it $$\sqrt[3]{x+y}$$. This is a very long text with math content in it $$\sqrt[3]{x+y}$$</p>
</div>
<script type="module">
import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';
renderMathInDocument();
</script>
</body>
</html>Answered By - jf_
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.