Solved CSS styling richtext in QTextDocument
-
Hello,
SHORT: Some styles from the supported subset are not working.
I work in a reporting project. My report contains images tables and graphs. I can successfully add all items. Then I safe it as pdf using Qt, works very nice.
The main problem is with table styling. According to https://doc.qt.io/qt-5/richtext-html-subset.html the css styles I need should be supported.
For case of this topic I created minimal demo app using Qt Widgets. On test button it loads css file and template html file. It sets it to the QTextEdit document a and displays.
What does not work is the width style (nor as attribute) and also separate borders not work, like border-bottom-width: 2px;
At the end I attach print screens from the app and reference screen from chromium.
Demo project in a zip file (6kB): https://drive.google.com/file/d/17hRBrIp4NvXo6yIMHmRrdedGQELdwE_8
Thanks for any hints.
Regards, Thomas
Example code:
mainwindow.cpp :
void MainWindow::on_pushButton_clicked() { //https://doc.qt.io/qt-5/richtext-html-subset.html //open HTML and CSS files QFile tstFile("../test.html"); QFile cssFile("../styles.css"); tstFile.open(QFile::ReadOnly); cssFile.open(QFile::ReadOnly); //get QTextDocument reference QTextDocument *doc = ui->textEdit->document(); //Set CSS and HTML doc->setDefaultStyleSheet(cssFile.readAll()); doc->setHtml(tstFile.readAll()); //Display ui->textEdit->setDocument(doc); //Show Qt version ui->label_2->setText(qVersion()); //close files tstFile.close(); cssFile.close(); }
test.html :
<head> <!-- for use in a classic browser: only for demo, not used in real app --> <link rel="stylesheet" href="./styles.css"> </head> <body> <table class="superTable"> <tr><td> <table class="tableA"><tr><td>long text, longer than others, right at the top</td></tr></table> <table class="tableB"> <tr> <td class="cellA">cell A</td> <td class="cellB">cell B</td> </tr> </table> </td></tr> </table> </body>
styles.css :
body { color: black; background: yellow; } table { border-style: solid; border-width: 1px; border-collapse: collapse; } .superTable { border-top-style: dotted; /* not working */ border-bottom-style: dotted; /* not working */ border-bottom-width: 2px; /* not working */ border-right-width: 2px; /* not working */ width: 500px; /* not working */ min-width: 500px; /* not working */ } .tableA { border: 2px dotted red; /* combined styles not working */ } .tableB { width: 100%; /* cannot test as width is not working */ align: center; /* not working */ text-align: center; /*standart css for browsers*/ } .tableB .cellA{ width: 30%; /* not working */ border-style: solid; border-width: 1px; border-collapse: collapse; } .tableB .cellB { width: 70%; /* not working */ border-style: solid; border-width: 1px; border-collapse: collapse; }
Result :
Browser reference:
-
Qt does not support all HTML and CSS attributes - see https://doc.qt.io/qt-5/richtext-html-subset.html
/edit:
border-top-style: dotted;
should work though... will take a look. -
@Christian-Ehrlicher Hello, thank you. I know, it is what I say in the question. I use only those mentioned in supported subset as given in the link. Like width. But they do not work for some reason.
-
At least I found the reason why border-style does no longer work - it was due to https://bugreports.qt.io/browse/QTBUG-36152 which added some new capabilities (border-collapse)
-
@Christian-Ehrlicher I read it was fixed as of Qt 5.14. But I think I can live with that.
I found that the width works as attribute. At least the relative % variant.
-
I struggled with styling the html in QTextDocument. In my code I created an XML representation and then used XSLT stylesheet to convert to HTML. I am not completely satisfed with the output as I had issues making it look the way I wanted. I think I will eventually convert the XML to QML code on the fly. There were so many limitations with the HTML/CSS in QTextDocument it was very frustrating.
-
@fcarney Hello, thanks. Yes, it so limited that the use is only very basic. I am thinking of QML as well. But I never got in touch with that, and it is as learning whole new language. I do not know which way I would have to go. Well new adventure in front of me.
I am also looking at this report designer: https://sourceforge.net/projects/qtrpt/
What I like about HTML/CSS, is that everybody knows it, so it can be edited by any body who knows IT basics. I miss just few more styles and I would be happy.
-
@hullatom said in CSS styling richtext in QTextDocument:
I read it was fixed as of Qt 5.14.
You read it wrong - I said that this fix introduced the regression about not honoring the border-style when using border-collapse.
-
@Christian-Ehrlicher Maybe, it is somewhere in the text hidden? The summary on top of the page is saying:
https://bugreports.qt.io/browse/QTBUG-36152
Details
Type: Suggestion
Status:CLOSED
Priority: P4: Low
Resolution:Done
Affects Version/s:
5.2.0
Fix Version/s:
5.14.0 AlphaCreated: 13 Jan '14 22:56
Updated: 20 Aug '19 11:07
Resolved: 08 Aug '19 17:59 -
@hullatom Read:
At least I found the reason why border-style does no longer work - it was due to https://bugreports.qt.io/browse/QTBUG-36152 which added some new capabilities (border-collapse)
border-style does not work together with border-collapse.
-
-
Thank you all. In the end I managed to use the QtWebEngineView to render full html and css with no limitations.
-
@hullatom said in CSS styling richtext in QTextDocument:
render
Hi ,
I read something about xml to html conversion but am not too sure
and also thread is quite old, but if anyone knows how to convert xml to html
( qt 6.5 ) applying css -xslt , please let me know.thanks & warm regards.
~ Rudresh -
@Rudresh said in CSS styling richtext in QTextDocument:
( qt 6.5 ) applying css -xslt , please let me know.
You have to use an external library for this. Qt does not provide this functionality in Qt6.
-
@Christian-Ehrlicher
Thanks a lot Christian.