Difference between revisions of "LMD NG - MiniHTML"
From LMD
| Line 82: | Line 82: | ||
| 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 ''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> | ||
| − | < | + | <syntaxhighlight lang="delphi"> |
| − | procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>begin<br> Image.LoadFromFile(SourceName);<br>end;<br><br>procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>begin<br> ImageList1.GetBitmap(strtoint(SourceName), Image.Bitmap);<br>end;<br></ | + | procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>begin<br> Image.LoadFromFile(SourceName);<br>end;<br><br>procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>begin<br> ImageList1.GetBitmap(strtoint(SourceName), Image.Bitmap);<br>end;<br></syntaxhighlight> |
Additional can be defined by using index/file/res identifier in image name: | Additional can be defined by using index/file/res identifier in image name: | ||
* connected imagelist. Use syntax: <code><img src="index:0"></code> | * connected imagelist. Use syntax: <code><img src="index:0"></code> | ||
| Line 93: | Line 93: | ||
| <~~myVariable> | | <~~myVariable> | ||
| The ''aVarName'', ''aVarValue'' parameters are passed to the OnVariableNeeded event handler, which defines what value substitutes the tag<br> | | The ''aVarName'', ''aVarValue'' parameters are passed to the OnVariableNeeded event handler, which defines what value substitutes the tag<br> | ||
| − | < | + | <syntaxhighlight lang="delphi"> |
procedure TForm2.LMDHTMLLabel1VariableNeeded(Sender: TObject; const aVarName: TLMDString; var aVarValue: TLMDString); | procedure TForm2.LMDHTMLLabel1VariableNeeded(Sender: TObject; const aVarName: TLMDString; var aVarValue: TLMDString); | ||
begin | begin | ||
aVarValue := '1111'; | aVarValue := '1111'; | ||
end; | end; | ||
| − | </ | + | </syntaxhighlight> |
|- | |- | ||
| Embedded controls | | Embedded controls | ||
| Line 111: | Line 111: | ||
<table border=1 align=center> | <table border=1 align=center> | ||
| − | <tr><td bgcolor=silver>&Aacute </td><td>Á</td> <td bgcolor=silver>&cent </td><td>¢</td> <td bgcolor=silver>&Iacute </td><td>Í</td> <td bgcolor=silver>&oacute </td><td>ó</td> <td bgcolor=silver>&sup1 </td><td>¹</td></tr> | + | <tr><td bgcolor=silver>&Aacute </td><td>Á</td> <td bgcolor=silver>&cent </td><td>¢</td> <td bgcolor=silver>&Iacute </td><td>Í</td> <td bgcolor=silver>&oacute </td><td>ó</td> <td bgcolor=silver>&sup1 </td><td>¹</td></tr> |
| − | <tr><td bgcolor=silver>&aacute </td><td>á</td> <td bgcolor=silver>&copy </td><td>©</td> <td bgcolor=silver>&iacute </td><td>í</td> <td bgcolor=silver>&Ocirc </td><td>Ô</td> <td bgcolor=silver>&sup2 </td><td>²</td></tr> | + | <tr><td bgcolor=silver>&aacute </td><td>á</td> <td bgcolor=silver>&copy </td><td>©</td> <td bgcolor=silver>&iacute </td><td>í</td> <td bgcolor=silver>&Ocirc </td><td>Ô</td> <td bgcolor=silver>&sup2 </td><td>²</td></tr> |
| − | <tr><td bgcolor=silver>&Acirc </td><td>Â</td> <td bgcolor=silver>&curren </td><td>¤</td> <td bgcolor=silver>&Icirc </td><td>Î</td> <td bgcolor=silver>&ocirc </td><td>ô</td> <td bgcolor=silver>&sup3 </td><td>³</td></tr> | + | <tr><td bgcolor=silver>&Acirc </td><td>Â</td> <td bgcolor=silver>&curren </td><td>¤</td> <td bgcolor=silver>&Icirc </td><td>Î</td> <td bgcolor=silver>&ocirc </td><td>ô</td> <td bgcolor=silver>&sup3 </td><td>³</td></tr> |
| − | <tr><td bgcolor=silver>&acirc </td><td>â</td> <td bgcolor=silver>&deg </td><td>°</td> <td bgcolor=silver>&icirc </td><td>î</td> <td bgcolor=silver>&Ograve </td><td>Ò</td> <td bgcolor=silver>&szlig </td><td>ß</td></tr> | + | <tr><td bgcolor=silver>&acirc </td><td>â</td> <td bgcolor=silver>&deg </td><td>°</td> <td bgcolor=silver>&icirc </td><td>î</td> <td bgcolor=silver>&Ograve </td><td>Ò</td> <td bgcolor=silver>&szlig </td><td>ß</td></tr> |
| − | <tr><td bgcolor=silver>&acute </td><td>´</td> <td bgcolor=silver>&divide </td><td>÷</td> <td bgcolor=silver>&iexcl </td><td>¡</td> <td bgcolor=silver>&ograve </td><td>ò</td> <td bgcolor=silver>&THORN </td><td>Þ</td></tr> | + | <tr><td bgcolor=silver>&acute </td><td>´</td> <td bgcolor=silver>&divide </td><td>÷</td> <td bgcolor=silver>&iexcl </td><td>¡</td> <td bgcolor=silver>&ograve </td><td>ò</td> <td bgcolor=silver>&THORN </td><td>Þ</td></tr> |
| − | <tr><td bgcolor=silver>&AElig </td><td>Æ</td> <td bgcolor=silver>&Eacute </td><td>É</td> <td bgcolor=silver>&Igrave </td><td>Ì</td> <td bgcolor=silver>&ordf </td><td>ª</td> <td bgcolor=silver>&times </td><td>×</td></tr> | + | <tr><td bgcolor=silver>&AElig </td><td>Æ</td> <td bgcolor=silver>&Eacute </td><td>É</td> <td bgcolor=silver>&Igrave </td><td>Ì</td> <td bgcolor=silver>&ordf </td><td>ª</td> <td bgcolor=silver>&times </td><td>×</td></tr> |
| − | <tr><td bgcolor=silver>&aelig </td><td>æ</td> <td bgcolor=silver>&eacute </td><td>é</td> <td bgcolor=silver>&igrave </td><td>ì</td> <td bgcolor=silver>&ordm </td><td>º</td> <td bgcolor=silver>&trade </td><td>™</td></tr> | + | <tr><td bgcolor=silver>&aelig </td><td>æ</td> <td bgcolor=silver>&eacute </td><td>é</td> <td bgcolor=silver>&igrave </td><td>ì</td> <td bgcolor=silver>&ordm </td><td>º</td> <td bgcolor=silver>&trade </td><td>™</td></tr> |
| − | <tr><td bgcolor=silver>&Agrave </td><td>À</td> <td bgcolor=silver>&Ecirc </td><td>Ê</td> <td bgcolor=silver>&iquest </td><td>¿</td> <td bgcolor=silver>&Oslash </td><td>Ø</td> <td bgcolor=silver>&Uacute</td><td>Ú</td></tr> | + | <tr><td bgcolor=silver>&Agrave </td><td>À</td> <td bgcolor=silver>&Ecirc </td><td>Ê</td> <td bgcolor=silver>&iquest </td><td>¿</td> <td bgcolor=silver>&Oslash </td><td>Ø</td> <td bgcolor=silver>&Uacute</td><td>Ú</td></tr> |
| − | <tr><td bgcolor=silver>&agrave </td><td>à</td> <td bgcolor=silver>&ecirc </td><td>ê</td> <td bgcolor=silver>&Iuml </td><td>Ï</td> <td bgcolor=silver>&oslash </td><td>ø</td> <td bgcolor=silver>&uacute</td><td>ú</td></tr> | + | <tr><td bgcolor=silver>&agrave </td><td>à</td> <td bgcolor=silver>&ecirc </td><td>ê</td> <td bgcolor=silver>&Iuml </td><td>Ï</td> <td bgcolor=silver>&oslash </td><td>ø</td> <td bgcolor=silver>&uacute</td><td>ú</td></tr> |
| − | <tr><td bgcolor=silver>&amp | + | <tr><td bgcolor=silver>&amp </td><td>&</td> <td bgcolor=silver>&Egrave </td><td>È</td> <td bgcolor=silver>&iuml </td><td>ï</td> <td bgcolor=silver>&Otilde </td><td>Õ</td> <td bgcolor=silver>&Ucirc </td><td>Û</td></tr> |
| − | <tr><td bgcolor=silver>&Aring </td><td>Å</td> <td bgcolor=silver>&egrave </td><td>è</td> <td bgcolor=silver>&laquo </td><td>«</td> <td bgcolor=silver>&otilde </td><td>õ</td> <td bgcolor=silver>&Ugrave</td><td>Ù</td></tr> | + | <tr><td bgcolor=silver>&Aring </td><td>Å</td> <td bgcolor=silver>&egrave </td><td>è</td> <td bgcolor=silver>&laquo </td><td>«</td> <td bgcolor=silver>&otilde </td><td>õ</td> <td bgcolor=silver>&Ugrave</td><td>Ù</td></tr> |
| − | <tr><td bgcolor=silver>&aring </td><td>å</td> <td bgcolor=silver>&ETH </td><td>Ð</td> <td bgcolor=silver>&lt | + | <tr><td bgcolor=silver>&aring </td><td>å</td> <td bgcolor=silver>&ETH </td><td>Ð</td> <td bgcolor=silver>&lt </td><td><</td> <td bgcolor=silver>&Ouml </td><td>Ö</td> <td bgcolor=silver>&ugrave</td><td>ù</td></tr> |
| − | <tr><td bgcolor=silver>&Atilde </td><td>Ã</td> <td bgcolor=silver>&eth </td><td>ð</td> <td bgcolor=silver>&macr </td><td>¯</td> <td bgcolor=silver>&ouml </td><td>ö</td> <td bgcolor=silver>&uml </td><td>¨</td></tr> | + | <tr><td bgcolor=silver>&Atilde </td><td>Ã</td> <td bgcolor=silver>&eth </td><td>ð</td> <td bgcolor=silver>&macr </td><td>¯</td> <td bgcolor=silver>&ouml </td><td>ö</td> <td bgcolor=silver>&uml </td><td>¨</td></tr> |
| − | <tr><td bgcolor=silver>&atilde </td><td>ã</td> <td bgcolor=silver>&Euml </td><td>Ë</td> <td bgcolor=silver>&micro </td><td>µ</td> <td bgcolor=silver>&para </td><td>¶</td> <td bgcolor=silver>&Uuml </td><td>Ü</td></tr> | + | <tr><td bgcolor=silver>&atilde </td><td>ã</td> <td bgcolor=silver>&Euml </td><td>Ë</td> <td bgcolor=silver>&micro </td><td>µ</td> <td bgcolor=silver>&para </td><td>¶</td> <td bgcolor=silver>&Uuml </td><td>Ü</td></tr> |
| − | <tr><td bgcolor=silver>&Auml </td><td>Ä</td> <td bgcolor=silver>&euml </td><td>ë</td> <td bgcolor=silver>&middot </td><td>·</td> <td bgcolor=silver>&plusmn </td><td>±</td> <td bgcolor=silver>&Yacute</td><td>Ý</td></tr> | + | <tr><td bgcolor=silver>&Auml </td><td>Ä</td> <td bgcolor=silver>&euml </td><td>ë</td> <td bgcolor=silver>&middot </td><td>·</td> <td bgcolor=silver>&plusmn </td><td>±</td> <td bgcolor=silver>&Yacute</td><td>Ý</td></tr> |
| − | <tr><td bgcolor=silver>&auml </td><td>ä</td> <td bgcolor=silver>&euro </td><td>€</td> <td bgcolor=silver>&nbsp </td><td> </td> <td bgcolor=silver>&pound </td><td>£</td> <td bgcolor=silver>&yen </td><td>¥</td></tr> | + | <tr><td bgcolor=silver>&auml </td><td>ä</td> <td bgcolor=silver>&euro </td><td>€</td> <td bgcolor=silver>&nbsp </td><td> </td> <td bgcolor=silver>&pound </td><td>£</td> <td bgcolor=silver>&yen </td><td>¥</td></tr> |
| − | <tr><td bgcolor=silver>&brvbar </td><td>¦</td> <td bgcolor=silver>&frac12 </td><td>½</td> <td bgcolor=silver>&not | + | <tr><td bgcolor=silver>&brvbar </td><td>¦</td> <td bgcolor=silver>&frac12 </td><td>½</td> <td bgcolor=silver>&not </td><td>¬</td> <td bgcolor=silver>&quot </td><td>"</td> <td> </td><td> </td></tr> |
| − | <tr><td bgcolor=silver>&Ccedil </td><td>Ç</td> <td bgcolor=silver>&frac14 </td><td>¼</td> <td bgcolor=silver>&Ntilde </td><td>Ñ</td> <td bgcolor=silver>&raquo </td><td>»</td> <td> </td><td> </td></tr> | + | <tr><td bgcolor=silver>&Ccedil </td><td>Ç</td> <td bgcolor=silver>&frac14 </td><td>¼</td> <td bgcolor=silver>&Ntilde </td><td>Ñ</td> <td bgcolor=silver>&raquo </td><td>»</td> <td> </td><td> </td></tr> |
| − | <tr><td bgcolor=silver>&ccedil </td><td>ç</td> <td bgcolor=silver>&frac34 </td><td>¾</td> <td bgcolor=silver>&ntilde </td><td>ñ</td> <td bgcolor=silver>&reg | + | <tr><td bgcolor=silver>&ccedil </td><td>ç</td> <td bgcolor=silver>&frac34 </td><td>¾</td> <td bgcolor=silver>&ntilde </td><td>ñ</td> <td bgcolor=silver>&reg </td><td>®</td> <td> </td><td> </td></tr> |
| − | <tr><td bgcolor=silver>&cedil </td><td>¸</td> <td bgcolor=silver>&gt </td><td>></td> <td bgcolor=silver>&Oacute </td><td>Ó</td> <td bgcolor=silver>&sect </td><td>§</td> <td> </td><td> </td></tr> | + | <tr><td bgcolor=silver>&cedil </td><td>¸</td> <td bgcolor=silver>&gt </td><td>></td> <td bgcolor=silver>&Oacute </td><td>Ó</td> <td bgcolor=silver>&sect </td><td>§</td> <td> </td><td> </td></tr> |
</table> | </table> | ||
{{Top}} | {{Top}} | ||
Revision as of 13:49, 18 August 2017
<< Back to Getting started or Product Resources page
Supported subset of HTML tags
NG HTMLPack and certain controls of other NG Packs (e.g. DialogPack) integrate a Mini HTML engine which supports a subset of HTML tags. Following HTML tags can be used:
| Tag | Syntax | Comments & samples |
|---|---|---|
| Body | <body bgcolor="clInfoBk" bgcolorto="clWhite" dir="v">
|
Use body tag to set background color or gradient |
| Bold | <b>, </b>
|
bold |
| Indetation | <ind width="Width" [pos=abs]>
|
Use this tag to make indentation with absolute or relative position. Sample:<ind width=100 pos=abs>a1<ind width=150 pos=abs>a2<ind width=200 pos=abs>a3
|
| Italic | <i>, </i>
|
italic |
| Underline | <u>, </u>
|
underline |
| Strikeout | <strikeout>, </strikeout> or <s>, </s> | |
| 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> |
|
| Ordered list of elements | <ol><li>item</li>...</ol> |
|
| 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. |
| 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);<br>begin<br> Image.LoadFromFile(SourceName);<br>end;<br><br>procedure TForm1.LMDHTMLLabel1ImageNeeded(Sender: TObject; SourceName: TLMDString; var Image: TPicture);<br>begin<br> ImageList1.GetBitmap(strtoint(SourceName), Image.Bitmap);<br>end;<br>
Additional can be defined by using index/file/res identifier in image name:
|
| 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. Almost all public/published properties can be set via parameters. Example: <control vclclass="TEdit" width ="200" height="14" name="" text="edit control">
|
Color Names
Special symbols
| Á | Á | ¢ | ¢ | Í | Í | ó | ó | ¹ | ¹ |
| á | á | © | © | í | í | Ô | Ô | ² | ² |
| Â | Â | ¤ | ¤ | Î | Î | ô | ô | ³ | ³ |
| â | â | ° | ° | î | î | Ò | Ò | ß | ß |
| ´ | ´ | ÷ | ÷ | ¡ | ¡ | ò | ò | Þ | Þ |
| Æ | Æ | É | É | Ì | Ì | ª | ª | × | × |
| æ | æ | é | é | ì | ì | º | º | &trade | ™ |
| À | À | Ê | Ê | ¿ | ¿ | Ø | Ø | Ú | Ú |
| à | à | ê | ê | Ï | Ï | ø | ø | ú | ú |
| & | & | È | È | ï | ï | Õ | Õ | Û | Û |
| Å | Å | è | è | « | « | õ | õ | Ù | Ù |
| å | å | Ð | Ð | < | < | Ö | Ö | ù | ù |
| Ã | Ã | ð | ð | ¯ | ¯ | ö | ö | ¨ | ¨ |
| ã | ã | Ë | Ë | µ | µ | ¶ | ¶ | Ü | Ü |
| Ä | Ä | ë | ë | · | · | ± | ± | Ý | Ý |
| ä | ä | &euro | € |   | £ | £ | ¥ | ¥ | |
| ¦ | ¦ | ½ | ½ | ¬ | ¬ | " | " | ||
| Ç | Ç | ¼ | ¼ | Ñ | Ñ | » | » | ||
| ç | ç | ¾ | ¾ | ñ | ñ | ® | ® | ||
| ¸ | ¸ | > | > | Ó | Ó | § | § |
