Report Editor - HTML Help
The “HTML” control is intended for placing the blocks, which design is defined in the HTML form, in the Valentina report. It allows you to insert such design elements like ordered and unordered lists, tables, rich text, and many more. You can watch the video tutorial about how to use HTML control.
The most HTML/CSS features are supported. Among them: text formatting, tables, floating elements, absolute positioning, anchors, embedded styles, CSS classes, most CSS selectors, etc.
Note, when printing a report to PDF, Postscript, or directly to a printer, rendered HTML is vectorized. Therefore, the text is scalable and selectable in produced files, also it can be printed with the maximum printer resolution. When saving a report as HTML, there is a choice – either to rasterize HTML and embed as PNG picture or insert markup as-is into the <iframe> tag. This behavior is controlled by iframe property of the HTML control.
The markup can be defined:
- in a text form in the control settings;
- in an external file;
- in the field, returned by a query of the report.
You can change the source text (data), the indents, the background color, or other properties of the HTML control using Properties Inspector.
HTML
Supported HTML tags can be found in the following sections.
Basic HTML
Tag | Description |
---|---|
<!DOCTYPE> | Defines the document type |
<html> | Defines an HTML document |
<head> | Defines information about the document |
<title> | Defines a title for the document |
<body> | Defines the document's body |
<h1> to <h6> | Defines HTML headings |
<p> | Defines a paragraph |
<br> | Inserts a single line break |
<!–…–> | Defines a comment |
Formatting
Tag | Description |
---|---|
<b> | Defines bold text |
<big> | Defines big text |
<blockquote> | Defines a section that is quoted from another source |
<center> | Defines centered text |
<cite> | Defines the title of a work |
<code> | Defines a piece of computer code |
<del> | Defines text that has been deleted from a document |
<dfn> | Specifies a term that is going to be defined within the content |
<em> | Defines emphasized text |
<font> | Defines font, color, and size for text |
<i> | Defines a part of text in an alternate voice or mood |
<ins> | Defines a text that has been inserted into a document |
<kbd> | Defines keyboard input |
<mark> | Defines marked/highlighted text |
<pre> | Defines preformatted text |
<s> | Defines text that is no longer correct |
<samp> | Defines sample output from a computer program |
<small> | Defines smaller text |
<strike> | Defines strikethrough text |
<strong> | Defines important text |
<sub> | Defines subscripted text |
<sup> | Defines superscripted text |
<tt> | Defines teletype text |
<u> | Defines text that should be stylistically different from normal text |
<var> | Defines a variable |
<wbr> | Defines a possible line-break |
Images
Tag | Description |
---|---|
<img> | Defines an image |
<figcaption> | Defines a caption for a <figure> element |
<figure> | Specifies self-contained content |
Links
Tag | Description |
---|---|
<a> | Defines a hyperlink |
<link> | Defines the relationship between a document and an external resource (used to link to style sheets) |
Lists
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dir> | Defines a directory list |
<dl> | Defines a description list |
<dt> | Defines a term/name in a description list |
<dd> | Defines a description of a term/name in a description list |
Tables
Tag | Description |
---|---|
<table> | Defines a table |
<th> | Defines a header cell in a table |
<tr> | Defines a row in a table |
<td> | Defines a cell in a table |
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table |
Styles and Semantics
Tag | Description |
---|---|
<style> | Defines style information for a document |
<div> | Defines a section in a document |
<span> | Defines a section in a document |
CSS
The HTML contents can be formatted according to the information in the style sheet.
There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
External CSS
External styles are defined within the <link> element, inside the <head> section.
<html> <head> <link rel="stylesheet" type="text/css" href="file:///styles/mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS file /styles/mystyle.css:
body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
Preview:
External CSS can be also stored on the webserver. In this case, the protocol prefix HTTP or HTTPS.
Internal CSS
An internal style sheet may be used if one single HTML control has a unique style.
The internal style is defined inside the <style> element, inside the head section.
<html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Preview:
Inline CSS
An inline style may be used to apply a unique style for a single control.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
Inline styles are defined within the “style” attribute of the relevant element:
<h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
Preview:
Source Data Dialog
To set source data double-click the control, or open the editor for property data in the property inspector of the control. The “Source Data” dialog will appear:
Here you can specify the data source for the control, that should contain the HTML code:
- Field – If selected, then HTML control will get data from the source query field. In the pop-up menu you can choose a necessary field.
- URL from field – If selected, then HTML control will display data from the file that defined by local or remote URL. The URL returned by the source query. In the pop-up menu you can choose a necessary field.
- URL (local or remote) – If selected, then HTML control will display data from the file that defined by local or remote URL. You can set URL manually or with the dialog for selecting files.
- Text – If selected, then HTML control will load data from the text input field.
Examples
Here are few examples of might look like the HTML control:
From Text
Source Text | Output |
---|---|
<a href="https://www.valentina-db.com">Visit valentina-db.com</a> | ![]() |
<p>This is normal text - <b>and this is bold text</b>.</p> | ![]() |
This is <big>big</big> text | ![]() |
<p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. </blockquote> | ![]() |
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element. </p> | ![]() |
<center>Centered text</center> | ![]() |
<p> The CSS <code>background-color</ code> property defines the background color of an element. </p> | ![]() |
<font size="18" color="#0000ff"> <i>Hello World!</i> <font> | ![]() |