is mathliv supported in the browser provided by QT framework?

agneshraok commented 10 months ago

Description

mathfield element is unrenderable in the browser provided by QT 5.12.7 framework(using QWebEngineView class).

Steps to Reproduce

Create the html file with the template code from getting started page of cortexjs.io website.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <title>untitled</title>
   <script defer src="//unpkg.com/mathlive"></script>
 </head>
 <body>
   <math-field>x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}</math-field>
 </body>
</html>

Use this file to render the html in QT browser (The browser that is provided by QT 5.12.7 framework, using QWebEngineView class). The following is the cpp code that renders the content of the html file in a browser window.

#include "qt_browser.h"
#include <QtWidgets/QApplication>
#include <QtWebEngineWidgets/QWebEngineView>

int main(int argc, char *argv[])
{
   QApplication a(argc, argv);

   // Create a QWebEngineView widget
   QWebEngineView view;

   // Set the URL to your HTML file
   view.setUrl(QUrl::fromLocalFile("path/to/index.html"));

   // Show the widget
   view.show();

   return a.exec();
}

Actual Behavior

The math-field element is not rendered completely, only plain text of the latex expression is rendered.

2023-11-10 11_41_40-qt_browser - Microsoft Visual Studio

Expected Behavior

Render the mathfield element. The following image is the output when run on browsers like Edge and Chrome.

2023-11-10 11_45_01-untitled and 10 more pages - Work - Microsoft Edge

Environment

MathLive version: 0.95.5

Operating System: Windows 10

Browser: Browser shipped with QT 5.12.7 framework (QWebEngineView); I have inserted its details below.

appName : Netscape
appVersion : 5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/5.12.7 Chrome/69.0.3497.128 Safari/537.36
userAgent : Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/5.12.7 Chrome/69.0.3497.128 Safari/537.36
platform : Win32
language : en-US
cookiesEnabled : true
online : true

arnog commented 10 months ago

Does the JavaScript in the page get executed? Does this version of QtWebEngine support web components/custom elements? Are there any messages being output to the console (see https://doc.qt.io/qt-6/qtwebengine-debugging.html)?

agneshraok commented 10 months ago

Does the JavaScript in the page get executed?

Yes it does get executed.

Does this version of QtWebEngine support web components/custom elements?

I am guessing this is the reason why it is not being rendered, Although I didn't find any details about this in QT documentation and I do not know how to confirm this otherwise.

Are there any messages being output to the console (see https://doc.qt.io/qt-6/qtwebengine-debugging.html)?

No.

arnog commented 10 months ago

You can check for custom elements support by executing the following JavaScript code: "registerElement" in document. If this returns false, custom elements are not supported.

agneshraok commented 10 months ago

Thanks for your input, I found out that registerElement is deprecated and I used the following code to confirm custom element support.

class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.textContent = "Hello, I am a custom element!";
  }
}

customElements.define("custom-element", CustomElement);
const customElementInstance = new CustomElement();
document.body.appendChild(customElementInstance);

const devConsole = document.getElementById("dev_console"); //This is a simple div

if ("customElements" in window) {
  devConsole.innerHTML = `custom Elements are supported`;
} else {
  devConsole.innerHTML = `custom Elements are not supported`;
}

Surprisingly it works on the QT WebEngine browser exactly same as Edge/Chrome, the output image is shown below. 2023-11-13 09_36_36-qt_browser

Let me know if you need me to execute any code to identify the reason, when I googled about this, it was mentioned that even if a browser supports custom elements, it might not support all functionality and it is better to check it specifically like if ('attachShadow' in HTMLElement.prototype)

arnog commented 10 months ago

You are correct. Checking for customElements is a better test. It does appear that custom elements are supported, indeed. It could be the lack of shadow DOM support. What does "attachShadow" in HTMLElement.prototype return?

Can you install handlers to capture console output (see link I sent previously) so that we could get an idea of where the failure is?

agneshraok commented 10 months ago

I can confirm that shadow DOM is being supported as "attachShadow" in HTMLElement.prototype does return true.

I coded C++ to capture logs using the dev console (Thanks for the link). Initially I do not get any errors (Hence I assumed that there were no errors, earlier), but after few seconds I get the following error for the "Getting started" html code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>untitled</title>
    <script defer src="//unpkg.com/mathlive"></script>
  </head>
  <body>
    <math-field>x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}</math-field>
  </body>
</html>

2023-11-13 11_59_48-qt_browser

I'm not sure why it is not able to fetch the resource from the CDN specifically in this browser.
Is there any way to use mathliv other than the CDN?
Am I allowed to copy paste the content of mathliv/dist/mathliv.js (From UNPKG) to a JavaScript file manually in my project and use it instead of the CDN?

arnog commented 10 months ago

Ah, if it's unable to load the library, that would explain why the mathfield does not render, indeed.

I would try to add a prefix to the URL, i.e. <script defer src="https://unpkg.com/mathlive"></script>. If your document is local and has a file:// URL, the URL without the prefix would be resolve to file://unpkg.com/mathlive and that may be while its failing.

If this doesn't work, you can copy the necessary files locally. They are in the dist folder in the distribution available on npm.

agneshraok commented 10 months ago

<script defer src="https://unpkg.com/mathlive"></script> did solve the loading error.

However, I encountered a series of errors:

The browser doesn't support globalThis.
The browser doesn't support Object.fromEntries.
The browser doesn't support window.queueMicrotask.

I added polyfill for these to fix the issues.

<script>
      if (typeof globalThis === "undefined") {
        (function () {
          Object.defineProperty(Object.prototype, "__magic__", {
            get: function () {
              return this;
            },
            configurable: true,
          });
          __magic__.globalThis = __magic__;
          delete Object.prototype.__magic__;
        })();
      }
      if (!Object.fromEntries) {
        Object.fromEntries = function (entries) {
          return entries.reduce(function (obj, entry) {
            obj[entry[0]] = entry[1];
            return obj;
          }, {});
        };
      }
      if (!window.queueMicrotask) {
        window.queueMicrotask = function (callback) {
          Promise.resolve().then(callback);
        };
      }
    </script>

Now, there are no errors in the console. However, I am facing issues with CSS I believe.

The underline for division is missing.
The keyboard is squished.

arnog commented 10 months ago

Hmmm... It looks like the stylesheet may not be applied at all to the mathfield. The issue with the keyboard sounds like it might be due to a lack of support for container queries.

agneshraok commented 10 months ago

You are right. The QTWebEngineView browser doesn't support container queries. Is there any way I can fix it? polyfill, perhaps?

arnog commented 10 months ago

Container queries are notoriously difficult to polyfill, but maybe there's a solution out there.

agneshraok commented 10 months ago

Okay, Thanks Arnog!

arnog commented 10 months ago

Closing

arnog / mathlive