QTextBrowser HTML document images have bad resolution

Pietroro

As mentioned in the thread I am replying to, when trying to scale an image using the HTML size attribute the picture quality becomes terrible. I have been looking around for possible solutions or workarounds, but all I could find are extremely old versions of QT. Has any progress been made on this issue in the meantime?

mrjj

Hi
I doubt much has been changed with QTextBrowser.

You could not used https://doc.qt.io/qt-5/qwebengineview.html
instead ?
It based on the crome framework so should show images just fine.

Pietroro

Hi, thanks for the swift reply.

I tried switching over to QWebEngineView. Unfortunately there seems to be a view-breaking issue (half of the view is blacked out) if I don't set the attribute Qt::AA_ShareOpenGLContexts using QCoreApplication::setAttribute(). Unfortunately the attribute has to be set before QCoreApplication is created, a part of the code that I unfortunately have no access to.

It seems like QTextBrowser is the only option to display HTML files if I don't have access to that part of the code. Being unable to display images correctly however is a big problem

mrjj

Hi
Ok. that was sad.

Do you have some HTML to test with to see the bug/"feature" in QTextBrowser ?

Just to be sure i do it right.

Pietroro

Sure, here is the html:

<!DOCTYPE html>
<html>
    <body style="margin: 50px;" >
        <h1 style="text-align:center;"> Arbitrary Magnetic Fields with a CSV File</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br/>
            <img style="display: block; margin-left: auto; margin-right: auto;" src="example_field_math.png" height="150">
        </p>
    </body>
</html>

The image (example_field_math.png) I'm using is the following:

And here are two rendered views, once in browser where everything works out well, another inside QT.
Browser:
Screenshot from 2021-01-04 15-51-03.png
QT:

mrjj

Hi
Super. Hmm yes that really looks bad.

Where do i place the .png so it can find it ?
In a Qressource file or ?
(sorry not used TextBroser much)

Pietroro

@mrjj no worries, me neither :D

I placed it in the same directory as my html file. However I had to make sure that the directory is included in the paths searched for resources by the textbrowser. The docs say that the path leading to the directory containing the html is included by default. In my experience however that is not the case. I used the following to include the path manually:

   QStringList list = textbrowser->searchPaths();
   if(list.empty()) { list.append(QString::fromStdString("/absolute/path/to/directory/")); }
   textbrowser->setSearchPaths(list);

Hope this helps

mrjj

@Pietroro
Worked perfectly :)
I just pointed it to the project folder.

I get the same bad-looking image in Qt 5.15.1 so I doubt they fixed it.

Looking around in
https://code.woboq.org/qt5/qtbase/src/widgets/widgets/qtextbrowser.cpp.html

to see if i can spot what actually does the scaling.

Pietroro

Hi @mrjj

has any progress been made on your end? I tried to follow along in the file you linked yesterday, I could follow up to here. To me it seems like the <img> tag is serialised (or converted into text?) and inserted into the document. I can also see how the width and height properties of the "QTextImageFormat" are set, but I have unfortunately lost track of those. That is to say that I have no clue where they show up again.

Thanks for your help

mrjj

@Pietroro
Hi
Well i ended up with QTextDocument/Fragment and QWidgetTextControl too but
Its all wrapped in private pointers so its very doubtful we can replace enough to make it scale better.

However, a fun test could be to override the QBrowser Paint event and see if changes to QPainter is
carried through the call stack as you might then be able to allow better scale.

mrjj

Hi
I tried to overwrite the paint event but too much is hidden in private classes so
it was not really possible.
I also tried
virtual void initPainter(QPainter *painter) const override
to see if i could affect the painter but nothing.

I also tried using SVG file and to my surprise it also became ugly.

So sadly it seems it's not fixable with inheritance.

Pietroro

@mrjj Thanks for all the help you have been providing. Is this considered to be a bug then?

I have read somewhere that the issue might lie in the TextBrowser not being able to do any anti aliasing, that would sort of explain why even SVGs are affected. But if that's the case it is not going to be easily fixable...

What is usually the procedure to report these kinds of bugs?

mrjj

@Pietroro

Well im not sure its a bug as such, more like a design choice favoring speed over fidelity but nobody will
be angry about opening a feature enhancement ticket.

Regarding the use of SVG. it clearly rasters the SVG before drawing it so hence we got no benefit of it being vector.

Go to
https://bugreports.qt.io/secure/Dashboard.jspa
and login with the same info as you use here.

Then open a ticket. Make sure to provide details about Qt version and
attach a zip file containing a runnable project the demonstrates this so
it's easy for them to reproduce.

and then come back here and post link to ticket so others can vote for it.

But they are quite busy with Qt 6 so I highly doubt e see any fix to older versions any time soon.

Pietroro

Here we go, along with a poorly written minumum runnable project.

QTBUG-89843