How to allow user to enter maths symbols?

[jameshoty]

Is there a way to allow user to enter maths symbols (square root, fraction, x to the power of y,  (3x + y) / 4 (but display in the "horizontal form) when developing using DW CC?

[BenPleysier]

Have a look at HTML Unicode UTF-8

In other words, because the symbols are not included on a key board, your users will need to use an HTML entity name.

[jameshoty]

Thanks for the prompt reply. I am 2 weeks "old" with Dreamweaver and so is HTML/CSS etc, and so if my question sounds "stupid" kindly forgive me.

What is HTML entity name? And how will the users know what number to enter for (for example) square root?

[BenPleysier]

On second thoughts, the HTML entity way is far too limited for what you want.

The problem is that HTML on its own will not do the job, you will need another interpreter/program to do that.

Have a read of MathJax and see how that fits in with your project.

[B i r n o u · Accepted solution]

yep currently only gecko allows this use, but depending on the target audience (I don't think that it could be a problem) to ask the use of Firefox for such a web site... and that way, the content will respect the pure standrad (it is a w3c recommendation - MathML Fundamentals ) instead of going nowhere using proprietary tagging... don't you think?

at least if that was my client, I will have this talks to warn him about too proprietary orientation before committing a significant amount of work

[B i r n o u]

did you check on the mathml side ?

<math> - MathML | MDN

[WolfShade]

I looked at the page from the link you provided.  Unfortunately, it only works in most versions of FireFox, some Opera, some Safari.  There is no support for IE or Chrome, not even the most recent versions.

V/r,

^ _ ^

[MrMathType — Retired]

I see the "page from the link you provided" you're referring to is the one to MathML. I'd like to point out the other one is perhaps more useful. MathJax works in all browsers on all platforms, mobile devices included.

[WolfShade]

Gotta admit, that's pretty impressive.  But (unless I'm missing something) it still requires the user who is inputting the math to be familiar with the 'language' of coding the math.  Is that a commonly shared experience?

\(ax^2 + bx + c = 0\)
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Granted.. not quite HTML entities or ASCII.

V/r,

^ _ ^

[MrMathType — Retired]

You're correct that MathJax in itself does require some knowledge of LaTeX syntax. There are GUI plug-ins though, that can allow the end user/website visitor to point & click to build a mathematical expression. I'm sure this is intended to be a neutral site, so rather than point you to a specific one or two, I bet if you do a Google search for user math entry in web pages or some similar string, you can find several to choose from.

[MrMathType — Retired]

From your original description, it seems like you're wanting to build a web page to allow user input of some type -- in a form perhaps? If this is the case, really none of the suggestions here are what you're after. The other responses were based on you being the one to enter these mathematical symbols or expressions. If I have understood correctly and it's the user who will be entering this information, you can't require the user to already have an understanding of HTML entities or the like. You'll need some sort of user interface that enables mathematical input. There are some available if that's what you're after.

[jameshoty]

It is true that the suggested resources is too "advance" for me at this moment. And it is correct that I want to build a site that allow users to enter math symbols and submit it to the site owner. The site owner will reply and will only enter math simple too. You are right that it is not easy for users to learn the "language" and intuitively entering  the math symbol. And I only want about 10-20 maths symbols for this moment. Is this possible to do?

[BenPleysier]

MrMathType has already stated that which I subtly pointed out, even for experienced coders, this is a mamouth task. I envisage a sort of a lookup table that pops up when a hotkey, or similar, is pressed. The pop-up would contain the symbols and when the required symbol is pressed, it will insert that symbol where the cursor is positioned. As far as I know, there is no out-of-the-box solution for this.

Instead of a pop-up, you could have a menubar containing the symbols. This would work in a similar manner to the pop-up.

[jameshoty]

MrMathtype, BenPleysier,

I am happy that your suggestion is what I think will work for me and my audience. Can I ask you for a sample how I can start doing this? Many thanks.

[BenPleysier]

The following example, using emoticons, was taken from javascript - Images inside an input text - Stack Overflow Paste the code into a new document and see it work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
[contenteditable] {
border: 1px solid #000;
margin: 0.4em 0;
line-height: 1.4em;
-webkit-appearance: textfield;
appearance: textfield;
}
img {
vertical-align: top;
max-height: 1.4em;
max-width: 1.4em;
}
.selectable-icons img {
cursor: pointer;
}
</style>
  </head>
  <body>
<p>Just click on an icon to add it.</p>
<div class="custom-input">
  <div class="selectable-icons">
    <img src="//i.stack.imgur.com/nO2hl.png" /><img src="//i.stack.imgur.com/IkjJW.png" /><img src="//i.stack.imgur.com/QrKSV.png" /><img src="//i.stack.imgur.com/sZpOK.png" /><img src="//i.stack.imgur.com/d7HIy.png" /><img src="//i.stack.imgur.com/iUDpH.png" /><img src="//i.stack.imgur.com/IjpTt.png" /><img src="//i.stack.imgur.com/rDCTA.png" /><img src="//i.stack.imgur.com/YtkL1.png" /><img src="//i.stack.imgur.com/wPXCd.png" />
  </div>
  <div contenteditable="true">
    You can type here. Add an icon.
  </div>
</div>     
<script type="text/javascript">
document.querySelector('.selectable-icons').addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() === 'img') {
document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true));
}
});
    </script>
 </body>
</html>

Instead of the emoticon images, you could creat your own images.

Please be reminded that this is an example of an idea and not an example that you can use in your project.

[jameshoty]

I am so impressed by the code. You did that in such a short time frame! That is very close to what I am thinking to do. However, it may not fit into every scenario, for example to type $(32 - y/3) to look like the attached image may not seem easy. But this is easy

[hans-g.]

Hi James,

---------- I deleted my answer, because it looks like a misunderstanding ----------

Hans-Günter

[MrMathType — Retired]

There are solutions that allow fairly easy typing of mathematical expressions into web pages -- some with a point & click GUI, some by typing LaTeX. Most work on any browser. This search shows several: https://www.google.com/search?q=web+page+math+entry+gui&oq=web+page+math+entry+gui

With regard to MathML support in browsers, B i r n o u​ is correct that currently only gecko allows this, but there is a significant move afoot to enable it in Chrome. There is also halfway-decent MathML support in Safari. Not complete support, but depending on your application, it may work.

[B i r n o u]

always keep in mind, that depending on the volume of datas that you will end up with... that amount of data will have to cross the next and future years... if you don't want to loose it, and the job done, always remind about keeping it in the more standard way as you can...

second point, in the next future, you will probably need to make your datas be crossed by other applications ... and if they are not based on a standard, you will need then to build a proprietary IDE to make them talks with other destinations ?...

again that bring us back to standard...

[B i r n o u]

I think that what ever the input will be (text, math, draw....) the end user will have two choice, or knowing the meta language, or having a user interface to enter the content and format it...

that is the way it is since the web exists...