CSS styling richtext in QTextDocument

hullatom

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:

Christian Ehrlicher

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.

hullatom

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

Christian Ehrlicher

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)

hullatom

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

fcarney

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.

hullatom

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

Christian Ehrlicher

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

hullatom

@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 Alpha

Created: 13 Jan '14 22:56
Updated: 20 Aug '19 11:07
Resolved: 08 Aug '19 17:59

Christian Ehrlicher

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

Christian Ehrlicher

See https://codereview.qt-project.org/c/qt/qtbase/+/322891

hullatom

Thank you all. In the end I managed to use the QtWebEngineView to render full html and css with no limitations.

Rudresh

@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

Christian Ehrlicher

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

Rudresh

@Christian-Ehrlicher
Thanks a lot Christian.