scientificware / jfx

https://openjdk.java.net/projects/openjfx/
GNU General Public License v2.0
0 stars 0 forks source link

JDK-8210970 : MathML editing issues in HTMLEditor #4

Open scientificware opened 6 years ago

scientificware commented 6 years ago

The purpose of this issue is to make mathematic editing as simple as possible.

This is referenced in Java Bug Database as

This is tracked in JBS as

Fluent Mathematic Writing.

Situation

Presently, the patch for JDK-8147476 (javafxports/openjdk-jfx Rendering issues with MathML token elements. w3c/mathml#117) allows to display MathML formula in WebView. Consequently we can also work with MathML in HTMLEditor, the MathML rendering is pretty good.

Justification

Conclusions and Roadmap.

HTMLEditor and underlying WebView i.e. embedded WebKit implementation are clearly not ready yet for formula editing. It still needs some work to solve issues.

Details

Related to HTMLEditor and MathML w3c/mathml#118

scientificware commented 6 years ago

Resources

scientificware commented 6 years ago

New issue, new tool to debug.

screenshot_20180809_141205

screenshot_20180807_202200

screenshot_20180807_204224

scientificware commented 6 years ago

<mi>, <mo>, ... MathML token insert at the beginning or the end, yes. In this case, caret position is rigth, no more work just reached the first parent <mrow>. Otherwise, no !

<mn> only digit and decimal separator enter, beginning and ending excepted. <mfrac> if loads

<mrow>
   <mo> ( </mo>
   <mfrac>
      <mi> a </mi>
      <mi> b </mi>
   </mfrac>
   <mo> ) </mo>
</mrow>

Has to use :

<mrow>
   <mo> ( </mo>
   <mfrac>
      <mrow><mi> a </mi></mrow>
      <mrow><mi> b </mi></mrow>
   </mfrac>
   <mo> ) </mo>
</mrow>

Saves simplyfied content where <mrow> could be remove, if it contains only one element.

scientificware commented 6 years ago

Using Fluent Mathematic Style Writing, all mathematic editing uses only these keyboard keys.

scientificware commented 6 years ago

User Input of Mathematics #1611

Website for the MathML Association.

GitLab Reprository for the MathML Association.

MathQuill

Xtext

scientificware commented 6 years ago

FXMessage is FXMath on mobile using Gluon Mobile

Writing a new application for mobile testers. The goal is obtain daily choice validations from selectionned testers. So have to use a common communication application like chat.

scientificware commented 6 years ago

Show formula given in LaTeX or its MathML-conversion in javafx-label <div contenteditable="true"> <p contenteditable="true"> ...

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;

public class TestRM extends Application {

    private Stage window;
    private Scene scene;

    private WebView webView = new WebView();

    String javaversion = System.getProperty("java.runtime.version");
    String javafxversion = System.getProperty("javafx.runtime.version");
    String osinfo = System.getProperty("os.name");
    String osarch = System.getProperty("os.arch");
    String agent = webView.getEngine().getUserAgent();

    private String string2 = new String("""
        <html>
            <head>
                <title>TestRM</title>
            </head>
            <body contenteditable=\"true\">
                <p>
                    <math xmlns=\"http://www.w3.or/1998/Math/MathML\" display=\"block\">
                        <semantics>
                            <mfrac>
                                <mrow>
                                    <mo>-</mo>
                                    <mi>b</mi>
                                    <mo>&pm;</mo>
                                    <msqrt>
                                        <mrow>
                                            <msup>
                                                <mi>b</mi>
                                                <mn>2</mn>
                                            </msup>
                                            <mo>-</mo>
                                            <mn>4</mn>
                                            <mi>a</mi>
                                            <mi>c</mi>
                                        </mrow>
                                    </msqrt>
                                </mrow>
                                <mrow>
                                    <mn>2</mn>
                                    <mi>a</mi>
                                </mrow>
                            </mfrac>
                            <annotation encoding=\"SnuggleTeX\">$$ \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a} $$</annotation>
                        </semantics>
                    </math>
                </p>
                <p>Version de Java . : %s</p>
                <p>Version de JavaFX : %s</p>
                <p>OS .............. : %s</p>
                <p>CPU ............. : %s</p>
                <p>User Agent ...... : %s</p>
            </body>
        </html>
        """.formatted(javaversion, javafxversion, osinfo, osarch, agent);

    VBox vbox = new VBox(webView);

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {
        webView.getEngine().loadContent(string2);
        window = primaryStage;
        scene = new Scene(vbox, 400, 300);
        window.setScene(scene);
        window.show();
    }
}
scientificware commented 6 years ago

Presently, the patch for JDK-8147476 solves MathML display issues in WebView. Consequently, it solves MathML display in HTMLEditor too.

The MathML rendering is pretty good and equivalent to MathML Rendering with Safari. I think that JDK-8089878, which describe only rendering issues, is also solved.

Set HTMLEditor content with the following code displays the quadratic formula as expected in JDK-8089878.

<math display="block"> 
   <mrow> 
      <mi>x</mi> 
      <mo>=</mo> 
      <mfrac> 
         <mrow> 
            <mo>−</mo> 
            <mi>b </mi> 
            <mo>±</mo> 
            <msqrt> 
               <mrow> 
                  <msup> 
                     <mi>b</mi> 
                     <mn>2</mn> 
                  </msup> 
                  <mo>−</mo> 
                  <mn>4</mn> 
                  <mi>a</mi> 
                  <mi>c</mi> 
               </mrow> 
            </msqrt> 
         </mrow> 
         <mrow> 
            <mn>2</mn> 
            <mi>a</mi> 
         </mrow> 
      </mfrac> 
   </mrow>
</math>

The remaining problems are related to editing capabilities.

Bugs : -Trying to modify a formula will occurate some trouble in your document. For example, try to modifiy the previous formula, by removing 2a from the fraction, this will break your formula.

Enhancements : A common user can not easily and directly use MathML to insert a mathematic formula in HTMLEditor.

Each test could be made with the previous MathML code.

scientificware commented 5 years ago

Cursor deplacements : EditorClientJava

scientificware commented 5 years ago

o7Planning

Tutoriel JavaFX Webview et Webengine

scientificware commented 5 years ago

https://css-tricks.com/

scientificware commented 5 years ago

See exchanges with ebraminio and khaledhosny. SVG font: extract SVG per character #1192

https://github.com/harfbuzz/harfbuzz/pull/2016#issuecomment-572034118

scientificware commented 5 years ago

FXMessage is FXMath on mobile using WebView

Writing a new application for mobile testers. The goal is obtain daily choice validations from selectionned testers. So have to use a common communication application like chat.

scientificware commented 5 years ago

Bug id ? - Height of cursor should be same as row-height, not height of text.

Token Element
annotation MathMLAnnotationElement
annotation-xml MathMLAnnotationElement
maction MathMLSelectElement
math
mfrac MathMLFractionElement
mfenced MathMLRowElement
msubsup MathMLScriptsElement
merror MathMLRowElement
mpadded MathMLPaddedElement
mphantom MathMLRowElement
mrow MathMLRowElement
mstyle MathMLRowElement
mover MathMLUnderOverElement
munder MathMLUnderOverElement
munderover MathMLUnderOverElement
msqrt MathMLRootElement
mroot MathMLRootElement
mi MathMLTokenElement
mn MathMLTokenElement
mo MathMLOperatorElement
mtext MathMLTokenElement
ms MathMLTokenElement
mspace MathMLSpaceElement
msub MathMLScriptsElement
msup MathMLScriptsElement
mtable MathMLPresentationElement
mtr MathMLPresentationElement
mtd MathMLPresentationElement
mmultiscripts MathMLScriptsElement
mprescripts MathMLPresentationElement
menclose MathMLMencloseElement
none MathMLPresentationElement
semantics MathMLSelectElement
maligngroup MathMLPresentationElement
malignmark MathMLPresentationElement
mglyph MathMLPresentationElement
mlabeledtr MathMLPresentationElement
mlongdiv MathMLPresentationElement
mscarries MathMLPresentationElement
mscarry MathMLPresentationElement
msgroup MathMLPresentationElement
msline MathMLPresentationElement
msrow MathMLPresentationElement
scientificware commented 5 years ago

Selection with the same document. Apple Touch Safari 9.

img_0113

scientificware commented 5 years ago
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style type="text/css">

</style>
<body>
<h1>Fraction</h1>
<p>This is an empty fraction.
<math>
<mfrac>
<mrow></mrow>
<mrow></mrow>
</mfrac>
</math>
</p>
<h1>Fraction</h1>
<p>This is a normal fraction :
<math>
<mfrac>
<mrow><mn>7</mn></mrow>
<mrow><mn>3</mn></mrow>
</mfrac>
</math>
</p>
</body>
scientificware commented 4 years ago
<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <p>
         <math> 
            <mi>A</mi>
            <mo>=</mo>
            <mi>y</mi>
            <mo>&times</mo>
            <mi>sin</mi>
            <mfenced>
               <mrow>
                  <mi mathvariant="monospace">x</mi>
                  <mo>&times</mo>
                  <mi mathvariant="bold">&pi;</mi>
               </mrow>
             </mfenced>
         </math>
      </p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>
scientificware commented 4 years ago

Enchaînement des appels de méthodes :

RenderBlock extends RenderBox and defines :

According this render implementation none paint should be made after a call to the renderBlock paint method. MathML implementation doesn't respect this and paint or paintChildren method are overided and paint proceed direct painting.

L'écriture mathématique implique que certaines chaines soient en italique par exemple le nom d'une variable. Mais ce n'est pas le cas pour le nom d'une fonction. Pour simplifer, l'implémentation actuelle considère que les variables d'un seul caractère sont bien des variables et elles sont affichées en italique par exemple <mi>i</mi> sera bien affiché i. Mais <mi>in</mi> ne sera pas affiché en italique.

scientificware commented 2 years ago

https://github.com/w3c/mathml : TeX2MathML converter implementation guidelines :

https://github.com/w3c/mathml-docs/issues/39