so basically I want to show mathematical formulae etc. dynamically as an explanation tool on a little static website.
For example: have a matrix and a slider and animate the content of that matrix to contain the slider value plus the resulting determinant. (Basically I want to do stuff like 3b1b, but in a browser;)
I have already tinkered with the idea and tried to do first tests with MathJax, but its dynamic rendering capabilities are (as of my experience) severely limited.
Also I've failed to find a library specifically designed for this (most Maths libraries are focused on showing graphs and stuff, not maths text).
If anyone has an idea on how to (easily, I'm not a huge JS expert, sadly) implement this, I would be happy to hear it ;)
I have a set for formulas that I need to display on the webpage. The values in them are not fixed, but presented in a text input. Right now I'm using tables to represent these formulas (fractions. Example image is at the bottom of post). I was looking for a library that would allow me to do it, but didn't find one. Can someone demonstrate how this can be achieved without tables? Can I do this with Bootstrap/JQuery/JavaScript/CSS/Some other library?
Any help is appreciated.
Agreed with wolfson, MathJax seems like it would work for you, I'm not certain if it works with HTML inputs as you have above.
The "official" answer (as supported by the HTML and CSS governing bodies) is MathML.
There are also texmath and LaTexMathML which are designed to be similar to Latex syntax, so if you're familiar with Latex equations these may be the best option. A number of these solutions require having control over the webserver that's hosting the page, which may not be possible/appropriate depending on your circumstances. If you are dead-set on not using tables these could all work, though I see no reason why dynamically resized/re-positioned input boxes done using JavaScript couldn't also suffice, but this would likely be a lot more work and less replicatable.
References: tex.stackexchange.com
I am trying to integrate a mathematical formula editor into a website. I want users to write out an equation in this editor and have the editor export to contain source code in MathML format.
When I play around with the demo and change the equations, the source code does not update to the new equation.
Does this require backend work?
Please no redirections to other formula editors!
For me it does.
q²-1/q-1
then I use their javascript link
javascript:alert(org.mathdox.formulaeditor.FormulaEditor.getEditorByTextArea("formula1").getMathML())
and the result is
mlns="http://www.w3.org/1998/Math/MathML"><mfrac><mrow><msup><mi>q</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow><mrow><mi>q</mi><mo>-</mo><mn>1</mn></mrow></mfrac></math>
when I change the formula to
q²-1/q-2
I get
<math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mrow><msup><mi>q</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow><mrow><mi>q</mi><mo>-</mo><mn>2</mn></mrow></mfrac></math>
It definitely changes the value. You should provide an example or something similar as referred to SO 'guideline'. You can have a look here: https://stackoverflow.com/tour
Before I started to try and make this thing, I wanted to know if it is possible, under the following circumstances:
The code to script up that math must be able to be taken, submitted and stored in a database
The code for two pieces of math which look exactly the same must have the exact same code
According to the requirements, wherever the user clicks his or her mouse, the caret must move to that specific element or part of the math
So, is it possible? I'm looking forward to using technologies such as HTML, JavaScript, jQuery, and even Flash as a last resort.
MathQuill lets you type maths in a WYSIWYG fashion, source here.
There is a demo on the homepage.
I think you want something like MathML. Take a look here. http://www.w3.org/Math/
or maybe http://code.google.com/p/mathmleditor/
I found this a while ago http://www.codecogs.com/latex/eqneditor.php pretty useful implementation of LaTeX with a live preview, I've used it a few times. Probably doesn't fit the bill for your point 3 either but just in case it is useful.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm interested in seeing a good diff algorithm, possibly in Javascript, for rendering a side-by-side diff of two HTML pages. The idea would be that the diff would show the differences of the rendered HTML.
To clarify, I want to be able to see the side-by-side diffs as rendered output. So if I delete a paragraph, the side by side view would know to space things correctly.
#Josh exactly. Though maybe it would show the deleted text in red or something. The idea is that if I use a WYSIWYG editor for my HTML content, I don't want to have to switch to HTML to do diffs. I want to do it with two WYSIWYG editors side by side maybe. Or at least display diffs side-by-side in an end-user friendly matter.
There's another nice trick you can use to significantly improve the look of a rendered HTML diff. Although this doesn't fully solve the initial problem, it will make a significant difference in the appearance of your rendered HTML diffs.
Side-by-side rendered HTML will make it very difficult for your diff to line up vertically. Vertical alignment is crucial for comparing side-by-side diffs. In order to improve the vertical alignment of a side-by-side diff, you can insert invisible HTML elements in each version of the diff at "checkpoints" where the diff should be vertically aligned. Then you can use a bit of client-side JavaScript to add vertical spacing around checkpoint until the sides line up vertically.
Explained in a little more detail:
If you want to use this technique, run your diff algorithm and insert a bunch of visibility:hidden <span>s or tiny <div>s wherever your side-by-side versions should match up, according to the diff. Then run JavaScript that finds each checkpoint (and its side-by-side neighbor) and adds vertical spacing to the checkpoint that is higher-up (shallower) on the page. Now your rendered HTML diff will be vertically aligned up to that checkpoint, and you can continue repairing vertical alignment down the rest of your side-by-side page.
Over the weekend I posted a new project on codeplex that implements an HTML diff algorithm in C#. The original algorithm was written in Ruby. I understand you were looking for a JavaScript implementation, perhaps having one available in C# with source code could assist you to port the algorithm. Here is the link if you are interested: htmldiff.codeplex.com. You can read more about it here.
UPDATE: This library has been moved to GitHub.
I ended up needing something similar awhile back. To get the HTML to line up side to side, you could use two iFrames, but you'd then have to tie their scrolling together via javascript as you scroll (if you allow scrolling).
To see the diff, however, you will more than likely want to use someone else's library. I used DaisyDiff, a Java library, for a similar project where my client was happy with seeing a single HTML rendering of the content with MS Word "track changes"-like markup.
HTH
Consider using the output of links or lynx to render a text-only version of the html, and then diff that.
What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.
So, you expect
<font face="Arial">Hi Mom</font>
and
<span style="font-family:Arial;">Hi Mom</span>
to be considered the same?
The output depends very much on the User Agent. Like Ionut Anghelcovici suggests, make an image. Do one for every browser you care about.
Use the markup mode of Pretty Diff for HTML. It is written entirely in JavaScript.
http://prettydiff.com/
If it is XHTML (which assumes a lot on my part) would the Xml Diff Patch Toolkit help? http://msdn.microsoft.com/en-us/library/aa302294.aspx
For smaller differences you might be able to do a normal text-diff, and then analyse the missing or inserted pieces to see how to resolve it, but for any larger differences you're going to have a very tough time doing this.
For instance, how would you detect, and show, that a left-aligned image (floating left of a paragraph of text) has suddenly become right-aligned?
Using a text differ will break on non-trivial documents.
Depending on what you think is intuitive, XML differs will probably generate diffs that aren't very good for text with markup.
AFAIK, DaisyDiff is the only library specialized in HTML. It works great for a subset of HTML.
If you were working with Java and XHTML, XMLUnit allows you to compare two XML documents via the org.custommonkey.xmlunit.DetailedDiff class:
Compares and describes all the
differences between two XML documents.
The document comparison does not stop
once the first unrecoverable
difference is found, unlike the Diff
class.
I believe a good way to do this is to render the HTML to an image and then use some diff tool that can compare images to spot the differences.