Results 1 to 4 of 4

Thread: CSS + images in a QTextBrowser

  1. #1
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default CSS + images in a QTextBrowser

    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.


    Qt Code:
    1. QString html;
    2. html = "<html><head>";
    3. html += "<link rel='stylesheet' type='text/css' href='format.css'>";
    4. html += "</head><body>";
    5. html += "<img src='image.png'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
    6. "<span class='important'>Sed consequat luctus ante.</span> Nunc quis pede nec "
    7. "mauris pellentesque dignissim. Mauris nec ipsum. Donec condimentum, tellus "
    8. "vitae ullamcorper faucibus, magna <span id='free'>lorem pellentesque mauris, "
    9. "tristique sollicitudin quam lorem non velit. Suspendisse scelerisque facilisis eros. "
    10. "Nunc ut purus.</span> Curabitur ac dui ut velit luctus aliquam. Nulla nec lectus. "
    11. "<span class='colored'>Cras vitae lacus gravida mi vehicula hendrerit.</span> "
    12. "Phasellus a diam. Cras venenatis. Fusce ultrices. Praesent ultrices diam vel lacus. "
    13. "Vestibulum tortor orci, nonummy non, tincidunt non, laoreet sit amet, nibh.";
    14. html += "</body></html>";
    15.  
    16. QString css;
    17. css = "span.important {text-style: italic; text-decoration: underline;}";
    18. css += "span.colored {color:#DE0000; font-variant:small-caps;}";
    19. css += "#free { background-image: url('bg.png'); font-weight: bold; color:#0000DE;}";
    20.  
    21. doc->addResource( QTextDocument::ImageResource,
    22. QUrl( "image.png" ), QPixmap( ":menu_exit" ) ); // :menu_exit is an alias in the qrc-file
    23. doc->addResource( QTextDocument::ImageResource,
    24. QUrl( "bg.png" ), QPixmap( ":menu_settings" ) ); // :menu_settings is an alias in the qrc-file
    25. doc->addResource( QTextDocument::StyleSheetResource, QUrl( "format.css" ), css );
    26. doc->setHtml( html );
    27.  
    28. QTextBrowser *tb = new QTextBrowser( 0 );
    29. tb->setDocument( doc );
    30. tb->show();
    To copy to clipboard, switch view to plain text mode 

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

    Lykurg
    Attached Images Attached Images
    Last edited by jacek; 1st February 2007 at 17:45. Reason: wrapped too long lines

  2. #2
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    5,372
    Thanks
    28
    Thanked 976 Times in 912 Posts
    Qt products
    Qt3 Qt4
    Platforms
    Unix/X11 Windows

    Default Re: CSS + images in a QTextBrowser

    Nice. Maybe you could add this to our wiki?

  3. #3
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: CSS + images in a QTextBrowser

    Quote Originally Posted by jacek View Post
    Maybe you could add this to our wiki?
    done. Wiki article

  4. #4
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    5,372
    Thanks
    28
    Thanked 976 Times in 912 Posts
    Qt products
    Qt3 Qt4
    Platforms
    Unix/X11 Windows

    Default Re: CSS + images in a QTextBrowser

    Quote Originally Posted by Lykurg View Post
    Thank you.

Similar Threads

  1. How to display images in QTextBrowser ?
    By probine in forum Qt Programming
    Replies: 1
    Last Post: 12th January 2007, 09:58
  2. Loading images in QTextBrowser
    By nisha0609 in forum Qt Programming
    Replies: 1
    Last Post: 3rd January 2007, 10:44
  3. JPEG Images not shown in QiconView using QT3??
    By darpan in forum Qt Programming
    Replies: 1
    Last Post: 4th August 2006, 21:34
  4. [QT4] QtextBrowser and image size (win)
    By sebgui in forum Qt Programming
    Replies: 0
    Last Post: 28th March 2006, 22:01
  5. how to adjust sizes of QTextBrowser?
    By Pan Wojtas in forum Qt Programming
    Replies: 2
    Last Post: 7th February 2006, 23:25

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.