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
.