Highlighted

How to allow user to enter maths symbols?

Community Beginner ,
Dec 12, 2017

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

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

Views

810

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to allow user to enter maths symbols?

Community Beginner ,
Dec 12, 2017

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

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

Views

811

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 12, 2017 0
Adobe Community Professional ,
Dec 12, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 12, 2017 0
Community Beginner ,
Dec 12, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 12, 2017 0
Adobe Community Professional ,
Dec 13, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Adobe Community Professional ,
Dec 14, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 14, 2017 0
Adobe Community Professional ,
Dec 12, 2017

Copy link to clipboard

Copied

did you check on the mathml side ?

<math> - MathML | MDN

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 12, 2017 0
LEGEND ,
Dec 13, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Engaged ,
Dec 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 1
LEGEND ,
Dec 13, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Engaged ,
Dec 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 2
Engaged ,
Dec 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 1
Community Beginner ,
Dec 13, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Adobe Community Professional ,
Dec 13, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 1
Community Beginner ,
Dec 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Adobe Community Professional ,
Dec 13, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Community Beginner ,
Dec 13, 2017

Copy link to clipboard

Copied

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 Screen Shot 2017-12-14 at 11.38.15 AM.png may not seem easy. But this is easy Screen Shot 2017-12-14 at 11.41.18 AM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 13, 2017 0
Adobe Community Professional ,
Dec 14, 2017

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 14, 2017 1
Engaged ,
Dec 15, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2017 1
hans-g. LATEST
Adobe Community Professional ,
Dec 15, 2017

Copy link to clipboard

Copied

Hi James,

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

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2017 0
Adobe Community Professional ,
Dec 14, 2017

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 14, 2017 0