Alexander Sviridenkov

HTML Component Library contains HTML Label for VCL and all FMX platforms. This is the most powerful HTML label because it supports almost all HTML tags and CSS properties while others supports only small subset.

Lot of times in XE7, never in 10.3

@Jacek Laskowskisorry, .DB was missed in zip, now fixed.

@Kas Ob. thank you!

@Rollo62, @Fred Ahrens, Thank you!

Like every year, today, in honor of my birthday, I give a 43% discount on 5 licenses (excluding renewal). Please use coupon code NOV202019

https://delphihtmlcomponents.com/order.html

@limelectdepends on platform, this will work on Windows and (probably) OSX but not on mibiles.

@limelect AFAIK Hebrew doesn't have special connectors between letters so can be correctly rendered using separate symbols, but Arabic - can't.

@limelect try to display the following text in Android

OK, several samples. FMX form with HtPanel on left and standard memo on right.

Windows, standard FMX canvas:

Here kerning pairs are correct on both sides and arabic letters are connected as it should and have correct order because FMX canvas use windows Direct2D layout for rendering. But word order in sentense with mixed english/arabic text is incorrect on right side and correct on left, because in HtPanel text is prepared by internal BiDi processor.

Android, standard FMX canvas:

On mobile platforms FMX output each letter as single bitmap. So kerning pairs are not processed and arabic letters are not connected. Word and letter order is correct on left side because of internal BiDi processor, but still no kerning and letter connectors.

Android, native Android canvas:

Kerning and letter connectors are correct.

There is also another issue with FMX canvas ion mobiles. Here is the same form with scaling set to 10x for both components.

FMX use bitmap scaling instead of preparing bitmaps for each font size. This leads to visual artefacts and blurred text.

41 minutes ago, John Kouraklis said:

@Alexander Sviridenkov So, you don't use bitmaps on those platforms? but the native engines?

 

Do your components support then RTL?

Depends on selected canvas,  For iOS, Android and OSX there are both native and FMX canvases.

RTL is supported internally, library has own BIDI processor because even on native canvases each word is rendered separately, so layout should be prepared before passing to renderer.

FMX use different methods for text rendering on mobile and desktop platforms. On desktop platforms native OS methods are used (f.e. Direct2D text layout or CGContext) but on mobile platforms text is rendered as bitmap combination - each font symbol is stored in cache as bitmap.

This leads to no RTL support, bad kerning, etc and also is slow., This is why I had to write native canvas support for these platforms.

On 9/17/2019 at 5:29 AM, Vincent Parrett said:

How do existing users get this? 

You should have already received automatic email I'll resend it now manually. 

What's new

New editor features video:

On 9/13/2019 at 8:19 AM, Rollo62 said:

@Alexander Sviridenkov

I use and like your library, although I must say this is sometimes not easy to figure out how simple, obvious tasks are intended to operate in runtime and designtime.
Please provide more of such samples, to get clear about the intended use and possibilities.
 

Thank you, I will publish more examples after an upcoming release.

7 minutes ago, Dany Marmur said:

@Alexander Sviridenkov Wow. The editor "floating menu", is that deep down or can one plug in TActionList(s)/TPopupMenu(s)? Could i even intercept with TMenu decendants?

Class hierarchy is independend from VCL/FMX menus. Thereby menus are cross platform and HDPI ready. You can add any own item classes, but they shoud return HTML to render in menu and follow some rules.

Code for each item is relatively simple. For example list type selector consists of two classes, first for drop down panel:

THtEditContextList = class(THtEditContextItem)
public
  function Render: string; override;
end;
  
function THtEditContextList.Render: string;

procedure Add(const ListType, ListTag: string);
begin
  Result := Result + Format('<div class="eclistbox fade" listtype="%s"><%s style="list-style-type: %s"><li>———</li><li>———</li><li>———</li></ol></div>',
    [ListType, ListTag, ListType]);
end;

begin
  Result := '';
  Add('none', 'ul');
  Add('circle', 'ul');
  Add('disc', 'ul');
  Add('square', 'ul');
  Add('decimal', 'ol');
  Add('lower-alpha', 'ol');
  Add('lower-roman', 'ol');
  Add('upper-alpha', 'ol');
  Add('upper-roman', 'ol');
end;

And second for the button:

THtEditContextListStyle = class(THtEditContextLiveItem)
public
  function Render: string; override;
  procedure OnSubmenuElementEnter(Sender: TElement); override;
  procedure OnSubmenuClick(const Sender: TElement; Button: TMouseButton; Shift: TShiftState); override;
end;

procedure THtEditContextListStyle.OnSubmenuClick(const Sender: TElement;
  Button: TMouseButton; Shift: TShiftState);
begin
  OnSubmenuElementEnter(Sender);
end;

procedure THtEditContextListStyle.OnSubmenuElementEnter(Sender: TElement);
begin
  if Sender['listtype'] <> '' then
  begin
    if Sender.NodebyName('ol') <> nil then
      Editor.SetListStyle('ol', Sender['listtype'])
    else
      Editor.SetListStyle('ul', Sender['listtype']);
    Editor.Repaint;
  end;
end;

function THtEditContextListStyle.Render: string;
begin
  id := 'list';
  Result := '<div id="list" class="ecbutton down fade"><div class="faicon">&#61643;</div>&nbsp;</div>';
  FSubmenuClass := THtEditContextList;
  FDefaultSubmenuWidth := 300;
end;

Code for building menu:

    ContextPanel.Add(THtEditContexBold).Add(THtEditContextItalic).Add(THtEditContextUnderline).
      Add(THtEditContexStrike).Add(THtEditContexSpace).Add(THtEditContextTextColor).Add(THtEditContextBGColor).
      Add(THtEditContextFontSize).Add(THtEditContextFont).
      Add(THtEditContexLineBreak).Add(THtEditContexAlignLeft).Add(THtEditContexAlignCenter).Add(THtEditContexAlignRight).Add(THtEditContexAlignFull)...

On 8/26/2019 at 9:53 AM, TigerLilly said:

We used it, because we had the need, that our users were able to edit the report after generation.

HTML Report Library produce plain HTML which can be edited using WYSWYG HTML Editor.

Unlike some other report engines, elements are in normal flow (absolute positioning can be used but is not required), so editing will not break document layout.

I highly recommend PayProGlobal. All kind of payments, good support, good fraud checking.

1 hour ago, uligerhardt said:

Regarding dynamic construction: I only know FastReport and List&Label. Both have DOM-like APIs. And FastReport has scripting.

HTML Report Library has scripting, DOM API, dynamic construction and unlimited interactivity.

Currently library supports formatting only for XML or XHTML. HTML formatter is expected in next version.

2 hours ago, Sherlock said:

That is not in the Delphi IDE, is it?

No, but I think about it.

27 minutes ago, microtronx said:

Wow! Alexander, is this available at the moment for customers?

Will be available in next release.

Yes, this is part of HTML Library bundle. Code editor combines Scripter and SQL framework to make code completion works for both pascal and SQL code in one window.

Also this demo shows ability to add design time method checking for classes in scripter (in this case checker is added to TXQuery class and checks that parameters in SQL query corresponds to parameter array).