Supported HTML Subset#
Describes the support for HTML markup in text widgets.
Qt’s text widgets are able to display rich text, specified using a subset of HTML 4 markup. Widgets that use QTextDocument
, such as QLabel
and QTextEdit
, are able to display rich text specified in this way.
Using HTML Markup in Text Widgets#
Widgets automatically detect HTML markup and display rich text accordingly. For example, setting a label’s text
property with the string "<b>Hello</b> <i>Qt!</i>"
will result in the label displaying text like this: Hello Qt!
When HTML markup is used for text, Qt follows the rules defined by the HTML 4 specification. This includes default properties for text layout, such as the direction of the text flow (left-to-right) which can be changed by applying the dir
:ref:` <Supported-HTML-Subset>` attribute to blocks of text.
Block Attributes#
The following attributes are supported by the div
, dl
, dt
, h1
, h2
, h3
, h4
, h5
, h6
, p
tags:
align
(left
,right
,center
,justify
)
dir
(ltr
,rtl
)
List Attributes#
The following attribute is supported by the ol
and ul
tags:
type
(1
,a
,A
,square
,disc
,circle
)
Table Cell Attributes#
The following attributes are supported by the td
and th
tags:
width
(absolute, relative, or no-value)
bgcolor
(Qtcolor names
or#RRGGBB
)
colspan
rowspan
align
(left
,right
,center
,justify
)
valign
(top
,middle
,bottom
)
CSS Properties#
The following table lists the CSS properties supported by Qt’s rich text engine:
Property
Values
Description
background-color
<color>
Background color for elements
background-image
<uri>
Background image for elements
color
<color>
Text foreground color
font-family
<family name>
Font family name
font-size
[ small | medium | large | x-large | xx-large ] | <size>pt | <size>px
Font size relative to the document font, or specified in points or pixels
font-style
[ normal | italic | oblique ]
font-weight
[ normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]
Specifies the font weight used for text, where
normal
andbold
are mapped to the correspondingQFont
weights. Numeric values are 8 times the equivalentQFont
weight values.
text-decoration
none | [ underline || overline || line-through ]
Additional text effects
font
[ [ <’font-style’> || <’font-weight’> ]? <’font-size’> <’font-family’> ]
Font shorthand property
text-indent
<length>px
First line text indentation in pixels
white-space
normal | pre | nowrap | pre-wrap
Declares how whitespace in HTML is handled.
margin-top
<length>px
Top paragraph margin in pixels
margin-bottom
<length>px
Bottom paragraph margin in pixels
margin-left
<length>px
Left paragraph margin in pixels
margin-right
<length>px
Right paragraph margin in pixels
padding-top
<length>px
Top table cell padding in pixels
padding-bottom
<length>px
Bottom table cell padding in pixels
padding-left
<length>px
Left table cell padding in pixels
padding-right
<length>px
Right table cell padding in pixels
padding
<length>px
Shorthand for setting all the padding properties at once.
vertical-align
baseline | sub | super | middle | top | bottom
Vertical text alignment. For vertical alignment in text table cells only middle, top, and bottom apply.
border-collapse
collapse | separate
Border Collapse mode for text tables. If set to collapse, cell-spacing will not be applied.
border-color
<color>
Border color for text tables and table cells.
border-top-color
<color>
Top border color for table cells.
border-bottom-color
<color>
Bottom border color for table cells.
border-left-color
<color>
Left border color for table cells.
border-right-color
<color>
Right border color for table cells.
border-style
none | dotted | dashed | dot-dash | dot-dot-dash | solid | double | groove | ridge | inset | outset
Border style for text tables and table cells.
border-top-style
<border-style>
Top border style for table cells.
border-bottom-style
<border-style>
Bottom border style for table cells.
border-left-style
<border-style>
Left border style for table cells.
border-right-style
<border-style>
Right border style for table cells.
border-width
<width>px
Width of table or cell border
border-top-width
<length>px
Top border width for table cells.
border-bottom-width
<length>px
Bottom border width for table cells.
border-left-width
<length>px
Left border width for table cells.
border-right-width
<length>px
Right border width for table cells.
border-top
<width>px <border-style> <border-color>
Shorthand for setting top border width, style and color
border-bottom
<width>px <border-style> <border-color>
Shorthand for setting bottom border width, style and color
border-left
<width>px <border-style> <border-color>
Shorthand for setting left border width, style and color
border-right
<width>px <border-style> <border-color>
Shorthand for setting right border width, style and color
border-top
<width>px <border-style> <border-color>
Shorthand for setting top border width, style and color
border-bottom
<width>px <border-style> <border-color>
Shorthand for setting bottom border width, style and color
border
<width>px <border-style> <border-color>
Shorthand for setting all four border’s width, style and color
background
[ <’background-color’> || <’background-image’> ]
Background shorthand property
page-break-before
[ auto | always ]
Make it possible to enforce a page break before the paragraph/table
page-break-after
[ auto | always ]
Make it possible to enforce a page break after the paragraph/table
float
[ left | right | none ]
Specifies where an image or a text will be placed in another element. Note that the
float
property is only supported for tables and images.
text-transform
[ uppercase | lowercase ]
Select the transformation that will be performed on the text prior to displaying it.
font-kerning
[ normal | none ]
Enables or disables kerning between text characters.
font-variant
small-caps
Perform the smallcaps transformation on the text prior to displaying it.
word-spacing
<width>px
Specifies an alternate spacing between each word.
line-height
<number>[% | px | pt | cm]
Specifies the height of a line. It can be one of the following:
fixed line height in pixels, points, or centimeters.
a percentage of the current font size.
Qt-specific CSS properties#
Besides the standard CSS properties listed earlier, the following Qt-specific properties can also be used to style a text block:
Property
Values
Description
-qt-block-indent
<number>
Indents the text block by the specified no. spaces.
-qt-list-indent
<number>
Indents the list items by the specified no. of spaces.
-qt-list-number-prefix
<string>
Prefixes the given string to list number in an HTML ordered list.
-qt-list-number-suffix
<string>
Suffixes the given string to list number in an HTML ordered list.
-qt-paragraph-type
empty
Hides the text block.
-qt-table-type
root | frame
root
renders the text blocks inline without borders and indentation, whereasframe
renders them on a new line with a frame around.
-qt-user-state
<number>
Adds it as user data for the text block.
Supported CSS Selectors#
All CSS 2.1 selector classes are supported except pseudo-class selectors such as :first-child
, :visited
and :hover
.