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

Some tags, mostly semantic, are omitted as they don't have specific rendering rules, but you can still use them. Also, it is possible to define custom styles for them using CSS if necessary.

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

The standard requires the external and internal CSS definitions to be declared in the <head> section of the HTML document. Although, for the current HTML renderer it is not necessary, it is recommended to stick to the standard.

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>

From Field

Field Definition

Output

  CONCAT (
    ' <ul>
      <li> <b> Country: </b> ', "fldCounty" , ' </li>
      <li> <b> City: </b> '   , "fldCity"   , ' </li>
      <li> <b> Company: </b> ', "fldCompany", ' </li>
   </ul>'
  )

  CONCAT (
    ' <table width="100%" border="1">
    <tr>
	    <td> <font color="#0000ff"> <b>', "fldCounty"	, ' </font> </b>
	    <td> <font color="#0000ff"> <i>', "fldCity"		, ' </font> </i>
	    <td> <font color="#0000ff"> <i>', "fldCompany".     , ' </font> </i>
          </tr>
    </table>'
  )