Skip to content
A HTML Label component for Delphi and Lazarus.
Pascal Batchfile
Branch: master
Clone or download
Pull request Compare This branch is 7 commits ahead, 2 commits behind digao-dalpiaz:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Demos
doc_images
images
packages
.gitignore
DzHTMLText2.dcr
DzHTMLText2.pas
DzHTMLText2_Register.pas
DzPngCollection.pas
LICENSE.md
README.md
README_ORIGINAL.md
clean_DCU.bat
clean_FPC.bat
lazdzhtmltext2.lpk
lazdzhtmltext2.pas

README.md

TDzHTMLText - An advanced HTML label for Delphi and Lazarus

Extended version of the DzHTMLText by Rodrigo Depiné Dalpiaz

Original README


Example program compiled with Lazarus



My modifications

New tags

  • <HR> - Horizontal line
  • <H1> - Header 1
  • <H2> - Header 2
  • <H3> - Header 3
  • <LI> - List item - 1st level
  • <LI2> - List item - 2nd level
  • <LC> - Background line color drawn from the current position to the end of the current line
  • <BBC> - Body background color drawn from the beginning of the current line to the end of the document
  • <SUB> - Subscript
  • <SUP> - Superscript
  • <IMG> - Image

<HR> - Horizontal line

Horizontal line drawn in the color selected for the text with the FC tag.
The HR tag accepts one optional numeric parameter that specifies the length of the line in pixels. If this parameter is negative, the line will be cut at the end by the given number of pixels.

In the Object Inspector (TagHRParams property) you can set two additional parameters:

LineHeight: integer;
Style: TPenStyle;

Example 1

The line drawn in the current color from the left to right edge of the component:

<HR>

Example 2

The line drawn from the position of 70 pixels to the right edge:

<T:70><HR>

Example 3

The line truncated from the left and the right by 120 pixels:

<T:120><HR:-120>

Example 4

A red line cut off by 256 pixels on the right:

<FC:clRed><HR:-256></FC>
OR
<FC:#FF0000><HR:-256></FC>
OR
<FC:rgb(255,0,0)><HR:-256></FC>


<H1>, <H2>, <H3> - Headers

All header parameters can be set in the Object Inspector. Properties: TagH1Params, TagH2Params and TagH3Params.
For each header, you can set the following properties:

Alignment: TAlignment; // center, left or right
BackgroundColor: TColor;
Font: TFont;
Transparent: Boolean; // default True

Example

<H1>Header 1</H1>
<H2>Header 2</H2>
<H3>Header 3</H3>


<LI>, <LI2> - List items (1st and 2nd level)

List parameters can be set in the Object Inspector using properties: TagLIParams and TagLI2Params. You can set here:

BulletType: TDHBulletType;
CustomString: string;
Margin: integer;
Spacing: Byte;

Bullet types:

Type Char
btBullet
btCircle
btDash -
btLongDash
btCustomString string specified in the
CustomString field

Margin - margin from the left edge of the control to the first character of the text.
Spacing - space (in pixels) from the bullet char to the text.

The LI and LI2 tags accept one parameter - a string used as the list bullet. If specified, the value set in the Object Inspector in the BulletType property will be ignored.

Example

<li>List item 1
<li>List item 2
<li>List item 3
<li:4.>List item 4 (forced bullet "4.")
<li:5.>List item 5 (forced bullet "5.")
<li2>Subitem 1
<li2>Subitem 2
<li2:*>Subitem 3 (forced bullet "*")


<LC> - Line color

Background line color drawn from the current position to the end of the current line.

Example

ABCD <LC:##87CEEB> 1234


<BBC> - Body background color

Body background color drawn from the beginning of the current line to the end of the document. You can use several BBC tags to draw rectangles in the document.

Example

<bbc:clGray>
<c><fc:rgb(255,255,255)>Gray background</fc></c>

<bbc:#EEE8AA>
<c>Yellow - PaleGoldenrod</c>

<bbc:#CD853F>
<c><fc:clWhite>Brown - Peru</fc></c>

<bbc:#4682B4>
<c><fc:clWhite>SteelBlue</fc></c>


<SUB> - Subscript

The text in the the SUB tag is displayed in a slightly smaller font and below the normal text. The size and position are calculated automatically, but you can change these automatically calculated values using TagSUBParams.FontSizeDelta and TagSUBParams.PosYDelta.

Example

<c><fs:11>Tourmaline - general formula</fs>
<fs:14><fn:Verdana>XY<sub>3</sub>Z<sub>6</sub>[(OH)<sub>4</sub>(BO<sub>3</sub>)<sub>3</sub>(Si<sub>6</sub>O<sub>18</sub>)]</fn></fs></c>


<SUP> - Superscript

The text in the the SUB tag is displayed in a slightly smaller font and above the normal text. The size and position are calculated automatically, but you can change these automatically calculated values using TagSUPParams.FontSizeDelta and TagSUPParams.PosYDelta.

Example

<c><fs:16>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></fs></c>


<IMG> - Images

The IMG tag accepts one parameter, which may be the file name or PNG image index from the image collection associated with the component.

Example

<fs:12>
<bbc:#DB8A8A>
<c>My beautiful logo

<img:D:\SomeDir\my_logo.png>
</c>
</fs>

If you want to use the PNG collection, drop the TDzPngCollection from the Component Palette on the form and associate your DzHTMLText component with this collection using property DzHTMLText.PngCollection. TDzPngCollection is a non-visual component which can store any number of PNG images. Unlike TImageList, each image can have a different size. Images are stored internally as PNG, not bitmaps, which reduces the size of the DFM file. Of course, assuming that PNG images are compressed.

Add some images to DzPngCollection using the Items property in the Object Inspector. You can also add images at runtime using methods: AddPngImage, AddPngImageFromFile.

To display image from the collection you can use, eg:

<img:0>

where 0 is the index of the PNG image in the DzPngCollection component.




Additional changes

Lazarus support

Tested on Lazarus 2.0.3 and FPC 3.3.1, on Windows 10 (32 & 64-bit) and Xubuntu 18.04 (32 & 64-bit).


Support for additional colors notations

In addition to the original component, which uses the Delphi color names (clWhite, clRed...) and hexadecimal BGR notation with the $00 prefix, you can also use HTML/CSS colors, eg.:

  • <lc:#FFAA88>
  • <fc:#00FF00>
  • <bc:#ABC> - short notation for #AABBCC

and RGB colors, eg::

  • <bbc:Rgb(50,100,150)>
  • <fc:RGB(255,128,128)>
  • <fc:rgb(128 64 32)> - spaces can also be separators
  • <fc:rgb(200)> - short notation for rgb(200,200,200)

HTML Entites

I changed the name of the ReplaceForcedChars function to ReplaceHtmlEntities and added support for the additional HTML entities. The original component only supported &lt; (<) and &gt; (>) entites.

A full list of supported HTML entities

HTML Entity Symbol
&lt; <
&gt; >
&euro;
&cent; ¢
&pound; £
&yen; ¥
&amp; &
&copy; ©
&reg; ®
&sect; §
&deg; °
&sup2; ²
&sup3; ³
&Integral;
&micro; µ
&para;
&middot; ·
&plusmn; ±
&times; ×
&divide; ÷
&plusmn; ±
&times; ×
&divide; ÷
&Omega; Ω
&alpha; α
&beta; β
&gamma; γ
&Gamma; Γ
&delta; δ
&Delta; Δ
&pi; π
&Pi; Π
&Sigma; Σ
&bull;
&ndash;
&trade;
&SmallCircle;

Example

<bbc:#555><fc:#DDD>
<fs:14><fn:Courier New>
&Delta; = b&sup2; &ndash; 4ac
E = mc&sup2;
P<sub>o</sub> = &Pi;r&sup2;
sin&sup2;&alpha; + cos&sup2;&alpha; = 1
</fn></fs></fc>


ExtraLineSpacing

Additional vertical space between lines in pixels. Property TDzHTMLText.ExtraLineSpacing.

Default line spacing:

<t:20>ExtraLineSpacing = 0
<t:20>ExtraLineSpacing = 0
<t:20>ExtraLineSpacing = 0
<t:20>ExtraLineSpacing = 0



ExtraLineSpacing = 6:

<t:20>ExtraLineSpacing = 6
<t:20>ExtraLineSpacing = 6
<t:20>ExtraLineSpacing = 6
<t:20>ExtraLineSpacing = 6


ExtraWordSpacing

Additional horizontal space between words in pixels. Property TDzHTMLText.ExtraWordSpacing.

<t:20>The default spacing between words
<t:20>The default spacing between words
<t:20>The default spacing between words
<t:20>The default spacing between words


<t:20>Extra word spacing = 4
<t:20>Extra word spacing = 4
<t:20>Extra word spacing = 4
<t:20>Extra word spacing = 4


Internal margins

Example

<bbc:$00E6C8DC>

Some text
Some text
<t:10>Some text (10)
<t:20>Some text (20)

DzHTMLText.Color := $00A06596;
DzHTMLText.InternalMargins.Left := 20;
DzHTMLText.InternalMargins.Right := 20;


DzHTMLText.Color := $00E6C8DC;
DzHTMLText.InternalMargins.Left := 20;
DzHTMLText.InternalMargins.Right := 20;


Border

You can set the component's boder using TDzHTMLText.Border property.

Warnig! Flickering when border width > 1. Place DzHTMLText on TPanel/TForm with DoubleBuffered set to True.


Vertical alignment

The displayed text can be positioned vertically, but only when the AutoHeight is set to False.


Loading and saving

You can save and load text with the SaveToFile and LoadFromFile methods.

To save the displayed text (which is actually an image) to the bitmap, use SaveToBitmap or SaveToBitmapFile methods.

TODO

  • Text: string --> Lines: TStrings.
  • Implement BeginUpdate, EndUpdate.
  • Padding.
  • TCustomDzHTMLText
  • Fix bugs!
You can’t perform that action at this time.