Home Components HTML CSS Demo Download Help Reports Editor Gallery Order Contacts

HTML Component Library

HTML Component Library is a cross-patform and 100% native HTML rendering library for Delphi that brings all the power of HTML/CSS into desktop and mobile Delphi applications.

Unlike other ęHTML-likeĽ libraries it is based on powerful HTML/CSS rendering core with full support of HTML 4.1 and CSS 3 (some of HTML 5 tags are also supported). Tables, shadows, transitions, animations, SVG images, tranforms and much more.

No DLLís, no ActiveX, no third party libraries dependencies, only pure native Delphi code.

Compatibility

Library supports all Delphi versions from ancient Delphi 5 to Delphi 10.1 Berlin. For Delphi XE4 - Delphi 10.1 Berlin all FMX platforms are supported - Win32/64, OSX, Android and iOS.

Unicode (including Right-to-Left) is supported even for non-unicode Delphi 5 - 2007 using widestrings and TNT Unicode library.

Updates for new Delphi versions are released in one week (max) after Delphi release.

Parts

Library core contains:

HTML rendering class is separated from drawing class so you can choose between available drawing classes or write your own. Currently library contains GDI and GDI+ canvases for VCL, FMX canvas for FMX Win32/64, iOS, Android and OSX and also native Android canvas. 

Performance

Library core was hardly optimized and is extremely fast. Parsing speed is about 100Mb/s so parsing of typical 100Kb document takes only 1ms. Style and layout calculations takes additional 20ms for 100Kb document.

Using of native canvas on Android provides smooth scrolling and zoom similar to native Android applications (much better than FMX controls) and correct text rendering with full RTL support, kerning pairs and baseline alignment.

How to use

Drop THtPanel on form and set itís HTML property. Thatís all you have to do to get HTML viewer with automatic scrollbars, build-in zoom support (Ctrl+Wheel or zoom gesture), gestures support for both VCL and FMX, picture loading (from file or internet) with BMP, JPEG, PNG, ICO and GIF support, hints (HTML title attribute) animations and transitons (for elements with :hover or :active styles).

To simply draw HTML on Canvas write

Doc := THtDocument.Create;
try 
  Doc.Parse(HTML); 
  Doc.Draw(Canvas, Rect); 
finally 
  Doc.Free 
end; 

Why do I need it?

VCL and FMX contains a lot of powerful controls with many features. But what if you need something non-standard, for example put an image into listbox item?

Of course writing OnDraw event handler and using canvas methods is a simplest way... as long as image is not placed inside the text and text not contains several lines and some formatting. With HTML enabled list box you can just add Some text with <b>formatting</b> and <img src="myimage.png"/>image </p>

How many lines of code is neccesary to draw simple rounded rectangle with shadow and gradient? Or tiled background image Or symbol table Changing HTML property could turn simple Panel into this

 

or this

 

Also there is an Applications Gallery page demonstrating using of the HTML Library in a real applications.

What if I need an HTML Editor?

There is a fully featured cross-platform WYSIWYG HTML editor based on HTML Component Library. Please see full description there:

HTML Editor Library

How about HTML-based reports?

Please see HTML Report Library page.

Demo version

Download compiled demo and trial

News

  • 13.05.2016 
    HTML Editor now supports iOS and Android.
    Sample application: http://delphihtmlcomponents.com/MobileEditor.apk



  • 19.04.2016 
    HTML Component Library, HTML Report Library, HTML Editor Library update available.
    1. RAD Studio 10.1 Berlin packages.
    2. Improved table area selection.
    3. Merge table cells method.
    4. Inplace adding of table column/row.
    5. Live text styles preview for HtFontCombo, HtFontSizeCombo, HtTextColorCombo, HtBackgroundCombo.
    6. Build-in text search (use Panel/Editor method FindDialog).
    7. Bugfixes.

    Please download updated file from the same location.

  • 04.04.2016 
    HTML Component Library, HTML Report Library, HTML Editor Library version 3.5 released. What's new:
    1. THtXMLNode now supports JSON parsing. Load JSON and work/save as XML. 2. THtDocument.HighlightText: string property. Highlight text in all document text element without changing a document.
    3. Support for CSS counters. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters Now multi-level lists like 1. 1.1 1.2 1.2.1 are displayed correctly. 4. HtHints unit - add this unit to uses list and get animated HTML hint for any element by simply adding data-hint attribute. For example <div data-hint="Hint for &l;div>...</div>. Available hint classes: hint--top, hint--bottom, hint--left, hint--right, hint--success, hint--error, hint--warning, hint--info, hint--persistant, hint--no-animate, hint--rounded. 5. Added support for system colors (VCL). You can use windows colors in HTML (like background: window;). Also added handler for CM_SYSCOLORCHANGE so all system changes will be immediately displayed. 6. Gradients and clipping support in SVG. 7. Added support for select and textarea tags (VCL/FMX). 8. Better support of chinese punctuation (line break characters rules). 9. Export HTML document as SVG image. 10. Virtual image folders. Virtual folders are THtVirtualFolder abstract class descendant and provide access to special image categories in any HCL control. For example Shell images folder (included) allow displaying shell file icons: <img src="_shellsmallimages/.pdf"/> Already included: * _shellsmallimages * _shelllargeimages * _dialogimages 11. Keyboard navigation for THtPanel. 12. Float hint window for any element in THtPanel: use floathint attribute. 13. Now InnerText property can be used to set text inside any element (Doc.GetElementbyId('myid').InnerText := 'New text';)

    Editor

    14. MS Word .DOCX conversion to HTML - all platforms are supported VCL, FMX.Win, iOS, Android, OSX. Conversion is fast and threadsafe so can be used in web server to provide on-the-fly viewing of .docx files to users. Supports page headers/footers, complex lists (numbering), images, tables, etc. 15. New Editor actions - IncColspan DecColspan - increment and decrement colspan of table cell (merge/divide cells). 16. New Editor.TextStyle property - FontSizeValue: set font size in any unit - pt, px, mm, etc. 17. Complete integration with Addict - full/selection checking, ignore, etc. 18. Live templates / Mail merge. Special tag <xtemplate>...</xtemplate> is used to mark non-editable area/template. There are three view modes: Name - display template name. Caption - display template caption. Value - display value from DB or other source. 19. Editor demo for FMX (compiled: http://delphihtmlcomponents.com/hteditfmx.zip). 20. Editor.Options property - enable/disable caret, enable/disable text selection. 21. Editor Redo action.

    Reports

    22. New component - THtVirtualXMLTree - please see detailed page. 23. Calculated fields in Reports - use any valid Delphi expression to calculate field value. Use standard Delphi functions (most of System, SysUtils and Math functios already available) and register your own. Registration is quite simple: HtScriptGlobal.RegisterFunc('FormatFloat(Format: string; Value: extended): string', @FormatFloat); 24. New Chart types - line, scatter. 25. Displaying errors in Vertical bar charts. 26. Scale-to-Fit feature for print/print preview. Scale document to single page. Unlike other "scale to fit" it is not just simple scaling of the document, but smart adjusting of font sizes and margins/paddings. As a result, table with 100% width will remain 100%.? 27. MS Word - like column view mode in Print Preview frame. 28. Reports: custom templates for cells (<template-cell custom="true">). 29. Reports: adapter for JSON data source.
  • 22.12.2015
    Added Application Gallery section with examples of using HTML Library in a real applications.

  • 19.10.2015 
    HTML Component Library, HTML Report Library, HTML Editor Library version 3.4 released. What's new: 

    This version introduces a new rendering architecture: now drawing is fully separated from other
    library parts and can be implemented via any graphics library.
    For example you can chooose between GDI and GDI+ canvas in VCL or between FMX and native canvas on Android.
    There are two global variables in htcanvas unit: HtDefaultCanvasClass and HtDefaultFMXCanvasClass
    for global selection. Also HtPanel/HtmlEditor has the CanvasClass property for local selection.
    By default GDI+ canvas is used for VCL app, and FMX canvas for FMX (don't forget to
    include htcanvasgdip and fmx.htcanvasfmx to your project).

    GDI canvas (htcanvasgdi unit) is much faster than GDI+ and provide precise text rendering
    without GDI+ text issues, so it's use is preferable for text editing or displaying large text documents.
    But it has some limitations - rounded rectangles are not smooth and pictures support are limited
    by Delphi VCL, so for old IDE version only bitmaps and JPEG are supported, for XE+ also GIF and PNG.
    You can test it using compiled Editor demo (see link below) with live canvas selection.

    Android canvas (fmx.htcanvasandroid) provides much fasted and better rendering than default FMX canvas.
    Correct drawing of kerning pairs, precise baseline alignment, RTL (BiDi) texts, fast shadows,
    zoom for any level without quality loss and PDF export.

    Now even large documents can be displayed with smooth scrolling and zoom almost like in native Android applications.
    You can test it in compiled android .apk.
     Other improvements:
    1. New list styles supported: lower-alpha, upper-alpha, lower-latin, upper-latin, lower-roman, upper-roman.
    2. Native Android canvas.
    3. GDI canvas (only windows GDI functions).
    4. New mode for adding tables via THtTableAddCombo - drawing.
    5. New editor control - THtBorderCombo - control boder sides, color, style, padding, radius.
    6. New editor control - THtTableBorderCombo - control cells border color and width, cell padding, cell margins and table width.
    7. THtmlEditor property - BlockHighlightColor
    8. New Editor.TextStyle property - BorderColor.
    9. New Editor property TemplateMode
    10. Embedded HtClient now supports https.
    11. Images loading from web and files is now supported by HtPanel and HtmlEditor internally.
    12. New HtPanel property WebLoading (enable loading images from Web).
    13. AddUrl actions now allow title editing.
    14. Gesture support is now embedded for both VCL and FMX Panels/Editors.
    15. "Magnifying glass" on touch windows devices when selecting text.
    16. Faster rendering on FMX canvas for mobiles.
    17. Improved print preview for FMX.
    18. Faster (30%) html/xml parsing.
    19. FMX print preview now supports different pages orientations.
    20. PDF export on Android.
    21. External (custom) fonts support.
    22. New SelectHandleStyle property: iOS/Windows/Platform.
    23. Improved drag-n-drop from Excel.
    24. ImageList support for FMX (Seattle+).
    25. Delphi 5 support.

     

  • 12.06.2015
    HTML Component Library, HTML Report Library, HTML Editor Library version 3.3 released. What's new
    • 1. Drag and drop from explorer.
    • 2. Drag and drop from browser and MS Office applications.
    • 3. Improved image moving and resizing.
    • 4. Touch support for VCL applications - pan, zoom, text selection.
    • 5. Ctrl+wheel zoom for all HtPanels.
    • 6. Add symbol dialog.
    • 7. Improved font combo - hint with font name and selected text, highlighted document fonts.
    • 8. Document index and navigation (autocreated).
    • 9. Text search divided by topics.
    • 10. Visible pagebreaks and different page orientation.
    • 11. Media queries (style depend on window size).
    • 12. 20% faster CSS style calculation.
  • 09.06.2015
    HTML Component Library, HTML Report Library, HTML Editor Library version 3.2 released.
  • 04.05.2015
    WYSIWYG HTML Editor v.3.1 released.
    • FMX support (Win/OSX)
    • New HTML components - HtColorCombo, HtFontCombo, HtFontSizeCombo, HtTableAddCombo (VCL)
    • RTF import.
    • Tables support - new actions: Add row, Add column, Delete row, Delete column
    • DB-Aware version
  • 14.04.2015
    WYSIWYG HTML Editor component for VCL released
  • 15.12.2014
    HTML Component Library 2.5 released
    What' new:
    • 1. transition: blur;
    • 2. Transition timing functions (now are supported only ease and linear)
    • 3. Shadows drawing performance incredible improved.
    • 4. CSS z-index property
    • 5. CSS cursor property
    • 6. AdaptiveZoom support for FMX
    • 7. Rendering speed improved
    • 8. Margin collapsing for block element
    • 9. SVG shape-rendering attribute (=crisp-edges - no antialiasing)
    • 10. CSS @media rule support (THtDocument.Media: TCSSMedia property)
    • 11. PDF export on MacOS
    • 12. Document.ShowImages property
    • 13. CSS background-size, background-position properties
    • 14. HtPanel.LazyImageLoading and BackgroundImageLoading properties
    • 15. New HtPanel events:
      OnElementDragEnd
      OnElementResizeEnd
      AfterTableColumnMoved
      OnElementClick
    • 16. New TElement flag - efDesignerSelected - force drawing selection on element
    • 17. TElement.AddCSS/ClearCSS - add (clear) css rule to element selft-style
    • 18. TCSSStyleSheet.ClearProp/ClearSection - clears property or full section (by selector)
    New page in Win32 demo - CSS Hints.
  • 8.10.2014
    0 HTML Component Library 2.4 released
    What' new:
    • 1. XE7 support (all platforms)
    • 2. HTML5 Video tag (using libvlc, so VLC player should be installed). Use htvideo.pas unit
    • 3. vw, vh, REM CSS units
    • 4. min-width, max-width CSS properties
    • 5. Faster parsing, less memory consumption
    • 6. Added support for scripting
    • Any scripting engine could be used via THtScriptAdapter class. Sample for JVCL Interpreter included in htjvscriptadapter.pas unit Supported DOM script events: onclick, onmouseover, onmouseout, onmousemove
    • 7. SVG support for FM (OSX, iOS, Android)
    • 8. Printing/Paging in FM (Win/OSX)
    • 9. CSS overflow: hidden support for FM
    • 10. THtPanel.TouchScroll property (VCL) - enables scrolling by mouse
    • 11. FMX.THTPanel now contains scrollbars
    • 12. FMX.THtPanel.ContentScale property - allow content zooming
    • 13. New event for image loading - OnGetImage: TBytes (XE+)
    • 14. THtPanel.Active property - enable/disable active content (process mouse events). Scrolling is faster when active=false
    • 15. CSS draggable property support (and for HTML draggable attribute too)
    All demos updated.
    Trial versions available for D7, D2007, D2010, XE, XE2, XE3, XE4, XE5, XE6, XE7
  • 22.09.2014
    HTML Report Library now supports FMX on all platforms
    Please see compiled demos
  • 27.05.2014
    Version 2.3 released
    • 1.XE6 Support (+FM)
    • 2. Paging/Printing (VCL)
    • 3. Right-to-Left languages support (use CSS direction property)
    • 4. Embedded scrollbars in THtPanel (VCL)
    • 5. SVG (partial) (VCL) Supported elements: SVG, g, path, rectangle, circle, text
    • 6. HtPanel shows hint for any element with title attribute (not only URLs)
    • 7. New CSS Properties: page-break-before, page-break-after, page-break-inseide
    • 8. New value for CSS position: running(..)
    • 9. Attribure selectors now supports ^, $, *, ~ and | prefixes.
    • 10. Faster rendering (+30%)
    • 11. Less memory consumption (-50%)
    Win32 Compiled demo updated
  • 24.04.2014
    Reports demo application See screenshort
  • 23.04.2014
    Printing
  • 18.04.2014
    Version 2.2 released
    • Correct processing of unclosed tags (<li>...<li> for example)
    • Animated images (GIF) in Label, Panel, ListBox, Metro, Notifications (VCL only)
    • Rendering speed: 30 times faster
    • Fast processing of large documents (for example, parsing and rendering of http://www.w3.org/TR/selectors/ takes only 100 ms, see compiled demo/Text flow/Load large document)
    • CBuilder XE5 support.
    • XE6 support (VCL)
    • Adaptive zoom (browser-like). See Labels page in demo.
    • New pages in demo.
    All compiled demos updated
  • 13.03.2014
    Unicode support for non-unicode delphi (D6-D2009)
    FM support for Delphi XE4
    HtPanel can be transparent when placed on other HtPanel
    Transition for shadows (see Text flow page in demo)
    Rowspan, bgcolor, bordercolor attributes
    Demo updated.
  • 22.11.2013
    Android demo (compiled)
  • 18.11.2013
    Version 2.0 - What's new
  • 14.05.2013
    New page in demo - MacOS Dock
  • 06.05.2013
    CSS Resize property supported
  • 02.05.2013
    HCL now passes the complexspiral test
  • 01.05.2013
    Added CSS Overflow-Y support. Demo updated
  • 30.04.2013
    DB Label component. See new demo
  • 29.04.2013
    Delphi 6 is now supported
  • 28.04.2013
    Lazy image loading and background image loading added
  • 26.04.2013
    Label tag added
    Demo updated (expanding/collapsing sections on Text flow page)
  • 25.04.2013
    InnerHTML property (get/set)
  • 24.04.2013
    Version 1.5 released! If you are registered customer and didn't get email - please notify me
  • 20.04.2013
    Drag and drop can be animated. See Metro UI page in demo
  • 18.04.2013
    Added registration of custom element classes, even as replacement for standart classes.
    CSS text-shadow property (without bluring)
    New component THtNotifyWindow - transparant HTML notification window. See Labels page in demo.
  • 15.04.2013
    Added support of drag and drop HTML elements - see Metro UI page in demo
  • 14.04.2013
    New CSS parser - now fully complies with CSS 2.1 specifications Faster document creation and rendering
    Transition (animation) by default uses ease timing function
  • 09.04.2013
    New page in demo - Metro UI example
    Added Plimus registration service
  • 06.04.2013
    New component - THtStatusBar (with hints support)
  • 05.04.2013
    Links now supports "title" attribute and can show hint
    New component - THtTabSet (with hint support)
  • 04.04.2013
    Added THtDocument.OnURLHover event