Difference between revisions of "LMD VCL - MiniHTML"

From LMD
Jump to: navigation, search
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{Head-StartRes}}
 
{{Head-StartRes}}
−
<h2>Supported subset of HTML tags</h2>
+
== Supported subset of HTML tags ==
−
<p>LMD Tools 2007 Mini HTML supports following subset of HTML tags:</p>
+
 
−
<table border=1>
+
LMD 2007 shared Runtime (or better) integrates Mini HTML for controls with HTML support. Following subset of HTML tags are available:
−
<tr><td>Tag</td><td>Syntax</td><td>Comments &amp; samples</td></tr>
+
 
−
<tr><td>Bold</td><td>&lt;b&gt;, &lt;/b&gt;</td><td><b>bold</b></td></tr>
+
{| border="1"
−
<tr><td>Italic</td><td>&lt;i&gt;, &lt;/i&gt;</td><td><i>italic</i></td></tr>
+
|-
−
<tr><td>Underline</td><td>&lt;u&gt;, &lt;/u&gt;</td><td><u>underline</u></td></tr>
+
| Tag
−
<tr><td>Strikeout</td><td>&lt;strikeout&gt;, &lt;/strikeout&gt; or &lt;s&gt;, &lt;/s&gt;</td><td><s>striked out</s></td></tr>
+
| Syntax
−
<tr><td>Paragraph</td><td>&lt;p [align="left|right|center"]&gt;</td><td>Use <i>align</i> parameter to specify the alignment of the text in the paragraph. Default value for align is "left".</td></tr>
+
| Comments &amp; samples
−
<tr><td>Subscript</td><td>&lt;sub&gt;, &lt;/sub&gt;</td><td>Subscript text is drawn with smaller font and with baseline moved down.</td></tr>
+
|-
−
<tr><td>Superscript</td><td>&lt;sup&gt;, &lt;/sup&gt;</td><td>Superscript text is drawn with smaller font and with baseline moved up.</td></tr>
+
| Bold
−
<tr><td>Unordered list of elements</td><td>&lt;ul&gt;&lt;li&gt;item&lt;/li&gt;...&lt;/ul&gt;</td>
+
| &lt;b&gt;, &lt;/b&gt;
−
<td>
+
| '''bold'''
−
<ul>
+
|-
−
<li>item 1</li>
+
| Italic
−
<li>item 2</li>
+
| &lt;i&gt;, &lt;/i&gt;
−
</ul>
+
| ''italic''
−
</td></tr>
+
|-
−
<tr><td>Ordered list of elements</td><td>&lt;ol&gt;&lt;li&gt;item&lt;/li&gt;...&lt;/ol&gt;</td>
+
| Underline
−
<td>
+
| &lt;u&gt;, &lt;/u&gt;
−
<ol>
+
| <u>underline</u>
−
<li>item 1</li>
+
|-
−
<li>item 2</li>
+
| Strikeout
−
</ol>
+
| &lt;strikeout&gt;, &lt;/strikeout&gt; or &lt;s&gt;, &lt;/s&gt;
−
</td></tr>
+
| <s>striked out</s>
−
<tr><td>Horizontal divider</td><td>&lt;hr [width="width"]&gt;</td><td>If no value for <i>width</i> attribute is specified, then it will take maximum available value.</td></tr>
+
|-
−
<tr><td>Line break</td><td>&lt;br&gt;</td><td>&nbsp;</td></tr>
+
| Paragraph
−
<tr><td>Font</td><td>&lt;font [name="fontname"] [size="x|+x|-x"] [color={"#rrggbb"|"color name"}] [bgcolor={"#rrggbb"|"color name"}]&gt;text&lt;/font&gt; </td>
+
| &lt;p [align="left&#124;right&#124;center"]&gt;
−
<td>You can specify the name of the font name, size (absolute size or increase, decrease of size)  
+
| Use ''align'' parameter to specify the alignment of the text in the paragraph. Default value for align is "left".
−
and font background color. Color must be a valid hexadecimal value in common HTML format, valid VCL color identifier  
+
|-
−
(clWhite, clBtnFace for example) or valid HTML color identifier (red, black, btnshadow for example. You can use <i>background</i> synonym for <i>bgcolor</i> attribute.  
+
| Subscript
−
<br><b>Note</b>: If <i>size</i> value is greater than 0 and less than 10 and there is no plus or minus sign, then it means standard font increase relative to default size. Example:<br>
+
| &lt;sub&gt;, &lt;/sub&gt;
−
<font face="Arial" size="2">&lt;font name="Arial" size=2&gt;</font><br>
+
| Subscript text is drawn with smaller font and with baseline moved down.
−
<font face="Arial" size="3">&lt;font name="Arial" size=3&gt;</font><br>
+
|-
−
<font face="Arial" size="4">&lt;font name="Arial" size=4&gt;</font><br>
+
| Superscript
−
</td></tr>
+
| &lt;sup&gt;, &lt;/sup&gt;
−
<tr><td>Hyperlink</td><td>&lt;a href="link"&gt;link text&lt;/a&gt;</td><td><i>Link</i> parameter value is passed to OnLinkClick event handler, present in some controls (not all controls support clicking on the URLs.</td></tr>
+
| Superscript text is drawn with smaller font and with baseline moved up.
−
<tr><td>Embedded image</td><td>&lt;img src="image" [width="w"] [height="h"]&gt;</td><td>The <i>src</i> parameter value is passed to the OnImageNeeded event handler. You can specify the width and height of the image rectangle if needed. By default the width and height are taken from the image you provide in event handler, but you can stretch image on drawing by specifying width and height explicitly.<br>
+
|-
 +
| Unordered list of elements
 +
| &lt;ul&gt;&lt;li&gt;item&lt;/li&gt;...&lt;/ul&gt;
 +
|
 +
* item 1
 +
* item 2
 +
 
 +
|-
 +
| Ordered list of elements
 +
| &lt;ol&gt;&lt;li&gt;item&lt;/li&gt;...&lt;/ol&gt;
 +
|
 +
# item 1
 +
# item 2
 +
 
 +
|-
 +
| Horizontal divider
 +
| &lt;hr [width="width"]&gt;
 +
| If no value for ''width'' attribute is specified, then it will take maximum available value.
 +
|-
 +
| Line break
 +
| &lt;br&gt;
 +
| &nbsp;
 +
|-
 +
| Font
 +
| &lt;font [name="fontname"] [size="x&#124;+x&#124;-x&#124;x px"] [color={"#rrggbb"&#124;"color name"}] [bgcolor={"#rrggbb"&#124;"color name"}]&gt;text&lt;/font&gt;
 +
| You can specify the name of the font name, size (absolute size or increase, decrease of size)  
 +
and font background color. Color must be a valid hexadecimal value in common HTML format, valid VCL color identifier (clWhite, clBtnFace for example) or valid HTML color identifier (red, black, btnshadow for example. You can use ''background'' synonym for ''bgcolor'' attribute. <br>'''Note''': If ''size'' value is greater than 0 and less than 10 and there is no plus or minus sign, then it means standard font increase relative to default size. Example:<br><font face="Arial" size="2">&lt;font name="Arial" size=2&gt;</font><br><font face="Arial" size="3">&lt;font name="Arial" size=3&gt;</font><br><font face="Arial" size="4">&lt;font name="Arial" size=4&gt;</font><br>In order to specify exact font size in pixels, use size="N px" form of the size attribute.
 +
 
 +
|-
 +
| Hyperlink
 +
| &lt;a href="link"&gt;link text&lt;/a&gt;
 +
| ''Link'' parameter value is passed to OnLinkClick event handler, present in some controls (not all controls support clicking on the URLs.
 +
|-
 +
| Embedded image
 +
| &lt;img src="image" [width="w"] [height="h"]&gt;
 +
| The ''src'' parameter value is passed to the OnImageNeeded event handler. You can specify the width and height of the image rectangle if needed. By default the width and height are taken from the image you provide in event handler, but you can stretch image on drawing by specifying width and height explicitly.<br>
 
The simplest OnImageNeeded event handlers:<br><br>
 
The simplest OnImageNeeded event handlers:<br><br>
−
<code>
+
<syntaxhighlight lang="delphi">
−
procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>
+
procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);
−
begin<br>
+
begin
−
&nbsp;&nbsp;Image.LoadFromFile(SourceName);<br>
+
    Image.LoadFromFile(SourceName);
−
end;<br>
+
end;
−
<br>
+
 
−
procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>
+
procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);
−
begin<br>
+
begin
−
&nbsp;&nbsp;ImageList1.GetBitmap(strtoint(SourceName), Image.Bitmap);<br>
+
    ImageList1.GetBitmap(strtoint(SourceName), Image.Bitmap);
−
end;<br>
+
end;
−
</code>
+
</syntaxhighlight>
−
</td><tr>
+
 
−
</table>
+
|-
 +
| Variables
 +
| &lt;~~myVariable&gt;
 +
| The ''aVarName'', ''aVarValue'' parameters are passed to the OnVariableNeeded event handler, which defines what value substitutes the tag<br>
 +
<br><br><syntaxhighlight lang="delphi">
 +
procedure TForm2.LMDHTMLLabel1VariableNeeded(Sender: TObject; const aVarName: TLMDString; var aVarValue: TLMDString);
 +
begin
 +
  aVarValue := '1111';
 +
end;</syntaxhighlight>
 +
|-
 +
| Embedded controls
 +
|&lt;control vclclass= width= height= name=&gt;
 +
|Allows embedding of any control into HTML text
 +
|}
  
 
<h2>Supported special symbols</h2>
 
<h2>Supported special symbols</h2>
  
 
<table border=1 align=center>
 
<table border=1 align=center>
−
<tr><td bgcolor=silver>&amp;Aacute </td><td>&Aacute;</td>      <td bgcolor=silver>&amp;cent </td><td>&cent;</td>      <td bgcolor=silver>&amp;Iacute </td><td>&Iacute;</td>    <td bgcolor=silver>&amp;oacute </td><td>&oacute;</td>  <td bgcolor=silver>&amp;sup1 </td><td>&sup1;</td></tr>
+
<tr><td bgcolor=silver>&amp;Aacute </td><td>&Aacute;</td>      <td bgcolor=silver>&amp;cent   </td><td>&cent;</td>      <td bgcolor=silver>&amp;Iacute   </td><td>&Iacute;</td>    <td bgcolor=silver>&amp;oacute   </td><td>&oacute;</td>  <td bgcolor=silver>&amp;sup1   </td><td>&sup1;</td></tr>
−
<tr><td bgcolor=silver>&amp;aacute </td><td>&aacute;</td>      <td bgcolor=silver>&amp;copy </td><td>&copy;</td>      <td bgcolor=silver>&amp;iacute </td><td>&iacute;</td>    <td bgcolor=silver>&amp;Ocirc </td><td>&Ocirc;</td>    <td bgcolor=silver>&amp;sup2 </td><td>&sup2;</td></tr>   
+
<tr><td bgcolor=silver>&amp;aacute </td><td>&aacute;</td>      <td bgcolor=silver>&amp;copy   </td><td>&copy;</td>      <td bgcolor=silver>&amp;iacute   </td><td>&iacute;</td>    <td bgcolor=silver>&amp;Ocirc   </td><td>&Ocirc;</td>    <td bgcolor=silver>&amp;sup2   </td><td>&sup2;</td></tr>   
−
<tr><td bgcolor=silver>&amp;Acirc </td><td>&Acirc;</td>        <td bgcolor=silver>&amp;curren </td><td>&curren;</td>      <td bgcolor=silver>&amp;Icirc </td><td>&Icirc;</td>      <td bgcolor=silver>&amp;ocirc </td><td>&ocirc;</td>    <td bgcolor=silver>&amp;sup3 </td><td>&sup3;</td></tr>
+
<tr><td bgcolor=silver>&amp;Acirc   </td><td>&Acirc;</td>        <td bgcolor=silver>&amp;curren </td><td>&curren;</td>      <td bgcolor=silver>&amp;Icirc   </td><td>&Icirc;</td>      <td bgcolor=silver>&amp;ocirc   </td><td>&ocirc;</td>    <td bgcolor=silver>&amp;sup3   </td><td>&sup3;</td></tr>
−
<tr><td bgcolor=silver>&amp;acirc </td><td>&acirc;</td>        <td bgcolor=silver>&amp;deg </td><td>&deg;</td>        <td bgcolor=silver>&amp;icirc </td><td>&icirc;</td>      <td bgcolor=silver>&amp;Ograve </td><td>&Ograve;</td>  <td bgcolor=silver>&amp;szlig </td><td>&szlig;</td></tr>   
+
<tr><td bgcolor=silver>&amp;acirc   </td><td>&acirc;</td>        <td bgcolor=silver>&amp;deg   </td><td>&deg;</td>        <td bgcolor=silver>&amp;icirc   </td><td>&icirc;</td>      <td bgcolor=silver>&amp;Ograve   </td><td>&Ograve;</td>  <td bgcolor=silver>&amp;szlig </td><td>&szlig;</td></tr>   
−
<tr><td bgcolor=silver>&amp;acute </td><td>&acute;</td>        <td bgcolor=silver>&amp;divide </td><td>&divide;</td>      <td bgcolor=silver>&amp;iexcl </td><td>&iexcl;</td>      <td bgcolor=silver>&amp;ograve </td><td>&ograve;</td>  <td bgcolor=silver>&amp;THORN </td><td>&THORN;</td></tr>   
+
<tr><td bgcolor=silver>&amp;acute   </td><td>&acute;</td>        <td bgcolor=silver>&amp;divide </td><td>&divide;</td>      <td bgcolor=silver>&amp;iexcl   </td><td>&iexcl;</td>      <td bgcolor=silver>&amp;ograve   </td><td>&ograve;</td>  <td bgcolor=silver>&amp;THORN </td><td>&THORN;</td></tr>   
−
<tr><td bgcolor=silver>&amp;AElig </td><td>&AElig;</td>        <td bgcolor=silver>&amp;Eacute </td><td>&Eacute;</td>      <td bgcolor=silver>&amp;Igrave </td><td>&Igrave;</td>    <td bgcolor=silver>&amp;ordf </td><td>&ordf;</td>    <td bgcolor=silver>&amp;times </td><td>&times;</td></tr>   
+
<tr><td bgcolor=silver>&amp;AElig   </td><td>&AElig;</td>        <td bgcolor=silver>&amp;Eacute </td><td>&Eacute;</td>      <td bgcolor=silver>&amp;Igrave </td><td>&Igrave;</td>    <td bgcolor=silver>&amp;ordf </td><td>&ordf;</td>    <td bgcolor=silver>&amp;times </td><td>&times;</td></tr>   
−
<tr><td bgcolor=silver>&amp;aelig </td><td>&aelig;</td>        <td bgcolor=silver>&amp;eacute </td><td>&eacute;</td>      <td bgcolor=silver>&amp;igrave </td><td>&igrave;</td>    <td bgcolor=silver>&amp;ordm </td><td>&ordm;</td>    <td bgcolor=silver>&amp;trade </td><td>&trade;</td></tr>   
+
<tr><td bgcolor=silver>&amp;aelig   </td><td>&aelig;</td>        <td bgcolor=silver>&amp;eacute </td><td>&eacute;</td>      <td bgcolor=silver>&amp;igrave </td><td>&igrave;</td>    <td bgcolor=silver>&amp;ordm </td><td>&ordm;</td>    <td bgcolor=silver>&amp;trade </td><td>&trade;</td></tr>   
−
<tr><td bgcolor=silver>&amp;Agrave </td><td>&Agrave;</td>      <td bgcolor=silver>&amp;Ecirc </td><td>&Ecirc;</td>      <td bgcolor=silver>&amp;iquest </td><td>&iquest;</td>    <td bgcolor=silver>&amp;Oslash </td><td>&Oslash;</td>  <td bgcolor=silver>&amp;Uacute</td><td>&Uacute;</td></tr>  
+
<tr><td bgcolor=silver>&amp;Agrave </td><td>&Agrave;</td>      <td bgcolor=silver>&amp;Ecirc </td><td>&Ecirc;</td>      <td bgcolor=silver>&amp;iquest </td><td>&iquest;</td>    <td bgcolor=silver>&amp;Oslash   </td><td>&Oslash;</td>  <td bgcolor=silver>&amp;Uacute</td><td>&Uacute;</td></tr>  
−
<tr><td bgcolor=silver>&amp;agrave </td><td>&agrave;</td>      <td bgcolor=silver>&amp;ecirc </td><td>&ecirc;</td>      <td bgcolor=silver>&amp;Iuml </td><td>&Iuml;</td>      <td bgcolor=silver>&amp;oslash </td><td>&oslash;</td>  <td bgcolor=silver>&amp;uacute</td><td>&uacute;</td></tr>  
+
<tr><td bgcolor=silver>&amp;agrave </td><td>&agrave;</td>      <td bgcolor=silver>&amp;ecirc </td><td>&ecirc;</td>      <td bgcolor=silver>&amp;Iuml   </td><td>&Iuml;</td>      <td bgcolor=silver>&amp;oslash   </td><td>&oslash;</td>  <td bgcolor=silver>&amp;uacute</td><td>&uacute;</td></tr>  
−
<tr><td bgcolor=silver>&amp;amp </td><td>&amp;</td>          <td bgcolor=silver>&amp;Egrave </td><td>&Egrave;</td>    <td bgcolor=silver>&amp;iuml </td><td>&iuml;</td>      <td bgcolor=silver>&amp;Otilde </td><td>&Otilde;</td>  <td bgcolor=silver>&amp;Ucirc </td><td>&Ucirc;</td></tr>   
+
<tr><td bgcolor=silver>&amp;amp     </td><td>&amp;</td>          <td bgcolor=silver>&amp;Egrave </td><td>&Egrave;</td>    <td bgcolor=silver>&amp;iuml </td><td>&iuml;</td>      <td bgcolor=silver>&amp;Otilde   </td><td>&Otilde;</td>  <td bgcolor=silver>&amp;Ucirc </td><td>&Ucirc;</td></tr>   
−
<tr><td bgcolor=silver>&amp;Aring </td><td>&Aring;</td>        <td bgcolor=silver>&amp;egrave </td><td>&egrave;</td>      <td bgcolor=silver>&amp;laquo </td><td>&laquo;</td>      <td bgcolor=silver>&amp;otilde </td><td>&otilde;</td>  <td bgcolor=silver>&amp;Ugrave</td><td>&Ugrave;</td></tr>  
+
<tr><td bgcolor=silver>&amp;Aring   </td><td>&Aring;</td>        <td bgcolor=silver>&amp;egrave </td><td>&egrave;</td>      <td bgcolor=silver>&amp;laquo   </td><td>&laquo;</td>      <td bgcolor=silver>&amp;otilde   </td><td>&otilde;</td>  <td bgcolor=silver>&amp;Ugrave</td><td>&Ugrave;</td></tr>  
−
<tr><td bgcolor=silver>&amp;aring </td><td>&aring;</td>        <td bgcolor=silver>&amp;ETH </td><td>&ETH;</td>        <td bgcolor=silver>&amp;lt </td><td>&lt;</td>        <td bgcolor=silver>&amp;Ouml </td><td>&Ouml;</td>    <td bgcolor=silver>&amp;ugrave</td><td>&ugrave;</td></tr>  
+
<tr><td bgcolor=silver>&amp;aring   </td><td>&aring;</td>        <td bgcolor=silver>&amp;ETH   </td><td>&ETH;</td>        <td bgcolor=silver>&amp;lt       </td><td>&lt;</td>        <td bgcolor=silver>&amp;Ouml </td><td>&Ouml;</td>    <td bgcolor=silver>&amp;ugrave</td><td>&ugrave;</td></tr>  
−
<tr><td bgcolor=silver>&amp;Atilde </td><td>&Atilde;</td>      <td bgcolor=silver>&amp;eth </td><td>&eth;</td>        <td bgcolor=silver>&amp;macr </td><td>&macr;</td>      <td bgcolor=silver>&amp;ouml </td><td>&ouml;</td>    <td bgcolor=silver>&amp;uml </td><td>&uml;</td></tr>     
+
<tr><td bgcolor=silver>&amp;Atilde </td><td>&Atilde;</td>      <td bgcolor=silver>&amp;eth   </td><td>&eth;</td>        <td bgcolor=silver>&amp;macr </td><td>&macr;</td>      <td bgcolor=silver>&amp;ouml </td><td>&ouml;</td>    <td bgcolor=silver>&amp;uml   </td><td>&uml;</td></tr>     
−
<tr><td bgcolor=silver>&amp;atilde </td><td>&atilde;</td>      <td bgcolor=silver>&amp;Euml </td><td>&Euml;</td>      <td bgcolor=silver>&amp;micro </td><td>&micro;</td>      <td bgcolor=silver>&amp;para </td><td>&para;</td>    <td bgcolor=silver>&amp;Uuml </td><td>&Uuml;</td></tr>   
+
<tr><td bgcolor=silver>&amp;atilde </td><td>&atilde;</td>      <td bgcolor=silver>&amp;Euml   </td><td>&Euml;</td>      <td bgcolor=silver>&amp;micro   </td><td>&micro;</td>      <td bgcolor=silver>&amp;para </td><td>&para;</td>    <td bgcolor=silver>&amp;Uuml   </td><td>&Uuml;</td></tr>   
−
<tr><td bgcolor=silver>&amp;Auml </td><td>&Auml;</td>        <td bgcolor=silver>&amp;euml </td><td>&euml;</td>      <td bgcolor=silver>&amp;middot </td><td>&middot;</td>    <td bgcolor=silver>&amp;plusmn </td><td>&plusmn;</td>  <td bgcolor=silver>&amp;Yacute</td><td>&Yacute;</td></tr>  
+
<tr><td bgcolor=silver>&amp;Auml   </td><td>&Auml;</td>        <td bgcolor=silver>&amp;euml   </td><td>&euml;</td>      <td bgcolor=silver>&amp;middot   </td><td>&middot;</td>    <td bgcolor=silver>&amp;plusmn   </td><td>&plusmn;</td>  <td bgcolor=silver>&amp;Yacute</td><td>&Yacute;</td></tr>  
−
<tr><td bgcolor=silver>&amp;auml </td><td>&auml;</td>        <td bgcolor=silver>&amp;euro </td><td>&euro;</td>      <td bgcolor=silver>&amp;nbsp </td><td>&nbsp;</td>      <td bgcolor=silver>&amp;pound </td><td>&pound;</td>    <td bgcolor=silver>&amp;yen </td><td>&yen;</td></tr>     
+
<tr><td bgcolor=silver>&amp;auml   </td><td>&auml;</td>        <td bgcolor=silver>&amp;euro   </td><td>&euro;</td>      <td bgcolor=silver>&amp;nbsp </td><td>&nbsp;</td>      <td bgcolor=silver>&amp;pound   </td><td>&pound;</td>    <td bgcolor=silver>&amp;yen   </td><td>&yen;</td></tr>     
−
<tr><td bgcolor=silver>&amp;brvbar </td><td>&brvbar;</td>      <td bgcolor=silver>&amp;frac12 </td><td>&frac12;</td>    <td bgcolor=silver>&amp;not </td><td>&not;</td>        <td bgcolor=silver>&amp;quot </td><td>&quot;</td>    <td>&nbsp;</td><td>&nbsp;</td></tr>
+
<tr><td bgcolor=silver>&amp;brvbar </td><td>&brvbar;</td>      <td bgcolor=silver>&amp;frac12 </td><td>&frac12;</td>    <td bgcolor=silver>&amp;not     </td><td>&not;</td>        <td bgcolor=silver>&amp;quot </td><td>&quot;</td>    <td>&nbsp;</td><td>&nbsp;</td></tr>
−
<tr><td bgcolor=silver>&amp;Ccedil </td><td>&Ccedil;</td>      <td bgcolor=silver>&amp;frac14 </td><td>&frac14;</td>    <td bgcolor=silver>&amp;Ntilde </td><td>&Ntilde;</td>    <td bgcolor=silver>&amp;raquo </td><td>&raquo;</td>    <td>&nbsp;</td><td>&nbsp;</td></tr>
+
<tr><td bgcolor=silver>&amp;Ccedil </td><td>&Ccedil;</td>      <td bgcolor=silver>&amp;frac14 </td><td>&frac14;</td>    <td bgcolor=silver>&amp;Ntilde   </td><td>&Ntilde;</td>    <td bgcolor=silver>&amp;raquo   </td><td>&raquo;</td>    <td>&nbsp;</td><td>&nbsp;</td></tr>
−
<tr><td bgcolor=silver>&amp;ccedil </td><td>&ccedil;</td>      <td bgcolor=silver>&amp;frac34 </td><td>&frac34;</td>    <td bgcolor=silver>&amp;ntilde </td><td>&ntilde;</td>    <td bgcolor=silver>&amp;reg </td><td>&reg;</td>      <td>&nbsp;</td><td>&nbsp;</td></tr>
+
<tr><td bgcolor=silver>&amp;ccedil </td><td>&ccedil;</td>      <td bgcolor=silver>&amp;frac34 </td><td>&frac34;</td>    <td bgcolor=silver>&amp;ntilde   </td><td>&ntilde;</td>    <td bgcolor=silver>&amp;reg     </td><td>&reg;</td>      <td>&nbsp;</td><td>&nbsp;</td></tr>
−
<tr><td bgcolor=silver>&amp;cedil </td><td>&cedil;</td>        <td bgcolor=silver>&amp;gt </td><td>&gt;</td>        <td bgcolor=silver>&amp;Oacute </td><td>&Oacute;</td>    <td bgcolor=silver>&amp;sect </td><td>&sect;</td>    <td>&nbsp;</td><td>&nbsp;</td></tr>
+
<tr><td bgcolor=silver>&amp;cedil   </td><td>&cedil;</td>        <td bgcolor=silver>&amp;gt </td><td>&gt;</td>        <td bgcolor=silver>&amp;Oacute   </td><td>&Oacute;</td>    <td bgcolor=silver>&amp;sect </td><td>&sect;</td>    <td>&nbsp;</td><td>&nbsp;</td></tr>
 
</table>
 
</table>

Latest revision as of 13:27, 18 August 2017

<< Back to Getting started or Product Resources page

[edit]

Supported subset of HTML tags

LMD 2007 shared Runtime (or better) integrates Mini HTML for controls with HTML support. Following subset of HTML tags are available:

Tag Syntax Comments & samples
Bold <b>, </b> bold
Italic <i>, </i> italic
Underline <u>, </u> underline
Strikeout <strikeout>, </strikeout> or <s>, </s> striked out
Paragraph <p [align="left|right|center"]> Use align parameter to specify the alignment of the text in the paragraph. Default value for align is "left".
Subscript <sub>, </sub> Subscript text is drawn with smaller font and with baseline moved down.
Superscript <sup>, </sup> Superscript text is drawn with smaller font and with baseline moved up.
Unordered list of elements <ul><li>item</li>...</ul>
  • item 1
  • item 2
Ordered list of elements <ol><li>item</li>...</ol>
  1. item 1
  2. item 2
Horizontal divider <hr [width="width"]> If no value for width attribute is specified, then it will take maximum available value.
Line break <br>  
Font <font [name="fontname"] [size="x|+x|-x|x px"] [color={"#rrggbb"|"color name"}] [bgcolor={"#rrggbb"|"color name"}]>text</font> You can specify the name of the font name, size (absolute size or increase, decrease of size)

and font background color. Color must be a valid hexadecimal value in common HTML format, valid VCL color identifier (clWhite, clBtnFace for example) or valid HTML color identifier (red, black, btnshadow for example. You can use background synonym for bgcolor attribute.
Note: If size value is greater than 0 and less than 10 and there is no plus or minus sign, then it means standard font increase relative to default size. Example:
<font name="Arial" size=2>
<font name="Arial" size=3>
<font name="Arial" size=4>
In order to specify exact font size in pixels, use size="N px" form of the size attribute.

Hyperlink <a href="link">link text</a> Link parameter value is passed to OnLinkClick event handler, present in some controls (not all controls support clicking on the URLs.
Embedded image <img src="image" [width="w"] [height="h"]> The src parameter value is passed to the OnImageNeeded event handler. You can specify the width and height of the image rectangle if needed. By default the width and height are taken from the image you provide in event handler, but you can stretch image on drawing by specifying width and height explicitly.

The simplest OnImageNeeded event handlers:

procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);
begin
    Image.LoadFromFile(SourceName);
end;

procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);
begin
    ImageList1.GetBitmap(strtoint(SourceName), Image.Bitmap);
end;
Variables <~~myVariable> The aVarName, aVarValue parameters are passed to the OnVariableNeeded event handler, which defines what value substitutes the tag


procedure TForm2.LMDHTMLLabel1VariableNeeded(Sender: TObject; const aVarName: TLMDString; var aVarValue: TLMDString);
begin
  aVarValue := '1111';
end;
Embedded controls <control vclclass= width= height= name=> Allows embedding of any control into HTML text

Supported special symbols

&Aacute Á &cent ¢ &Iacute Í &oacute ó &sup1 ¹
&aacute á &copy © &iacute í &Ocirc Ô &sup2 ²
&Acirc  &curren ¤ &Icirc Î &ocirc ô &sup3 ³
&acirc â &deg ° &icirc î &Ograve Ò &szlig ß
&acute ´ &divide ÷ &iexcl ¡ &ograve ò &THORN Þ
&AElig Æ &Eacute É &Igrave Ì &ordf ª &times ×
&aelig æ &eacute é &igrave ì &ordm º &trade ™
&Agrave À &Ecirc Ê &iquest ¿ &Oslash Ø &UacuteÚ
&agrave à &ecirc ê &Iuml Ï &oslash ø &uacuteú
&amp & &Egrave È &iuml ï &Otilde Õ &Ucirc Û
&Aring Å &egrave è &laquo « &otilde õ &UgraveÙ
&aring å &ETH Ð &lt < &Ouml Ö &ugraveù
&Atilde à &eth ð &macr ¯ &ouml ö &uml ¨
&atilde ã &Euml Ë &micro µ &para &Uuml Ü
&Auml Ä &euml ë &middot · &plusmn ± &YacuteÝ
&auml ä &euro € &nbsp   &pound £ &yen ¥
&brvbar ¦ &frac12 ½ &not ¬ &quot "   
&Ccedil Ç &frac14 ¼ &Ntilde Ñ &raquo »   
&ccedil ç &frac34 ¾ &ntilde ñ &reg ®   
&cedil ¸ &gt > &Oacute Ó &sect §   
Retrieved from "https://wiki.lmd.de/index.php?title=LMD_VCL_-_MiniHTML&oldid=3842"