Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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 :
    testApp.png

    Browser reference:
    browserTest.png


  • Qt Champions 2019

    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.


  • Qt Champions 2019

    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.


  • Qt Champions 2019

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

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


  • Qt Champions 2019

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


  • Qt Champions 2019


Log in to reply