Improvements to QTextDocument

Marknote uses QTextDocument for its WYSIWYG text editor. This is surpringly quite powerful and thanks to some code borrowed from KMail rich text editor, it wasn’t hard to implement huge part of the markdown specification.

But while QTextDocument is great, I hit quickly some limits. This is why I started fixing some of them and I already have some patches up for review in Qt.

Default table style

By default the style of the tables looks straight from the 90s, I submitted a patch to use something a bit nicer: (merged!)

Old style
Old style

New style
New style

This is easy to change in the app itself and this is already the case in Marknote and NeoChat table rendering, but by default I believe Qt should provides a nice style so that apps don’t need to figure out how to overwrite the default style.

While working on this, I also noticed that the border-collapse property was not supported by the layout engine in QtQuick and only in QtWidget. This resulted in the border of the tables to be twice as thick as they should be. This was fortunately fixed by a simple patch: (merged!)

Responsive images

A width and an height can be assigned to an image in a QTextDocument by using the respectives html attributes <img height="500" width="500" \>.This works correctly when the window size is known and static but less so then the window can be resized as will be the user. A common technique in web design is to add the following styles to the website:

img {
    max-width: 100%;

And while QTextDocument support some CSS properties, max-width wasn’t implemented. Adding the support for more properties in the HTML and CSS parser is quite simple as it was just forwarding the value of the max-width attribute to the QTextImageHandler, and a bit complicated was the handling of the % unit as previously only px and em was supported by Qt.

This resulted in two more patches, one for QtTextDocument and QtWidget and one for QtQuick.


Hopefully these patches will be reviewed and merged soon. Afterward I want to add support for a few more CSS properties like: border-radius for images and some other elements, as well the border-{width, style, color} properties for paragraphs to better support <blockquote /> (important when displaying emails).


With an account on the Fediverse or Mastodon, you can respond to this post. Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one. Known non-private replies are displayed below.

Learn how this is implemented here.

Licensed under CC BY-SA 4.0