Learn To Add Custom Text Rendering And Formatting Capabilities To Your Delphi FMX Controls Quickly

Most applications demand high-quality text rendering, resolution-independent outline fonts, and full Unicode text and layout support. Looking for a device-independent text layout system that improves text readability in documents and in UI for Your Delphi/C++ applications? How to build such Text Rendering Capabilities to your FireMonkey controls? This post will guide you. (e.g) Let’s see how to enhance the TLabel control with Rendering and formatting capabilities for the Text in HTML Tags.

How to create:
1. Create a descendant of TLabel that supports a limited selection of HTML tags. Parse the label for HTML tags every time the text changes.
2. Override its Dochanged method to parse the text for HTML tags
3. Use Firemonkey’s TTextLayout class to apply formatting attributes to parts of the text.
Note: No need to use HTML for formatting instead we can use TTextlayout.

• TTextLayout is an abstract class that provides mechanisms to render text quickly. Such rendering systems are supported by DirectWrite API (Windows) and Core Text framework (OS X). Also used to calculate glyph positions, measure text, draw text, and covert to curves for path effects and 3D extrusion.
• To create this class, use TTextLayoutManager – In charge of choosing the appropriate layout class type for the current running platform.
• Use AddAttribute to assign text block properties like TTextRange (starting position and length) and TTextAttribute (font and color).
• When changing several properties of the layout, you should use the BeginUpdate and EndUpdate procedures.
• Use RenderLayout to render the text on a canvas.
• The PositionAtPoint method returns the position in the text by the position’s coordinates.
• The RegionForRange method returns the array of the rectangles surrounding the range of the text specified in ARange.
• Another feature is the ability to convert text to a TPathData object by calling the ConvertToPath procedure.

Check out the full Video of creating a Simple FMX HTML control below.