PDA

View Full Version : CSS + images in a QTextBrowser



Lykurg
1st February 2007, 17:10
Hi,

I guess, that there are other people, who need to display images from the resource system in a QTextBrower or want to css-classes in their html. For that reason here my solution for

Use css-classes in HTML-tags
Use images from your qrc file in <img>
Use images in your css for background etc.




QString html;
html = "<html><head>";
html += "<link rel='stylesheet' type='text/css' href='format.css'>";
html += "</head><body>";
html += "<img src='image.png'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
"<span class='important'>Sed consequat luctus ante.</span> Nunc quis pede nec "
"mauris pellentesque dignissim. Mauris nec ipsum. Donec condimentum, tellus "
"vitae ullamcorper faucibus, magna <span id='free'>lorem pellentesque mauris, "
"tristique sollicitudin quam lorem non velit. Suspendisse scelerisque facilisis eros. "
"Nunc ut purus.</span> Curabitur ac dui ut velit luctus aliquam. Nulla nec lectus. "
"<span class='colored'>Cras vitae lacus gravida mi vehicula hendrerit.</span> "
"Phasellus a diam. Cras venenatis. Fusce ultrices. Praesent ultrices diam vel lacus. "
"Vestibulum tortor orci, nonummy non, tincidunt non, laoreet sit amet, nibh.";
html += "</body></html>";

QString css;
css = "span.important {text-style: italic; text-decoration: underline;}";
css += "span.colored {color:#DE0000; font-variant:small-caps;}";
css += "#free { background-image: url('bg.png'); font-weight: bold; color:#0000DE;}";

QTextDocument *doc = new QTextDocument;
doc->addResource( QTextDocument::ImageResource,
QUrl( "image.png" ), QPixmap( ":menu_exit" ) ); // :menu_exit is an alias in the qrc-file
doc->addResource( QTextDocument::ImageResource,
QUrl( "bg.png" ), QPixmap( ":menu_settings" ) ); // :menu_settings is an alias in the qrc-file
doc->addResource( QTextDocument::StyleSheetResource, QUrl( "format.css" ), css );
doc->setHtml( html );

QTextBrowser *tb = new QTextBrowser( 0 );
tb->setDocument( doc );
tb->show();

And how this looks, you see in my attached image.

Lykurg

jacek
1st February 2007, 17:44
Nice. Maybe you could add this to our wiki?

Lykurg
1st February 2007, 21:54
Maybe you could add this to our wiki?

done. Wiki article (http://wiki.qtcentre.org/index.php?title=QTextBrowser_with_images_and_css)

jacek
1st February 2007, 21:58
done. Wiki article (http://wiki.qtcentre.org/index.php?title=QTextBrowser_with_images_and_css)
Thank you. :)